@import url('https://fonts.googleapis.com/css?family=Roboto:300');

html *,
body {
	font-family:Roboto, helvetica, arial;
	font-size:19px;
	font-weight:normal;
	line-height:1.4;
	box-sizing: border-box;
	padding:0;
	margin:0;
/*
	animation: fadeInAnimation ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
*/
}

body.home .nav-home a,
body.services .nav-services a,
body.templates .nav-templates a,
body.resources .nav-resources a,
body.contact .nav-contact a {
	color:#ff239b;
}

body.templates .pg-01 a,
body.templates .pg-02 a,
body.templates .pg-03 a,
body.blog .pg-01 a {
	background-color:#000;
	color:#fff;
}

.wrapper {
	width:100%;
	max-width:1140px;
	display:block;
	margin:0 auto;
}

/*--- loader ---*/

#loader-wrapper {
	display:flex;
	text-align:center;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:#fff;
	z-index:99999;
}

.ring {
	position:absolute;
	width:150px;
	height:150px;
	border-radius:50%;
	animation: ring 2s linear infinite;
}

@keyframes ring {
	0% {
		transform:rotate(0deg);
		box-shadow:1px 5px 2px #ff239b;
	}
	50% {
		transform:rotate(180deg);
		box-shadow:1px 5px 2px #931158;
	}
	100% {
		transform:rotate(360deg);
		box-shadow:1px 5px 2px #f6b1d6;
	}
}

.ring:before {
	position:absolute;
	content:'';
	left:0;
	top:0;
	height:100%;
	width:100%;
	border-radius:50%;
	box-shadow:0 0 5px rgba(255,255,255,.3);
}

span.loader-text {
	color:#ff239b;
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:1px;
	line-height:200px;
	animation:text 3s ease-in-out infinite;
}

@keyframes text {
	50% {
		color:#999;
	}
}

/*--- menu ---*/

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top:0;
  right:0;
  left:0;
  transition:top 0.5s ease;
  transition: background-color 0.5s ease;
  z-index:9999;
  padding:5px 0px 10px 0px;
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.logo {
	float:left;
	display:block;
	margin:5px 0px 0px 0px;
	padding:0px 5px;
	width:357px;
	height:105px;
	background-color:transparent;
	transition: ease 0.7s;
}

.main-nav {
	display:flex;
	justify-content:space-around;
	align-items: center;
	height:105px;
	margin-top:5px;
	float:right;
}

.main-nav li {
	list-style-type:none;
}

.main-nav li a {
	color:#fff;
	text-decoration:none;
	text-transform:capitalize;
	font-size:100%;
	letter-spacing:1px;
	padding:0px 12px;
}

.main-nav li a:hover {
	color:#ff239b;
}

.burger {
	display:none;
}

.burger div {
	width:35px;
	height:1px;
	background-color:#fff;
	margin:10px;
	transition: all 0.3s ease;
}

.cart-visible a {
	display:none;
	color:#fff;
	text-decoration:none;
	text-transform:capitalize;
	font-size:100%;
	letter-spacing:1px;
	padding:0px 12px;
	position:absolute;
	top:22px;
	right:60px;
}

.cart-visible a:hover {
	color:#ff239b;
}

/*--- end of menu ---*/

.scrollbar {
	overflow:hidden;
}

h1 {
	font-size:140%;
	color:#777;
	margin:0px;
	padding:0px;
	text-align:center;
}

h1.hero {
	display:block;
	width:100%;
	font-size:210%;
	color:#fff;
	margin:0px 0px 0px 0px;
	padding:0px;
	text-align:left;
}

h1.preview {
	font-size:150%;
	color:#777;
	margin:0px;
	padding:0px;
	text-align:center;
	text-transform:capitalize;
}

h1.error {
	font-size:210%;
	letter-spacing:2px;
	color:#7b7b7b;
	margin:40px auto 30px auto;
	padding:0px;
	text-align:center;
}

h1.faq {
	font-size:700%;
	text-align:center;
	font-weight:normal;
	padding:0;
	margin:0 auto;
}

h2.faq {
	font-size:140%;
	text-align:center;
	font-weight:normal;
	margin:-75px auto 15px auto;
	padding:0;
	
}

.pink {
	color:#ff239b;
}

.bold {
	font-weight:bold;
}

.med-font {
	font-size:34px;
}

.lg-font {
	font-size:200%;
}

