/*
	Theme Name:   Vinitysoft
	Description:  A custom designed theme for Vinitysoft
	Author:       Nick Mather
	Template:     twentyfourteen
	Version:      1.0.0
*/

/* CORE */

.site::before {
	width: auto;
}
.site {
	max-width: none;
}
.container {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
}
h2 {
	font-family: Lato, arial, sans-serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2em;
}
body, p {
	font-family: "Open Sans", arial, sans-serif;
	hyphens: none;
	-moz-hyphens: none;
	-webkit-hyphens: none;
}
.masthead-fixed .site-main {
	margin-top: 0;
}
a {
	color: #00384F;
}

/* HEADER */

header.header {
    background-color: #fff;
    float: left;
    width: 100%;
    position: relative;
}
header.header .container {
	position: relative;
}
.logo {
    left: 0;
    position: absolute;
    top: 0;
    width: 200px;
}
.facebook {
    background-color: #3765a3;
    float: right;
    height: 20px;
    margin-top: 32px;
    text-align: center;
    width: 20px;
}
.facebook a {
	color: #fff;
}

/* NAV */

.primary-navigation a {
    color: #777;
    font-family: "Open Sans", arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    padding: 0 16px;
}
.primary-navigation li {
	display: block;
	float: left;
	height: auto;
}
.primary-navigation .fa {
    display: block;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px;
    text-align: center;
}
.primary-navigation li:hover > a, .primary-navigation li.focus > a {
    background-color: #ffffff;
    color: #000;
}
.primary-navigation ul ul {
	background-color: #00364D;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	overflow: hidden;
}
.primary-navigation ul ul a {
	color: #fff;
}
.primary-navigation ul ul li:hover a, .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a {
	background-color: #014D6B;
	color: #fff;
}
.primary-navigation .nav-menu {
	padding: 18px 0;
	float: right;
}
.site-navigation .current_page_item > a, .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a {
	color: #014D6B;
}
.menu-toggle {
	top: 18px;
	right: 18px;
}

/* HOME */

