

	.btn {

		border-width: 0;
		color: #fff;
		text-decoration: none;
		line-height: 1.5;
		border-radius: 0px;
		text-transform: uppercase;
		font-weight: 700;
		display: block;
		cursor: pointer;
		outline: none;
		transition: all .2s ease-in-out;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
	}

	.btn:hover {
		text-decoration: none;
	}

	a + .btn {
		margin-left: 10px;
	}

	.btn-tw, .btn-fb {
		margin-bottom: 5px;
		color: #fff;
		border: 0;
		border-radius: 3px;
		cursor: pointer;
		position: relative;
		text-transform: uppercase;
		padding: 12px 20px;
		font-size: 70%;
		font-weight: 600;
		min-width: 180px;
	}

	.btn-tw:active, .btn-fb:active {
		top: 1px;
	}

	.btn-tw {
		background: #00b4f5;
	}

	.btn-fb {
		background: #305cbb;
	}

	#message {
		top: -200px;
		opacity: 0.5;
		transition: all 0.2s;
	}

	.fancybox-slide--complete #message {
		top: 0;
		opacity: 1;
	}

	.fancybox-container--closing #message {
		top: 0;
		transform: scale(1.5);
		opacity: 0.5;
	}

	.card {
		padding: 3em 0;
		border-top: 1px solid #ddd;
	}

	.card:first-of-type {
		border-top-width: 0;
	}

	.card__actions {
		padding-top: 1em;
	}

	.card--price {
		margin-top: 3em;
		padding: 3em 1em;
		text-align: center;
		background: #fafafa;
		background: #f4f3f0;
		color: #6C6A6A;
	}

	.card--price h3 {
		padding-bottom: 1em;
		font-size: 1.5em;
		line-height: 1.2;
	}

	.card--price .card__text p {
		line-height: 2;
	}

	.price-note {
		padding-top: 1em;
		color: #888;
		font-size: 80%;
		text-align: center;
	}

	.price-faq {
		margin-top: 6em;
		font-size: 90%;
	}

	.price-faq p {
		margin-bottom: 2em;
	}


	@media all and (max-width: 860px) {

		h1 {
			letter-spacing: -1pt;
		}

		.cola,
		.colb {
			float: none;
			width: 100%;
		}

		#spacer {
			padding-top: 0;
		}

		#phone {
			display: none;
		}

		#slogan {
			padding-top: 0px;
			float: none;
			width: 100%;
			text-align: center;
		}

		.nav li {
			margin: 0 0.5em;
		}

		footer {
			text-align: center;
		}

		section,
		footer {
			padding: 100px 50px;
		}

	}

	@media all and (max-width: 600px) {

		header {
			padding: 0 10px;
		}

		section,
	    footer {
			padding: 50px 25px;
		}

		.imglist a {
			width: 50%;
		}

		.colc {
			width: 100%;
			margin-top: 1em;
		}

		.colc + .colc {
			margin-left: 0;
			border-left: 0;
		}

		.card {
			padding: 2em 0 2em 0;
		}

		#advanced .colc + .colc .card {
			border-top-width: 1px;
		}


		#photos {
		  -moz-column-count:    2;
		  -webkit-column-count: 2;
		  column-count:         2;
	  }

	}



	/*

		Advanced example - Customized layout

	*/

	.ad {
		display: none;
	}

	@media all and (min-width: 800px) {

		.fancybox-custom-layout {
			border: 20px solid #c7bfbf;
		}

		.fancybox-custom-layout .fancybox-bg,
		.fancybox-custom-layout.fancybox-container--ready .fancybox-bg {
			background: #efefef;
			opacity: 1;
		}

		.fancybox-custom-layout .fancybox-controls {
			opacity: 1;
			position: absolute;
			top: 0;
			left: auto;
			right: 0;
			bottom: 0;
			width: 44px;
			background: #5E4950;
		}

		.fancybox-custom-layout .fancybox-button {
			background: transparent;
		}

		.fancybox-custom-layout .fancybox-buttons button:hover {
			background: rgba(20, 20, 20, 0.4);
		}

		.fancybox-custom-layout .fancybox-caption-wrap {
			top: 0;
			right: 44px;
			bottom: 0;
			left: auto;
			width: 250px;
			padding: 0;
			box-shadow: none;
			background: #000000;
			font-weight: bold;


			/* Disable transitions */
			opacity: 1;
			visibility: visible;
			-webkit-transition: none;
			   -moz-transition: none;
			        transition: none;
		}

		.fancybox-custom-layout .fancybox-caption {
			border: 0;
			padding: 50px 15px;
			color: #fff;
		}

		.fancybox-custom-layout .fancybox-slider-wrap {
			right: 294px;
		}

		.fancybox-custom-layout.fancybox-container--thumbs .fancybox-controls {
			right: 220px;
		}

		.fancybox-custom-layout.fancybox-container--thumbs .fancybox-slider-wrap {
			right: 514px;
		}

		.fancybox-custom-layout.fancybox-container--thumbs .fancybox-caption-wrap {
			right: 264px;
		}

		.fancybox-custom-layout .fancybox-thumbs {
			top: 0;
			bottom: 0;
			background: #c7bfbf;
		}

		.fancybox-custom-layout .fancybox-thumbs > ul > li {
			border-color: #c7bfbf;
		}

		/* Border around active element */
		.fancybox-custom-layout .fancybox-thumbs > ul > li::before {
			border-color: #FF6666
		}

		.ad {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 15px;
			color: #fff;
		}

		.ad p {
			margin-top: 0px;
			margin-bottom: 5px;
			font-size: 12px;
		}

		.ad p a {
			color: #fff;
		}

	}


	/*

		Advanced example - Morphing modal window

	*/

	.morphing-btn-wrap {
		text-align: center;
		display: block;
		position: relative;

	}

	.open_morphing {
		-webkit-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
		   -moz-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
		     -o-transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
		        transition: background 0.2s, color 0.2s 0.3s, width 0.2s 0s;
		white-space: nowrap;		
	}

	.to-circle {
		color: transparent;
		padding-left: 0;
		padding-right: 0;
		width: 35.6px !important; /* Override inline style rule */
		-webkit-transition: color 0.2s 0s, width .2s 0.2s;
		   -moz-transition: color 0.2s 0s, width .2s 0.2s;
		     -o-transition: color 0.2s 0s, width .2s 0.2s;
		        transition: color 0.2s 0s, width .2s 0.2s;
	}

	.clone {
		position: fixed;
		background: #bb0000;
		width: 3em;
		height: 3em;
		border-radius: 0%;
		z-index: 3;
		font-size: 0.875em;
		-webkit-transition: all 0.5s ease-out;
		   -moz-transition: all 0.5s ease-out;
		     -o-transition: all 0.5s ease-out;
		        transition: all 0.5s ease-out;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
	}

	.is-visible {
		-webkit-transform : scale(1) !important;
		-moz-transform : scale(1)  !important;
		-ms-transform : scale(1) !important;
		-o-transform : scale(1)  !important;
		transform : scale(1) !important;
	}

	#morphing {
		margin: 0;
		position: relative;
		background: transparent;
		color: #fff;
		padding: 6em 10vw;
		line-height: 2;
		z-index: 3;
		-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
	}

	#morphing a {
		color: #fff;
	}

	.morphing-close {
		position: fixed;
		top: 5%;
		left: 5%;
		background: rgba(0,0,0,0.2);
		text-indent: -9999px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 0;
		overflow: hidden;
		transition: background-color 0.2s ease 0s, transform .2s ease-in-out;;
		z-index: 99993;
		cursor: pointer;
		outline: none;
	}

	.morphing-close:active {
		background: rgba(0,0,0,0.3);

		-webkit-transform: rotate(180deg);
		        transform: rotate(180deg);

	}

	.morphing-close:active {
		margin-top: -1px;
	}

	.morphing-close:before,
	.morphing-close:after {
		content: "";
		position: absolute;
		left: 12px;
		top: 24px;
		width: 26px;
		height: 1.5px;
		background: #fff;
	}

	.morphing-close:before {
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.morphing-close:after {
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/*

		Advanced example - Confirm dialog

	*/

	.my_dialog {
		max-width: 550px;
		padding: 50px !important;
		box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 13px 19px 2px rgba(0,0,0,.14), 0 5px 24px 4px rgba(0,0,0,.12);
		border-radius: 4px;
		opacity: 0;
		transition: all .3s;
		    transform: translate(30%) translateZ(600px) rotate(10deg);
	}

	.fancybox-slide--complete .my_dialog {
		opacity: 1;
		transform: translate(0%) translateZ(0) rotate(0deg);
	}

	/*

		Advanced example - Product quick view

	*/

	.quick-view-container {
		background: rgba(10,10,10,0.85);
	}

	.quick-view-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		max-width: 980px;
		max-height: 650px;
	}

	.quick-view-carousel {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 57%;
		background: #fff;
	}

	.quick-view-carousel .fancybox-slider-wrap {
		bottom: 30px;
	}

	.quick-view-aside {
	    position: absolute;
	    top: 30px;
	    right: 0;
	    bottom: 30px;
	    left: auto;
	    width: 43%;
	    padding: 50px 0 30px 0;
	    background: #fff;
	    color: #777;
	}

	.quick-view-aside::before, .quick-view-aside::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
	}

	.quick-view-aside::before {
	    width: 8px;
	    background: #f4f4f4;
	}

	.quick-view-aside::after {
	    width: 1px;
	    background: #e9e9e9;
	}

	.quick-view-aside > div {
		height: 100%;
		overflow: auto;
		padding: 5vh 30px 0 30px;
		text-align: center;
	}

	.quick-view-aside > div > p {
		font-size: 90%;
	}

	.quick-view-close {
	    position: absolute;
	    top: 30px;
	    right: 0;
	    width: 44px;
	    height: 44px;
	    background: #F0F0F0;
	    padding: 0;
	    margin: 0;
	    border: 0;
	    cursor: pointer;
	    font-family: Arial;
	    font-size: 14px;
	    color: #222;
	    text-indent: -99999px;
		transition: all .2s;
	}

	.quick-view-close:hover {
		background: #e4e4e4;
	}

	.quick-view-close::before,
	.quick-view-close::after {
		content: '';
		position: absolute;
		top: 12px;
		left: 22px;
		width: 1px;
		height: 18px;
		background-color: #222;
	}

	.quick-view-close:before {
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}

	.quick-view-close:after {
		-webkit-transform: rotate(45deg);
		   -moz-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		     -o-transform: rotate(45deg);
		        transform: rotate(45deg);
	}


	.quick-view-bullets {
		list-style: none;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
		z-index: 99999;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	.quick-view-bullets li {
		display: inline-block;
		vertical-align: top;
	}

	.quick-view-bullets li a {
		display: block;
		height: 30px;
		width: 20px;
		position: relative;
	}

	.quick-view-bullets li a span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 10px;
		height: 10px;
		border-radius: 99px;
		text-indent: -99999px;
		overflow: hidden;
		background: #d4d2d2;

	}

	.quick-view-bullets li.active a span {
		background: #FF6666;
	}

	/*
		// End of examples
	*/