.xmed-font {
	font-size:170%;
}

.huge-faq-period {
	font-size:200%;
}

.underline {
	text-decoration:underline;
}

.add-br{
	display:none;
}

.br-break {
	display:block;
}

.contact-add-br { display:none; }

a:active,
a:focus {
    outline: none;
}

.clear {
    clear: both;
}

img {
    border: 0px;
}

a[href^="mailto"]{
	color:#ff239b;
}

.main-img {
	display:flex;
	justify-content:center;
	margin:20px auto;
	padding:10px;
	border:1px solid #b2b2b2;
	width:900px;
	height: auto;
}

.service-img {
	display:flex;
	justify-content:center;
	margin:20px auto;
	padding:0px;
	width:780px;
	height: auto;
}

.height-spacer {
	margin:150px 0px 0px 0px;
}

hr.main {
	border:0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	margin:30px auto 20px auto;
	padding:0px;
	width:65%;
}

hr.sml {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	margin:10px auto 10px auto;
	padding:0px;
	width:50%;
}

hr.white {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	margin:10px auto 10px auto;
	padding:0px;
	width:70%;
}

input[type=submit], ul.nav-buttons li a, a:link, #PPMiniCart .minicart-remove:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

header {
	background-image:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../img/working-dogs.jpg);
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:100vh;
}

.hero-text-box {
	position:absolute;
	top:30%;
	padding:0;
	margin:0;
	display:block;
	width:100%;
	max-width:1140px;
}

.hero-button:link,
.hero-button:visited {
	display:inline-block;
	width:180px;
	padding:10px 20px;
	font-size:21px;
	color:#fff;
	text-decoration:none;
	letter-spacing:2px;
	border:1px solid #fff;
	text-align:center;
	margin:80px 20px 0px 0px;
	background-color:transparent;
}

.hero-button:hover {
	background-color:#ff239b;
}

h2 {
	font-size:120%;
	color:#777;
	text-align:center;
	margin:0px 0px 20px 0px;
}

h2.main {
	font-size:110%;
	color:#777;
	text-align:center;
	margin:20px 0px 20px 0px;
}

h2.body {
	font-size:130%;
	color:#777;
	text-align:center;
	margin:20px 0px 0px 0px;
}

h2.preview {
	font-size:110%;
	color:#777;
	text-align:center;
	margin:20px 0px 20px 0px;
}

h2.hero {
	font-size:140%;
	color:#fff;
	text-align:left;
	margin:0px 0px 20px 0px;
}

h2.light {
	font-size:110%;
	color:#fff;
	text-align:center;
	margin:0px 0px 0px 0px;
}

h2.error {
	font-size:130%;
	color:#777;
	text-align:center;
	margin:20px 0px 20px 0px;
}

h3 {
	font-size:100%;
	color:#777;
	text-align:left;
}

h3.preview {
	font-size:110%;
	color:#ff239b;
	text-align:center;
	margin:-25px auto 20px auto;
	font-weight:bold;
}

h3.center {
	font-size:100%;
	color:#777;
	text-align:center;
}

h3.description {
	width:960px;
	margin:0 auto;
	font-size:19px;
	color:#2b2b2b;
	padding:10px;
	text-align:left;
}

h4 {
	font-size: 60%;
	text-align:center;
	color:#fff;
	letter-spacing:5px;
}

h4 a:link,
h4 a:visited {
	color:#fff;
	text-decoration:none;
	padding-bottom:0px;
	font-size:17px;
}

h4 a:hover {
	color:#ff239b;
}

.nav-form-steps {
	display:block;
	width:100%;
	margin:5px auto 20px auto;
	text-align:center;
}

.nav-form-steps p {
	color:#000;
	font-size:130%;
	font-weight:normal;
	text-transform:capitalize;
	letter-spacing:2px;
}

.nav-form-steps p .blackcolor {
	color:#000;
	font-size:150%;
	font-weight:normal;
	text-transform:capitalize;
	letter-spacing:2px;
}

.nav-form-steps p .pinkcolor {
	color:#ff239b;
	font-size:190%;
	font-weight:bold;
	text-transform:capitalize;
	letter-spacing:2px;
}

.top-title-order-form {
	display:block;
	width:480px;
	border:1px solid #444;
	background-color: rgba(0,0,0,0.83);
	margin:0 auto;
	padding:10px 0px;
}