.topArea {
    background-image: url("/wp-content/themes/vinity/assets/img/bg4.jpg");
    background-position: center center;
    background-size: cover;
    height: 450px;
}
.topWrapper {
	display: table;
}
.topAreaText {
    color: #fff;
    text-align: left;
    width: 50%;
    display: table-cell;
    vertical-align: top;
}
.topAreaImgRight {
    width: 46%;
    display: table-cell;
    position: relative;
}
.topAreaImgRight img {
	width: 110%;
	position: absolute;
	bottom: 70px;
	padding: 0 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
section.topArea h2 {
    color: #fff;
    margin-bottom: 30px;
    margin-top: 0;
    text-align: left;
    width: 455px;
}
.section p {
	font-weight: 100;
}
section.callToAction {
	text-align: center;
	color: #fff;
	background-color: #00364d;
	position: relative;
	padding: 30px 0 45px 0;
}
section.callToAction h2 {
	margin-top: 0;
	font-size: 36px;
	color: #fff;
}
.callToAction p {
	font-size: 18px;
	line-height: normal;
}
.inputArea {
	float: left;
}
.inputArea + .inputArea {
	margin-left: 5px;
}
.freeTrial, .inputArea {
	position: relative;
}
.freeTrial input {
	font-family: "Open Sans", arial, sans-serif;
	font-weight: 100;
}
.freeTrial .firstName {
	border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
}
.freeTrial .emailAddress {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.freeTrial .submit {
	background-color: #f58220;
	border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	padding: 9px 20px 8px 20px;
	font-size: 16px;
	margin-left: 5px;
}
.freeTrial {
    display: inline-block;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.section {
	padding: 60px 0;
	clear: both;
	float: left;
	width: 100%;
}
.section h2 {
	margin: 0;
	text-align: center;
	color: #00697D;
}
.section h3 {
	color: #00697D;
}
.advantages .titleLine + p {
    font-size: 20px;
    text-align: center;
    margin-bottom: 75px;
}
.advantages .oneFourth p {
	font-size: 14px;
}
.advantages h2 {
	width: 440px;
	margin: 0 auto;
}
.advantages h3 {
	margin-top: 0;
}
.icon {
	background-color: #f58220;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 115px;
	margin: 0 auto 30px;;
    padding-top: 24px;
    width: 115px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 44px;
    color: #fff;
    position: relative;
    transition: all 0.15s ease-in-out 0.15s;
    -moz-transition: all 0.15s ease-in-out 0.15s;
    -webkit-transition: all 0.15s ease-in-out 0.15s;
}
.icon::after {
	content: "";
    height: 115px;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 115px;
    border-radius: 50%;
    -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 5px solid #f7f7f7;
	transition: all 0.25s ease-in-out 0.15s;
    -moz-transition: all 0.25s ease-in-out 0.15s;
    -webkit-transition: all 0.25s ease-in-out 0.15s;
}
.oneFourth:hover .icon::after, .oneHalf:hover .icon::after {
    border: 5px solid #008DA8;
    width: 128px;
    height: 128px;
    top: -12px;
    left: -12px;
}
.oneFourth:hover .icon, .oneHalf:hover .icon {
	background-color: #008DA8;
}
.fleetManager, .assetManager {
	overflow: hidden;
	background-color: #f7f7f7;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.fleetManager, .fleetManagerAlt {
    background-color: #fff;
    border-top: 1px solid #ddd;
}
.fleetManager h2, .fleetManagerAlt h2 {
	text-align: left;
	margin-bottom: 30px;
	color: #777;
}
.assetManager h2 {
	margin-bottom: 30px;
}
.assetManager h2, .assetManager p {
	text-align: right;
}
.row {
	display: table;
}
.appTextLeft, .appTextRight {
    display: table-cell;
    padding-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0;
    width: 50%;
}
.appTextLeft .btn {
	float: right;
}
.appTextRight + .screenshotImg {
	float: right;
	margin-left: 4%;
}
.screenshotImgRight img {
	float: left;
}
.screenshotImg {
    display: table-cell;
    padding-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0;
    position: relative;
}
.screenshotImg img {
    bottom: -60px;
    position: absolute;
    width: 900px;
    left: 30px;
    border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
}
.screenshotImgLeft img {
    bottom: -60px;
    position: absolute;
    right: 30px;
    width: 900px;
    left: auto;
    border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
}
.logos {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: block;
}
.testimonials {
    background-attachment: fixed;
    background-image: url("/wp-content/themes/vinity/assets/img/testimonials.jpg");
    background-position: center center;
    background-size: cover;
    color: #fff;
    text-align: center;
}
.testimonials h2 {
	color: #fff;
	margin-top: 0;
}
.testimonials h2 + p {
    font-size: 24px;
}
.testimonials .titleLine {
	margin-bottom: 25px;
}
#quoteauthor::before, .quoteName::before {
	content: "-";
	margin-right: 5px;
}
#quoteauthor, .quoteName {
    font-family: "Poiret One", arial, sans-serif;
    font-size: 20px;
    font-style: normal !important;
    text-align: center !important;
    font-weight: 100 !important;
}
#quoteauthor span, .quoteName span {
	font-style: italic;
	font-weight: 700;
}
#quotetestimonial {
	font-size: 18px;
	font-weight: 100;
	margin-bottom: 15px;
	display: block;
}
.testimonial > div {
	width: 100% !important;
	height: auto !important;
	min-height: 125px;
}

/* PAGE */

