@font-face {
    font-family: 'vbolditalic';
    src: url('fonts/visuelt-bold-italic-pro.eot');
    src: url('fonts/visuelt-bold-italic-pro.eot?#iefix') format('embedded-opentype'),
        url('fonts/visuelt-bold-italic-pro.woff') format('woff'),
        url('fonts/visuelt-bold-italic-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vbold';
    src: url('fonts/visuelt-bold-pro.eot');
    src: url('fonts/visuelt-bold-pro.eot?#iefix') format('embedded-opentype'),
        url('fonts/visuelt-bold-pro.woff') format('woff'),
        url('fonts/visuelt-bold-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vblackitalic';
    src: url('fonts/visuelt-black-italic-pro.eot');
    src: url('fonts/visuelt-black-italic-pro.eot?#iefix') format('embedded-opentype'),
        url('fonts/visuelt-black-italic-pro.woff') format('woff'),
        url('fonts/visuelt-black-italic-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'vblack';
    src: url('fonts/visuelt-black-pro.eot');
    src: url('fonts/visuelt-black-pro.eot?#iefix') format('embedded-opentype'),
        url('fonts/visuelt-black-pro.woff') format('woff'),
        url('fonts/visuelt-black-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
a:link, a:visited {color: #000;}
html {scroll-behavior: smooth;}
.clear {clear: both;}
img {max-width:100%; height: auto;display:block;}
h2, h3, h4, h5 {; font-size: 78px; line-height: 82px;color: #000; margin: 15px 0; font-family: 'vbold';}
h3 {font-size: 36px; line-height: 42px;}
h4 {font-size: 24px; line-height: 28px;}
h5 {font-size: 18px; line-height: 22px; font-weight: 400;letter-spacing: 8px;margin: 0; padding: 0;text-transform: uppercase;}
.page-template-template-yearinreview header#header {height: 160px;}
#pagegap.pagegapyir {height: 150px;}
.yirnav {display:block; width: 100%; background: #A497FF; padding: 5px 5%;text-align:center;margin: 0;z-index: 5;position:relative;}
.yirnav a {text-transform: uppercase; padding: 10px 50px;margin: 5px 10px; letter-spacing: 9px;text-decoration:none; color: #000;font-family: 'vbold'; font-size: 19px; line-height: 22px;display:inline-block;}
.yirnav a:hover, .yirnav a:active {color: #fff;}
#yirwrap {background: #fff;position:relative;}
section {background: #fff;z-index: 5;}
.sectionleft {display:block; width: 100%;float:left;padding-top: 30px;padding-bottom: 0;background: #fff; margin: 0 0 60px 0;}
.sectiontitle {display:block; padding: 40px 0 40px 5%;}
.sectiontitle h5 {color: #FF837F;}
.introsection  h5 {color: #524FA1;}
.lefttitle {width: 120px; float: left;margin-left: 5%;display:block;}
.lefttitle h2 {text-orientation: upright; color: #524fa1;
writing-mode: vertical-rl;text-transform: uppercase; line-height: 78px;margin: 0;  word-wrap: break-word;letter-spacing: -15px;
}
.sectiontext {float:right; width: -moz-calc(95% - 120px); width: -webkit-calc(95% - 120px); width: calc(95% - 120px);display:block;padding-right: 15%;}
.sectiontext p { font-size: 19px; line-height: 24px;margin: 10px 0 15px 0;letter-spacing: 1px;}
.sectiontext p strong {font-weight: 400;}
.sectiontext blockquote p { font-size: 42px; line-height: 52px;}
.sectiontext h3 {font-size: 32px; line-height: 40px;}
.subtitle {float:left;padding-right: 5%;}
.subtitle h2 {color: #524fa1;font-size: 62px; line-height: 72px;margin: 0 0 10px 0;padding: 0;font-family: 'bold';}


.introsection {display:block; width: 100%; clear: both;background: #F9B398;padding: 0 0 50px 0;position: fixed;z-index: -1;top: 150px; left:0;}
.introtext {width: -moz-calc(95% - 120px); width: -webkit-calc(95% - 120px); width: calc(95% - 120px);padding-right: 0;}
.introtextimg {width: -moz-calc(55% - 120px); width: -webkit-calc(55% - 120px); width: calc(55% - 120px); float: left;}
.introtext p, .introtext p strong {font-size: 19px; line-height: 25px;}

.introimg {width: 40%; float: right;margin: 0; padding: 0 5% 0 40px;}
.introchild {position: relative; height: 100%;}
.marker {width:15px;height:15px; background: #000;display:block;-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;}
#map {width: 100%; height: 500px; margin: 50px 0 5px 0;}
.popl h2 {font-size: 16px; line-height: 19px;margin: 0 0 5px 0; padding: 0;font-family: 'vbold';}
.sectiontext .popl p {font-family: 'regular';font-size: 14px; line-height: 17px; margin: 0;}

.colorsb {z-index: 10;float: right; width: 28%;padding: 0 5% 60px 35px;border-bottom: 15px solid #000;margin: 0;}
.page-template-template-yearinreview > .colorsb {padding-top: 120px;}
.page-template-template-yearinreview > .colorsb ~ .colorsb {padding-top: 60px;}
.colorsbnol {border-bottom: 0;}
.colorsb p, .colorsection p, .slideovertxt p, a.more {font-size: 20px; line-height: 28px;}
a.more {color: #000; font-family: bold;font-size: 16px; line-height: 24px;padding-bottom: 3px; border-bottom: 3px solid #000;text-decoration:none;}
a.more:hover {color: #000; border-bottom: 3px solid #000; text-decoration:none;}
.colorsb figure {width:100%;margin:0; padding: 0;}
.colorsb img {width: 90%; max-width: 350px; height: auto;}
strong {font-weight: 400; font-family: 'bold';}
.colorsection {z-index: 10;float: right; width: 80%; max-width: 1200px; padding: 10px 40px 30px 40px; border-left: 15px solid #4F2196;margin: 0 0 160px 0;}
.colorsectext .firstp p:first-child:first-letter {
  color: #000;
  float: left;
  font-family: 'bold';
  font-size: 62px;
  line-height: 45px;
  padding-top: 9px;
  padding-right: 8px;
  padding-left: 3px;
}
.colorsectionleft {float: left; border-left: 0; border-right: 15px solid #4F2196;padding: 10px 40px 30px 80px;}
.colorsection figure.sectimg {width: 25%;float:left;margin: 0; padding: 20px 0 0 0;}
.colorsection figure.sectimg img {width:100%; height:auto;}
figcaption {margin: 20px 0 0 0; padding: 0;}
.colorsection figcaption p {margin: 0; padding: 0;}
.colorsection .colorsectext {width:100%; display:block;}
.colorsection .colorsectextimg {width: 71%; display:block; float:right;}
.slider {width:100%; margin: 0 0 60px 0;}
.slidebox {position: relative;background: #A497FF;}
.slidebox img {width:100%;height:auto;positon: relative; z-index: 1;}
.slideover {position: absolute; width:100%; height:100%; top: 0; left: 0; bottom: 0; right: 0;background: rgba(216,214,236,0.8);display:table;visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s linear;}
.slideovertxt {vertical-align: middle; display: table-cell;z-index: 2;padding: 0 70px;}
.slidebox:hover .slideover {display: table;visibility: visible;
  opacity: 1;}
.slick-arrow {z-index: 5;text-indent: -9999999px;position: absolute; top: 50%; left: 20px; width: 25px; height: 40px; margin-top: -20px; background: url(images/left.svg) no-repeat center center; background-size: 25px 40px;border:0;}
.slick-next {background-image: url(images/right.svg); left: auto; right: 20px;}
.slick-prev {background-image: url(images/left.svg);right: auto; left: 20px;}

.slidermediasb {width: 70%; float:left;display:inline-block;}
.slidersb {float:right; width: 30%; display:inline-block;}
.slidersbpad {padding: 25px 50px 15px 20px;}
.slidersb h2 {font-size: 52px; line-height: 58px;}
.slidersb h4 {font-size: 17px; line-height: 21px;display:block; margin-bottom: 30px;margin-top: 0;letter-spacing: 2px;}
.slidersb p {font-size: 22px; line-height: 29px;}
.photocredit {color: #fff; font-size: 12px; line-height: 14px; position: absolute; bottom: 15px; left: 25px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.69);}
.overlaytext {bottom: 40px; left: 25px; position: absolute;display:block;}
.overlaytext p {margin: 0 0 15px 0; color: #fff; font-family: 'black';font-size: 19px; line-height: 22px;}
.fullimgwrap {position:relative; margin: 0 0 60px 0;display:block;z-index: -1;}
.fullimg {width: 80%; height:auto;margin: 0;z-index: 1;position:relative;}
.fullimg img {z-index: -1;position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.imagetext {position: absolute; top: 180px; left: 80px;color: #fff;z-index: 2;}
.imagetext h1, .imagetext h2, .imagetext h3, .imagetext h4, .imagetext h5, .imagetext p {color: #fff; text-shadow: 0 0 3px #000;}
.imagetext h5 {padding-bottom: 30px;}

.btn {display:block; text-align: center;padding-top: 40px;}
.btn a:link, .btn a:hover {text-decoration:none;color: #000; text-transform: uppercase; font-family: 'vblack';letter-spacing: 2px; font-size: 19px; line-height: 28px;padding: 15px 40px; background: #A497FF; border: 1px solid #4F2196;}
.btn a:hover, .btn a:active {background: #000; color: #fff;}
.aligncenter, .alignnone {max-width: 80%;}
.embed-container { 
        position: relative; 
        padding-bottom: 56.25%;
        overflow: hidden;
        max-width: 100%;
        height: auto;
    } 

    .embed-container iframe,
    .embed-container object,
    .embed-container embed { 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
@media only screen and (max-width: 500px) {
	.slideovertxt {padding: 0 60px;}
}
@keyframes fuzz /* Safari and Chrome */ {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    /*-webkit-transform: scaleY(1);*/
    opacity: 1;
  }
}

@keyframes fuzz2 /* Safari and Chrome */ {
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fuzz3 /* Safari and Chrome */ {
  0% {
    opacity: 0;
  }
  54% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes stretch /* Safari and Chrome */ {
  0% {
    -webkit-transform: scaleX(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scaleX(0);
    opacity: 1;
  }
  60% {
    -webkit-transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
  }
  30% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@media only screen and (max-height: 975px) {
	.introsection {position: relative; z-index: 1;top: 0;}
	.yirnav {margin-top: 0 !important;}
}
@media only screen and (max-width: 1300px) {
	.introsection .subtitle h2 {font-size: 52px; line-height: 57px;}
	.subtitle h2 br {display: none;}
	.introsection {position: relative; z-index: 1;top: 0;}
	.yirnav {margin-top: 0 !important;}
	.colorsection {width: 95%;padding-left: 5%;}
	.colorsection figure.sectimg {width: 180px;padding: 25px 35px 15px 0;}
	.colorsection figure.sectimg img {}
	figcaption {padding-top: 10px; margin-top: 0;}
	.colorsection figcaption p {font-size: 14px; line-height: 18px;}
	.colorsection .colorsectext, .colorsection .colorsectextimg {width: 100%; float:none;}
	.slidersb p {font-size: 17px; line-height: 24px;}
	.slidersb h4 {margin-bottom: 20px;}
}
@media only screen and (max-width: 1200px) {
.slidermediasb {width: 100%;height:auto;float:none;}
	.slidersb {display:block; width: 100%; float: none; padding: 30px 5%;text-align:center;height: auto !important;}
}
@media only screen and (max-width: 900px) {
	
	.lefttitle {width: 100%; float: none;margin-top: -50px;}
.lefttitle h2 {text-orientation: mixed; color: #524fa1;
writing-mode: horizontal-tb;text-transform: uppercase; margin: 0;  word-wrap: break-word;letter-spacing: 2px;padding-bottom: 20px;}
	h2 {font-size: 52px; line-height: 59px;}
	.sectiontext {padding-left: 5%;padding-right: 10%; width: 100%;}
	.introtext {width: 60%;padding-right: 0;}
	.subtitle {width: 100%;}
}
@media only screen and (max-width: 600px) {
	.introtext, .introimg, .sectiontext {width: 100%;padding-right: 5%;}
	.introtext {padding-bottom: 20px;}
	.introimg {padding-left: 5%;max-width: 75%;margin: 0 auto;float:none;}
		.introsection .subtitle h2 {font-size: 38px; line-height: 44px;}
	#map {height: 350px;}
	.sectiontext h3 {font-size: 26px; line-height: 34px;}
	.photocredit {bottom: 10px; left: 15px;}
.overlaytext {bottom: 20px; left: 15px; position: absolute;}
}
@media only screen and (max-width: 450px) {
.colorsection figure.sectimg {width: 100%;padding: 25px 0;}
}