.top-title-order-form p {
	color:#fff;
	font-size:43px;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}

.top-title-order-form p .colored-pink {
	color:#ff239b;
	font-size:43px;
	text-transform:uppercase;
	font-weight:normal;
}

nav.no-hero {
	width:100%;
	background-color:#000;
	padding:0px 0px 5px 0px;
}

.navbar-no-hero { 
	background-color: rgba(0,0,0,0.83);
	width:100%;
	position:fixed;
	top:0;
	padding:0px 0px 5px 0px;
	margin:0;
	transition: ease .7s;
	height:115px;
}

.shrink {
  /* padding: 2px 0px; */
  height:80px;
}

.logo-small {
	width:245px;
	height:72px;
	margin:21px 0px 0px 0px;
}

.scrolled {
  background-color:rgba(0, 0, 0, 0.83);
}

.cart-button {
     display:block;
     font-family:Roboto, helvetica, arial;
     font-size:100%;
     color:#fff;
     font-weight:normal;
     text-align:center;
     text-decoration:none;
     letter-spacing:1px;
}

.cart-button:visited {
     color:#fff;
}

.cart-button:hover {
     color:#fff;
}

.paypal {
	width:100%;
	margin:0 auto;
	text-align:center;
}

.paypal img {
	width:180px;
	height:auto;
}
	
.media-nav {
	position: absolute;
	right:20px;
	top:20px;
	font-size:27px;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:2px;
	display:none;
	padding:0;
	margin:0;
}

.media-nav span:visited {
	color:#fff;
}
	
.media-nav span:hover {
	cursor: pointer;
	color:#ff239b;
	transition:ease 0.5s;
}
	
.nav-expanded {
	display:block;
	width:100%;
}

.intro {
	width:100%;
	background-color:#000;
	padding:20px 0px;
	margin:0 auto;
}

.lft {
	float:left;
	width: 33%;
	height:290px;
	border-right:1px solid #000;
	margin:30px 0px 30px 0px;
	padding:5px;
}

.mdl {
	float:left;
	width:33%;
	height:290px;
	border-right:1px solid #000;
	margin:30px 0px 30px 0px;
	padding:5px;
}

.rgt {
	float:left;
	width: 33%;
	height:290px;
	border-right:1px solid transparent;
	margin:30px 0px 30px 0px;
	padding:5px;
}

ul.services {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type:none;
	margin:15px 0px 0px 0px;
	padding:0;
}

ul.services li {
	border:1px solid #7f7f7f;
	display:block;
	width:30%;
	height:210px;
	margin:5px;
	padding:15px 10px;
}

ul.services li .icons {
	align-items: center;
	display:block;
	color:#ff239b;
	font-size:48px;
	text-align:center;
}

ul.services li p.title {
	font-size:25px;
	color:#000;
	text-align:center;
	text-transform:capitalize;
	text-decoration:underline;
}

ul.services li p.details {
	font-size:19px;
	color:#222;
	text-align:center;
}

.blog {
	width:1140px;
	display:block;
	margin:0px auto 30px auto;
	padding:0px;
}

.blog .lft-blog {
	float:left;
	width:80%;
	border-right:1px solid #2f2f2f;
	padding:0px 10px 0px 10px;
}

.blog .lft-blog p.title {
	font-size:29px;
	color:#2b2b2b;
	text-align:center;
	text-transform:capitalize;
	font-weight:bold;
	margin:35px 0px 30px 0px;
}

.blog .lft-blog img {
	display:block;
	/*width:890px;
	height:350px;*/
	width:100%;
	height:auto;
	border:1px solid #7f7f7f;
	padding:5px;
	margin:0 auto;
}

.blog .lft-blog p.details {
	width:100%;
	margin:0 auto;
	color:#2b2b2b;
	padding:20px 10px 40px 10px;
	text-align:left;
}

.blog .lft-blog p.details a {
	color:#000;
	text-decoration:underline;
}

.blog .lft-blog p.details a:hover {
	color:#ff239b;
}

.blog .lft-blog .read-more a {
	display:flex;
	justify-content: center;
	width:290px;
	padding:10px 0px;
	font-size:21px;
	color:#fff;
	text-decoration:none;
	letter-spacing:2px;
	border:2px solid #2f2f2f;
	background-color:#000;
	text-align:center;
	margin:10px auto 0px auto;
	text-transform:capitalize;
}