.titleLine {
	background-image: url("/wp-content/themes/vinity/assets/img/titleLine.png");
	background-position: center center;
	background-repeat: no-repeat;
	height: 3px;
	margin: 15px 0;
}
.titleLineWhite {
	background-image: url("/wp-content/themes/vinity/assets/img/titleLineWhite.png");
	background-position: center center;
	background-repeat: no-repeat;
	height: 3px;
	margin: 15px 0;
}
.advantages {
	background-color: #F7F7F7;
	overflow: hidden;
}
.advantages .titleLine {
	margin-bottom: 60px;
}
.oneFourth {
    float: left;
    text-align: center;
    width: 22%;
}
.oneFourth + .oneFourth {
    margin-left: 4%;
}
.oneFourth p {
	margin-bottom: 0;
}
.callToAction .submit:hover {
    background-color: #AF5D1D;
}
.btn {
	background-color: #f58220;
	padding: 15px 30px;
	border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 14px;
}
.btn:hover {
	background-color: #AF5D1D;
}
.btnArrow {
    background-image: url("/wp-content/themes/vinity/assets/img/arrowBtn.png");
    background-position: 90% center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    font-family: Ubuntu;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 60px;
    padding-top: 15px;
}
.visible-mobile {
	display: none;
}
.btnAlt {
    background-color: #f7f7f7;
    color: #2a2a2a;
    margin-bottom: 14px;
    width: 324px;
}
.btnAlt .fa {
	margin-left: 5px;
}
.btnAlt:hover {
	background-color: #22484f;
}
a + a .btn {
	margin-left: 10px;
}
.titleArea {
    background-position: center center;
    background-size: cover;
    background-color: #00364D;
    color: #fff;
    /*height: 350px;*/
    height: 150px;
    margin-bottom: 30px;
    text-align: center;
}
.titleArea h1 {
    font-size: 42px;
    /*line-height: 350px;*/
    line-height: 150px;
    text-shadow: 2px 2px 0 #000;
    margin: 0;
}
.productVideo .titleArea {
	height: 450px;
	margin-bottom: 0;
}
.productVideo .titleArea h1 {
	line-height: normal;
	padding-top: 145px;
	margin-bottom: 30px;
}
.productVideo .btnAlt {
	width: auto;
	margin-bottom: 0;
}
.content {
	clear: both;
}

/* PRODUCT PAGE VIDEO */