.blog .lft-blog .read-more a:hover {
	color:#2f2f2f;
	background-color:#fff;
}

.blog .lft-blog hr.main {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	margin:50px auto 20px auto;
	padding:0px;
	width:75%;
}

.blog .rgt-blog {
	float:left;
	width:15%;
	padding:0px 10px;
}

.blog .rgt-blog p.title {
	display:block;
	background-color:#000;
	font-size:27px;
	color:#fff;
	text-align:center;
	text-transform:capitalize;
	padding:5px 0px;
	margin:0px auto 15px auto;
	width:205px;
}

.blog .rgt-blog p.details a,
.blog .rgt-blog p.details a:visited {
	display:block;
	font-size:21px;
	color:#2f2f2f;
	text-align:center;
	padding:0px 0px;
	text-decoration:none;
	letter-spacing:2px;
	margin:0 auto;
	width:205px;
}

.blog .rgt-blog p.details a:hover {
	color:#ff239b;
}

.btn-lg:link,
.btn-lg:visited {
	display:flex;
	justify-content: center;
	width:340px;
	padding:15px 15px;
	color:#fff;
	text-decoration:none;
	letter-spacing:2px;
	border:1px solid #2f2f2f;
	background-color:#000;
	text-align:center;
	margin:40px auto 40px auto;
	text-transform:capitalize;
}

.btn-lg:hover {
	background-color:#fff;
	color:#000;
}

.testimonial {
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
	width:100%;
	margin-top:35px;
}

.testimonial img {
	display:block;
	height:350px;
	width:450px;
}

.testimonial p {
	display:block;
	height:350px;
	width:450px;
	margin:0px;
	font-size:165%;
	color:#b2b2b2;
	text-align:center;
}

.testimonial img.center {
	justify-content:center;
	height:350px;
	width:450px;
}

.select-design-1col {
	max-width:1140px;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-flow:wrap;
	padding:0;
	margin:0 auto;
}

.select-design-2col {
	max-width:762px;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-flow:wrap;
	padding:0;
	margin:0 auto;
}

.select-design-3col {
	max-width:1140px;
	width:100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	flex-flow:wrap;
	padding:0;
	margin:0 auto;
}

.column-main {
	max-width:580px;
	width:100%;
	height:320px;
	border:3px solid #c4c4c4;
	margin:0 auto;
	box-sizing:border-box;
}

.column-templates {
	max-width:370px;
	width:100%;
	height:auto;
	border:3px solid #c4c4c4;
	margin:0 auto;
	box-sizing:border-box;
}

img.blank-templates {
	max-width:370px;
	width:100%;
	height:389px;
}

.blank-template-container {
	max-width:1170px;
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	display:flex;
	justify-content:center;
}

/* Image Style */

[type=radio] + img.mainpgtempl {
	border:5px solid #c4c4c4;
	background-color:#d4d4d4;
	display:inline-block;
	height:auto;
	width:100%;
	max-width:960px;
/*
	height: 450px;
	width: 740px;
	padding:0px;*/
	border-radius:10px;
	margin:0px auto;
	padding:0px;
	text-align:center;
	cursor:pointer;
}

/* Checked Style */
[type=radio]:checked + img.mainpgtempl {
/*  outline: 2px solid #ff239b;*/
	border:5px solid #ff239b;
}

.label-left {
	display:inline-block;
}

[type=radio] + img.selectiontempl {
/*	border:2px solid #c4c4c4;*/
	background-color:#c4c4c4;
	display:inline-block;
	/*height: 389px;*/
	height:auto;
	max-width: 370px;
	width:100%;
	padding:0px;
	border:5px solid #f1f1f1;
/*	box-shadow:0 20px 30px rgba(0, 0, 0, .5);*/
	margin:0px 3px;
	text-align:center;
	cursor:pointer;
	border-radius:5%;
}

/* Checked Style */
[type=radio]:checked + img.selectiontempl {
/*  outline: 2px solid #ff239b;*/
	border:5px solid #ff239b;
}

/* .blank-template-container img.templateCover {
	display:block;
	max-width:740px;
	width:100%;
	height:350px;
	border:1px solid #ff239b;
	padding:5px;
	background-color:transparent;
} */

img.template-preview {
	border:1px solid #c1c1c1;
	/*background-color:#c4c4c4;*/
	background-size:cover;
	display:inline-block;
	height: 350px;
	width: 740px;
	padding:5px;
	cursor:pointer;
}

/* Radio buttons for About templates */
input[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.screenshot-container {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	/*min-height:100vh;*/
	/*overflow:hidden;*/
	margin:0 auto;
}

.button-previews {
	text-align:center;
	margin:20px auto 0px auto;
}

button {
	display:inline-block;
	width:180px;
	margin:0px 3px 20px 2px;
	padding:10px 0px;
	text-align:center;
	text-transform:capitalize;
	cursor:pointer;
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	letter-spacing:1px;
	text-decoration: none;
	font-size: 110%;
	transition:ease-in-out 0.5s all;
	}

button:hover {
	background-color:#fff;
	color:#000;
}

#box {
	display:none;
	margin:0 auto;
	max-width:960px;
	width:100%;
	height:550px;
	/*background:url(../templates/designs/001-gizmo.jpg);*/
	background-size:100%;
	background-position:top;
	border:10px solid #dfdfdf;
	box-shadow:0 20px 30px rgba(0, 0, 0, .5);
	transition:ease-in-out 5s all;
	border-radius:10px;
}

#box:hover {
	background-position:bottom;
}

#box-resp {
	display:none;
	margin:0 auto;
	max-width:375px;
	width:100%;
	height:550px;
	/*background:url(../templates/designs/001-gizmo-resp.jpg);*/
	background-size:cover;
	backgrouund-position:top;
	border:10px solid #dfdfdf;
	box-shadow:0 20px 30px rgba(0, 0, 0, .5);
	transition:ease-in-out 12s;
	border-radius:10px;
}

#box-resp:hover {
	background-position:bottom;
}

.active {
	display: block !important;
	animation: fadeIn 1.8s forwards;
}

  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
 }

h3.hover-instr {
	text-align:center;
	font-size:15px;
	margin:-18px auto 13px auto;
	padding:0px;
	text-transform:uppercase;
}



.screenshot-container .macbook {
	/*position:absolute;
	top:20%;
	left:20%;*/
	margin:0 auto;
	width:960px;
	height:570px;
	/*height:702px;*/
	/*width:606px;
	height:489px;*/
}

.screenshot-container .macbook .imgBx {
	position:absolute;
	top:33px;
	left:393px;
	width:730px;
	height:455px;
	background:#ff0000;
	background:url(../templates/designs/001-gizmo.jpg);
	background-position:top;
	background-size:100%;
	transition:ease-in-out 5s;
}

.screenshot-container .macbook:hover .imgBx {
	background-position:bottom;
}

.screenshot-container .iphone {
	position:absolute;
	top:27%;
	left:17%;
	width:245px;
	height:383px;
	z-index:2;
}

.screenshot-container .iphone .imgBx {
	position:absolute;
	top:44px;
	left:42px;
	width:161px;
	height:285px;
	background:#0f0;
	background:url(../templates/designs/001-gizmo-resp.jpg);
	background-position:top;
	background-size:100%;
	transition:ease-in-out 5s;
}

.screenshot-container .iphone:hover .imgBx {
	background-position:bottom;
}

.faq-section {
	margin:15px auto 10px auto;
	text-align:center;
	font-size:23px;
	font-weight:normal;
}

.faq-section a {
	color:#ff239b;
	font-size:23px;
}

/*input[type=radio] {
display:none;
}*/

/* input#template-1[type=radio] + label
{
background-image: url("../templates/designs/template-01.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#template-1[type=radio]:checked + label {
border-color: #ff239b;
}
 
input#about-1[type=radio] + label
{
background-image: url("../templates/designs/about-01.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#about-2[type=radio] + label
{
background-image: url("../templates/designs/about-02.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#about-3[type=radio] + label
{
background-image: url("../templates/designs/about-03.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#about-1[type=radio]:checked + label
{
border-color: #ff239b;
}
input#about-2[type=radio]:checked + label
{
border-color: #ff239b;
}
input#about-3[type=radio]:checked + label
{
border-color: #ff239b;
}

/* Radio buttons for Gallery templates */
 
/*input#gallery-1[type=radio] + label {
background-image: url("../templates/designs/gallery-01.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#gallery-2[type=radio] + label {
background-image: url("../templates/designs/gallery-02.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#gallery-3[type=radio] + label {
background-image: url("../templates/designs/gallery-03.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#gallery-1[type=radio]:checked + label {
border-color: #ff239b;
}
input#gallery-2[type=radio]:checked + label {
border-color: #ff239b;
}
input#gallery-3[type=radio]:checked + label {
border-color: #ff239b;
}

/* Radio buttons for Contact templates */
 