.productVideo section, .tool section {
	float: left;
	width: 100%;
	padding: 60px 0;
}
.programIntroduction {
	padding-top: 60px;
	padding-bottom: 0 !important;
}
.programIntroduction h2 {
	margin-top: 0;
}
.productVideo section p:last-child {
	margin-bottom: 0;
}
.programIntroduction img {
    float: right;
    margin-right: 30px;
    max-height: 500px;
}
section.benefits {
	padding: 0;
}
.benefits .icon {
	background-color: #003A53;
}
.benefits .titleLine {
	margin: 90px 0;
}
.benefits h3 {
	color: rgba(0, 0, 0, 0.55);
}
.benefits p {
	color: rgba(0, 0, 0, 0.35);
}
.freeTrialBox {
    background: #004c6b; /* Old browsers */
	background: -moz-linear-gradient(45deg, #004c6b 1%, #00364d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(1%,#004c6b), color-stop(100%,#00364d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg, #004c6b 1%,#00364d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg, #004c6b 1%,#00364d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg, #004c6b 1%,#00364d 100%); /* IE10+ */
	background: linear-gradient(45deg, #004c6b 1%,#00364d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004c6b', endColorstr='#00364d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    clear: both;
    color: #fff;
    margin-top: 60px;
    padding: 30px 0;
    text-align: center;
}
.freeTrialBox h2 {
	margin-top: 0;
}
.freeTrialBox p {
	font-weight: 100;
	width: 80%;
	margin: 0 auto;
}
.oneHalf {
    float: left;
    width: 48%;
    padding: 0 1%;
}
.whoUseUs {
	background-color: #f7f7f7;
}
.customers {
	background-image: url("/wp-content/themes/vinity/assets/img/imgBlockLeft.jpg");
    background-position: center center;
    background-size: cover;
}
.customers h2:first-child {
	margin-top: 0;
}
.imageTextBlock {
	font-size: 14px;
	color: #fff;
	width: 50%;
}
.imageTextRight {
	float: right;
	text-align: right;
}
.imageTextBlock h2 {
    font-family: "Bree Serif",arial,sans-serif;
    font-size: 26px;
    font-weight: 700;
}
.imageTextLeft {
	float: left;
}
.types {
	text-align: center;
}
.types h3 {
	margin-top: 0;
}
.types ul {
	margin: 0;
}
.types li {
	display: inline-block;
	padding: 0 10px;
}
.productVideo .testimonials, .tool .testimonials {
	background-color: #F58220;
	background-image: none;
}
.freeTrialBox p {
	margin-bottom: 15px;
}
.productVideo .testimonial > div, .tool .testimonial > div {
	min-height: 0;
}
.productVideo .testimonial, .tool .testimonial > div {
    font-weight: 100 !important;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 80%;
}
.quoteName {
	font-weight: 700;
}
.download {
   /* background-image: url("/wp-content/themes/vinity/assets/img/fleetManagerBlur.jpg");
    color: #fff;
    padding-bottom: 350px !important;*/
}
.download h2 {
	margin-top: 0;
	font-weight: 700;
	font-size: 30px;
}
.downlaod p {
	font-weight: 100;
}
.download .right {
    float: right;
    margin-top: 0;
    padding-top: 65px;
    position: relative;
    text-align: center;
    width: 30%;
}
.download .left {
    float: right;
    text-align: right;
    width: 70%;
}
.download .left p:last-child {
	margin-bottom: 0;
}
.download img {
    position: absolute;
    right: 4%;
    top: -33px;
}
.download .right .btn {
	width: 145px;
	display: block;
	margin: 0 auto;
}
.downloadBtn {
	margin-top: 5px !important;
}
.guarantee h2 {
	margin-top: 0;
	display: inline-block;
}
.guarantee img {
    float: left;
    margin-right: 30px;
    width: 250px;
}

/* BUY */

.buy .titleArea, .tool .titleArea {
	height: 450px;
}
.buy h1, .tool h1 {
	line-height: normal;
	padding-top: 185px;
}
.paymentSatisfaction {
	margin-bottom: 30px;
	overflow: hidden;
	clear: both;
}
.paymentSatisfaction h2 {
    background-color: #00384f;
    color: #fff;
    font-size: 24px;
    line-height: normal;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
}
.paymentSatisfaction p {
    font-size: 15px;
    margin-bottom: 0;
}
.psContent {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px;
}
th {
	background-color: #00384F;
	color: #fff;
}
th + th {
	border-left: 1px solid #fff;
}
th, td {
	padding: 10px;
	vertical-align: middle;
}
.buyNow {
	margin: 0 auto;
	display: block;
}
.productSection tr:nth-of-type(even) {
	background-color: #fff;
}
.productSection tr:nth-of-type(odd) {
	background-color: #f7f7f7;
}
.sectionAlt {
    background-color: #eee;
}
.productSection {
    padding-bottom: 60px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 60px;	
}
.productSection h2 {
	margin-top: 0;
	margin-bottom: 30px;
}

/* ASSET MANAGER */

.tool .titleArea {
	margin-bottom: 0;
}
.tool .download .right {
	padding-top: 20px;
}
.keyBenefits h2, .keyBenefits h2 + p {
	text-align: center;
}
.keyBenefits h2 {
	margin-bottom: 0;
}
.keyBenefits h2 + p {
    font-size: 22px;
    font-weight: 100;
    position: relative;
    margin-bottom: 30px;
	padding-bottom: 15px;
}
.tamScreenshots {
	margin-bottom: 45px;
	float: left;
	width: 100%;
}
.keyBenefits ul {
	overflow: hidden;
	margin: 0;
	clear: both;
}
.keyBenefits li {
    float: left;
    width: 31%;
    padding: 0 1.16%;
    list-style: none;
    text-align: center;
}
.keyBenefits li:last-child p {
	margin-bottom: 0;
}
.keyBenefits li h3 {
	position: relative;
}
.keyBenefits li h3::before {
    background-color: #f58220;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: -30px;
    width: 32px;
    margin: 0 auto;
    right: 0;
}
.keyBenefits li p {
	color: #78858a;
}
.tool #freeTrialArea {
	margin-top: 0;
}
.barcode, .booking {
	width: 100%;
}
.tool .guarantee img {
	width: 300px;
}
.visibleMobile {
	display: none;
}
.hiddenMobile {
	display: block;
}
.right.visibleMobile {
	width: 100%;
}

/* DOWNLOAD */

.downloadLinks {
	text-align: center;
}

/* TESTIMONIALS */

.theTestimonial {
    background-color: #f7f7f7;
    color: #777;
    padding: 15px;
    text-align: center;
}
.theTestimonial .fa-quote-left {
	margin-right: 5px;
}
.theTestimonial .fa-quote-right {
	margin-left: 5px;
}
.theTestimonial + .theTestimonial {
	margin-top: 15px;
}
.theTestimonial .role {
	font-style: italic;
}

/* BLOG */

.thumbnail {
    float: left;
    width: 17%;
    margin-right: 3%;
}
.thumbnail img {
	width: 100%;
	border: 5px solid #eee;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.bPost {
    float: left;
    width: 100%;
}
.bPost + .bPost {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.bPost h3 {
	margin-top: 0;
	display: inline-block;
}
.bPost h3 a {
	color: #00697d;
}
.bPost:nth-of-type(even) {
	text-align: right;
}
.bPost:nth-of-type(even) .thumbnail {
	float: right;
	margin-right: 0;
	margin-left: 3%;
}
.bPostContent {
    float: left;
    width: 80%;
}
.blogContent {
    float: left;
    width: 100%;
}
.blogSidebar {
    background-color: #f7f7f7;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    margin-left: 5%;
    padding: 30px;
    width: 30%;
}
.blogSidebar h2 {
	font-size: 24px;
	font-weight: 700;
}
.blogSidebar h2:first-child {
	margin-top: 0;
}
.blogSidebar ul {
	margin-left: 0;
}
.blogSidebar li:first-child {
	background-position: left 8px;
}
.blogSidebar li {
	list-style: none;
	background-image: url("/wp-content/themes/vinity/assets/img/li.png");
	background-position: left 12px;
	padding-left: 15px;
	background-repeat: no-repeat;
}
.blogSidebar li + li {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid rgba(0, 0, 0, 0.075);
}
.blogSidebar li a {
	color: #888;
}
.categoryPosts h2 a {
	color: #00697d;
	font-size: 26px;
	font-weight: 700;
}
.categoryPosts article {
	margin-bottom: 0;
}
.categoryPosts article p:last-child {
	margin-bottom: 0;
}
.categoryPosts article + article {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.screenshots {
	padding-top: 0 !important;
	background-color: #f9f9f9;
}

/* FAQ */

.hrf-faq-list a {
	color: #F58220;
}
h3.hrf-title {
    background-color: #f58220 !important;
    color: #fff !important;
    margin-bottom: 15px !important;
    padding-top: 0 !important;
    padding-bottom: 14px !important;
}
h3.hrf-title {
	margin-bottom: 0 !important;
}
.hrf-title.close-faq span {
	background-color: rgba(0, 0, 0, 0.2) !important;
}
.hrf-faq-list p:last-child {
	margin-bottom: 0 !important;
}
.hrf-title.open-faq span {
	margin-right: 8px;
}
.hrf-content {
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
}
.hrf-faq-list .hrf-entry {
	margin-bottom: 15px !important;
}
#quotearea_4009_1 {
	width: 100% !important;
}
.buy .value {
	padding: 0 30px;
	margin-bottom: 35px;
}
.value {
	background-color: #fff;
	padding: 60px 30px;
	float: left;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.value p:last-child {
	margin-bottom: 0;
}
.value h2 {
	margin-top: 0;
}
.value + .titleLine {
	clear: both;
	margin: 0 0 45px 0;
}

/* CONTACT */

.inputBlock {
    float: left;
    width: 32%;
}
.inputBlock + .inputBlock {
	margin-left: 2%;
}
.inputBlock select {
    height: 42px;
    padding-left: 10px;
    width: 100%;
}
.textAreaBlock {
    float: left;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 15px;
    width: 100%;
}
.textAreaBlock textarea {
	height: 100px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.contact .left {
    float: left;
    width: 30%;
    padding: 30px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #eee;
}
.contact .right {
    float: left;
    margin-left: 2%;
    width: 68%;
}
.contact .left label {
    display: block;
    font-weight: bold;
}

/* FOOTER */

.site-info {
    font-size: 14px;
    text-align: center;
}

/* ANIMATIONS */

.fadeInLeft {
	animation: fadeInLeft 1.4s ease-in-out 0s both;
	-moz-animation: fadeInLeft 1.4s ease-in-out 0s both;
	-webkit-animation: fadeInLeft 1.4s ease-in-out 0s both;
}
.fadeInRight {
	animation: fadeInRight 1.4s ease-in-out 0s both;
	-moz-animation: fadeInRight 1.4s ease-in-out 0s both;
	-webkit-animation: fadeInRight 1.4s ease-in-out 0s both;
}
.zoomInLeft1 {
	animation: zoomInLeft 1.4s ease-in-out 0.3s both;
	-moz-animation: zoomInLeft 2s ease-in-out 0.3s both;
	-webkit-animation: zoomInLeft 2s ease-in-out 0.3s both;
}
.zoomInLeft2 {
	animation: zoomInLeft 1.4s ease-in-out 0s both;
	-moz-animation: zoomInLeft 1.4s ease-in-out 0s both;
	-webkit-animation: zoomInLeft 1.4s ease-in-out 0s both;
}
.zoomInRight1 {
	animation: zoomInRight 1.4s ease-in-out 0s both;
	-moz-animation: zoomInRight 1.4s ease-in-out 0s both;
	-webkit-animation: zoomInRight 1.4s ease-in-out 0s both;
}
.zoomInRight2 {
	animation: zoomInRight 1.4s ease-in-out 0.3s both;
	-moz-animation: zoomInRight 2s ease-in-out 0.3s both;
	-webkit-animation: zoomInRight 2s ease-in-out 0.3s both;
}

/* KEYFRAMES */

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-400px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-400px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(400px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(400px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(400px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(400px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}
@keyframes zoomInLeft {
	0% {
		opacity: 0;
		transform: translateX(-600px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@-moz-keyframes zoomInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-600px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}
}
@-webkit-keyframes zoomInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-600px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}
@keyframes zoomInRight {
	0% {
		opacity: 0;
		transform: translateX(600px);
	}
	100% {
		opacity: 1;
		transform: translateX(0px);
	}
}
@-moz-keyframes zoomInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(600px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateX(0px);
	}
}
@-webkit-keyframes zoomInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(600px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0px);
	}
}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/wp-content/themes/vinity/assets/img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/wp-content/themes/vinity/assets/img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/wp-content/themes/vinity/assets/img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(/wp-content/themes/vinity/assets/img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/wp-content/themes/vinity/assets/img/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/wp-content/themes/vinity/assets/img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

.pikachoose {width: 520px; margin: 0 auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; }
	.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden;
		float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
	.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: middle; overflow: hidden;}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px; text-align:center; height:250px;}
.pika-stage img{height:100%; width: 100%}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; 
			color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
	.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
	.pika-imgnav a.previous {background: url(/wp-content/themes/vinity/assets/img/prev.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
	.pika-imgnav a.next {background: url(/wp-content/themes/vinity/assets/img/next.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
	.pika-imgnav a.play {background: url(/wp-content/themes/vinity/assets/img/play.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
	.pika-imgnav a.pause {background: url(/wp-content/themes/vinity/assets/img/pause.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; 
	text-align:right; position:absolute; top:15px; right:15px; }

.pika-thumbs li {
	margin: 0 5px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 128px;
}
.jcarousel-container {
	overflow: hidden;
}
.pika-thumbs {
	height: 82px;
}
.pikachoose {
	margin-top: -300px;
	width: 662px;
}
.pikachoose h2 {
	text-align: center;
	color: #fff;
	margin-bottom: 30px;
}
.pika-stage {
	width: 640px;
	height: 400px !important;
	margin-bottom: 15px;
}
.pika-imgnav {
	opacity: 1 !important;
}
.error {
    bottom: -32px;
    font-size: 13px;
    left: -25%;
    position: absolute;
    width: 150%;
}