/*input#contact-1[type=radio] + label {
background-image: url("../templates/designs/contact-01.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#contact-2[type=radio] + label {
background-image: url("../templates/designs/contact-02.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#contact-3[type=radio] + label {
background-image: url("../templates/designs/contact-03.png");
border-color: #c4c4c4;
border-style: solid;
background-color:#c4c4c4;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:inline-block;
height: 389px;
width: 370px;
padding:0;
cursor:pointer;
}

input#contact-1[type=radio]:checked + label {
border-color: #ff239b;
}
input#contact-2[type=radio]:checked + label {
border-color: #ff239b;
}
input#contact-3[type=radio]:checked + label {
border-color: #ff239b;
}

/* Submit Order Button */
input[type=submit].btn-layouts {
	display:block;
	width:280px;
	padding:10px 0px;
	margin:5px 0px 5px 0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#ff239b;
	cursor:pointer;
	transition:ease 0.5s;
}

input[type=submit].btn-layouts:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	cursor:pointer;
}

input[type=submit].btn-order {
	display:block;
	width:220px;
	padding:10px 0px;
	margin:0px 10px 0px 0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#ff239b;
	cursor:pointer;
	transition:ease 0.5s;
}

input[type=submit].btn-order:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	cursor:pointer;
}

.ordering {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	width:100%;
	margin:40px auto 40px auto;
	padding:0px;
}

.ordering p.btn-order a {
	display:block;
	width:220px;
	padding:10px 0px;
	margin:0px 10px 0px 0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#ff239b;
	cursor:pointer;
	transition:ease 0.5s;
}

.ordering p.btn-order a:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	cursor:pointer;
}

.ordering .purchase {
	display:block;
	width:220px;
	padding:10px 0px;
	margin:0px 10px 0px 0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#ff239b;
	cursor:pointer;
	transition:ease 0.5s;
}

.ordering .purchase:first-child {
	margin-right:10px;
}

.ordering .purchase:hover {
	background-color:#fff;
	color:#000;
}
.ordering p.continue a {
	display:block;
	width:220px;
	padding:10px 0px;
	margin:0px 10px 0px 0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#ff239b;
	cursor:pointer;
	transition:ease 0.5s;
}

.ordering .continue:first-child {
	margin-right:10px;
}

.ordering p.continue a:hover {
	background-color:#fff;
	color:#000;
}

.ordering p.back a {
	display:block;
	width:120px;
	padding:10px 0px;
	margin:0px;
	font-size:110%;
	text-align:center;
	text-transform:capitalize;
	color:#fff;
	text-decoration:none;
	border:1px solid #000;
	float:left;
	background-color:#000;
}

.ordering p.back a:hover {
	background-color:#fff;
	color:#000;
}

.grey-bg {background:#777;}
.black-bg {background:#000;}
.pink-bg {background:#ff239b;}

.template-layout {
	margin:33px auto 35px auto;
	width:1140px;
	padding:10px;
	border:1px solid #8c8c8c;
	background-color:#f9f9f9;
	display:block;
	position:relative;
}

hr.template-divider {
	border:0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
	margin:0px auto 0px auto;
	padding:0px;
	width:85%;
}

.template-layout .rgt-side {
	float:right;
	width:50%;
	margin:0;
}

.template-layout .rgt-side-lft {
	float:left;
	width:50%;
	margin:0;
}

.template-layout .lft-side {
	float:left;
	width:50%;
	margin:0px;
}

.template-layout .lft-side-rgt {
	float:right;
	width:50%;
	margin:0px;
}

.template-layout .desc-box {
	margin:0 auto;
	padding:0px 30px;
	width:100%;
	display:table-cell;
	vertical-align: middle;
	height:420px;
}

.template-layout img {
	display:block;
	width:100%;
	height:auto;
	border:1px solid #b2b2b2;
	margin:0px 30px 0px 0px;
	padding:10px;
	border-radius:10px;
	background-color:#fff;
}

.template-layout p.title {
	margin:0px 0px 30px 0px;
	font-size:25px;
	color:#ff239b;
	padding:0px;
	text-transform:uppercase;
	letter-spacing:1px;
}

.template-layout p.details {
	margin:0px 0px 0px 0px;
	font-size:19px;
	color:#2b2b2b;
	padding:0px;
}

.text-rgt {
	text-align:right;
}

.template-layout .btn-see-more a {
	display:block;
	background-color:#000;
	width:240px;
	padding:10px 0px;
	margin:40px 0px 0px 0px;
	font-size:19px;
	text-align:center;
	text-decoration:none;
	text-transform:capitalize;
	letter-spacing:2px;
	color:#fff;
	border:1px solid #000;
}

.template-layout .btn-see-more a:hover {
	background-color:#fff;
	color:#000;
}

.template-layout .btn-see-more-rgt a {
	display:block;
	float:right;
	background-color:#000;
	width:240px;
	padding:10px 0px;
	margin:40px 0px 0px 0px;
	font-size:19px;
	text-align:center;
	text-decoration:none;
	text-transform:capitalize;
	letter-spacing:2px;
	color:#fff;
	border:1px solid #000;
}

.template-layout .btn-see-more-rgt a:hover {
	background-color:#fff;
	color:#000;
}


.btns {
	display:flex;
	justify-content:space-around;
	width:680px;
	margin:0 auto;
}

.btns .btn-go-back a:link,
.btns .btn-go-back a:visited {
	display:block;
	background-color:#fff;
	width:480px;
	padding:10px 0px;
	margin:40px auto 18px auto;
	font-size:21px;
	text-align:center;
	text-decoration:none;
	text-transform:capitalize;
	letter-spacing:2px;
	color:#777;
	border:1px solid #777;
}

.btns .btn-go-back a:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
}

.btns .btn-buy-now a:link,
.btns .btn-buy-now a:visited {
	display:inline-block;
	background-color:#ff239b;
	width:300px;
	padding:10px 0px;
	margin:40px auto 18px auto;
	font-size:21px;
	text-align:center;
	text-decoration:none;
	text-transform:capitalize;
	letter-spacing:2px;
	color:#fff;
	border:1px solid #000;
}

.btns .btn-buy-now a:hover {
	background-color:#fff;
	color:#000;
}

/*.preview-container {
	box-sizing: border-box;
	display:block;
	margin:30px auto 40px auto;*/
	/*width:1024px;
	height:576px;
	width:1036px;
	height:588px;*/
	/*width:972px;
	height:552px;
	border:0px solid #b2b2b2;
	padding:0px;
	text-align:center;
}*/

/*.centered {
  display:block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:33px;
  letter-spacing:1px;
  color:#fff;
  text-transform:capitalize;
  border-radius:15px;
  padding:15px 30px;
  background-color:rgba(0, 0, 0, 0.71);
  font-weight:bold;
}*/

/*.preview-container .flowplayer {
	width:960px;
	margin:0 auto;
	text-align:center;
	padding:0;
}

.preview-container .flowplayer.is-fullscreen {
	background-color:#000;
}

.preview-container .flowplayer.is-splash.flowplayer .fp-ui {
	background-image:none;
}

.preview-container .flowplayer.is-mouseout .fp-timeline {
	height:0;
	border:0;
}*/

.feature-tags {
	width:940px;
	margin:55px auto 0px auto;
	padding:0;
	text-align:center;
}

.tags {
	display:inline-block;
	margin:0px 10px 10px 0px;
	padding:5px 13px;
	font-size:19px;
	letter-spacing:1px;
	color:#2b2b2b;
	border:1px solid #ff239b;
	border-radius:10px;
	text-align:center;
	text-transform:capitalize;
}

.template-layout ul {
	display:flex;
	flex-flow:wrap;
	justify-content:space-between;
	list-style-type:none;
	margin:0;
	padding:0;
}

.template-layout ul li {
	position:relative;
	margin-bottom:25px;
}

.template-layout ul li a .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #333;
}

.template-layout ul li a:hover .overlay {
  opacity: 0.7;
}

.template-layout ul li a .text {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 31px;
  text-transform:capitalize;
  letter-spacing:2px;
  display:block;
  background-color:#ff239b;
  padding:10px 20px;
  border-radius:10px;
}

.template-layout ul li a:hover .text {
  opacity: 1;
}

ul.bottom-nav {
	display:flex;
	flex-direction: row;
	justify-content: center;
	list-style-type:none;
	margin:0 auto;
	padding:0;
}

ul.bottom-nav li a {
	display:block;
	padding:10px 20px;
	border:1px solid #b2b2b2;
	font-size:24px;
	text-align:center;
	text-decoration:none;
	color:#2f2f2f;
	margin:0px 5px;
}

ul.bottom-nav li a:hover {
	background-color:#000;
	color:#fff;
}

.grey {
	width:100%;
	background-color:#363636;
	padding:20px 0px;
}

.grey p {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	font-size:110%;
	color:#fff;
	text-align:center;
	padding:0px;
	letter-spacing:2px;
}

.back-to-top {
	color:#ff239b;
}

.contact-directory {
	width:980px;
	margin:0 auto;
	padding:0;
}

.contact-directory ul {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type:none;
	margin:0;
	padding:0;
}

.contact-directory li {
	display:block;
	border:1px solid #7b7b7b;
	padding:20px 20px;
	margin-top:20px;
}

.contact-directory li .icons {
	align-items: center;
	display:block;
	color:#ff239b;
	font-size:43px;
	text-align:center;
}

.contact-directory li p.details {
	font-size:19px;
	color:#2b2b2b;
	text-align:center;
	display:block;
	width:270px;
	margin:0 auto;
	padding:0;
}

.contact-form {
	width:980px;
	margin:0 auto;
	padding:20px;
}

.subscribe-form {
	width:1040px;
	margin:0;
	padding:0;
}

label {
	display:block;
	font-size:21px;
	color:#2b2b2b;
	text-align:left;
	margin:7px 0px 0px 0px;
}

input[type=text] {
	display:block;
	width:100%;
	border:1px solid #7b7b7b;
	margin:5px 0px 2px 0px;
	padding:15px 10px;
	font-family:helvetica, arial;
	font-size:21px;
	color:#7b7b7b;
	font-weight:normal;
	
}

textarea {
	display:block;
	width:100%;
	border:1px solid #7b7b7b;
	margin:5px 0px 2px 0px;
	padding:15px 10px;
	font-family:helvetica, arial;
	font-size:21px;
	color:#7b7b7b;
	font-weight:normal;
}

input[type=submit].btn-subscribe {
	display:block;
	width:320px;
	background-color:#ff239b;
	margin:20px 0px 0px 0px;
	padding:15px 10px;
	font-size:21px;
	color:#fff;
	letter-spacing:2px;
	border:1px solid #000;
}

input[type=submit].btn-subscribe:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	cursor:pointer;
}


input[type=submit] {
	display:block;
	width:320px;
	background-color:#000;
	margin:20px 0px 0px 0px;
	padding:15px 10px;
	font-size:21px;
	color:#fff;
	letter-spacing:2px;
	border:1px solid #000;
}

input[type=submit]:hover {
	background-color:#fff;
	color:#000;
	border:1px solid #000;
	cursor:pointer;
}

.code {
	display:block;
	font-size:21px;
	color:#2b2b2b;
	text-align:left;
	margin:20px 0px 0px 0px;
	text-transform:capitalize;
}

.captcha {
	display:flex;
	justify-content: center;
	margin:15px auto 0px auto;
}

.validation {
	display:block;
	font-size:21px;
	color:#ff239b;
	letter-spacing:2px;
	padding:5px 0px 5px 0px;
}

.validation-subscribe {
	display:block;
	font-size:21px;
	color:#fff;
	letter-spacing:2px;
	padding:5px 0px 5px 0px;
	margin-top:5px;
}

.success {
	display:block;
	font-size:21px;
	color:#fff;
	letter-spacing:2px;
	padding:5px 0px 5px 0px;
	margin-top:5px;
}

.push {
  display:flex;
  flex-direction:column;
  height: 100vh;
  min-height:100vh;
}

.checkout-content {
  flex-grow: 1;
}

.footer {
	width:100%;
	background-color:#000;
	padding:30px 0px;
}

p.title-text {
	font-size:21px;
	color:#000;
	text-align:left;
	text-decoration:underline;
	margin:10px 0px;
	font-weight:bold;
}

p.body-text {
	font-size:17px;
}

.error {
	color:#ff239b;
	font-size:19px;
	padding:0;
	font-weight:normal;
}

.error-msg-layout {
	color:#ff239b;
	text-align:center;
	font-weight:bold;
	font-size:27px;
	margin-top:-20px;
}