.bkg
{
   position: fixed;
   top: 0;
   left: 50%;
   width: 100%;
   max-width: 1920px;
   height: 100%;
   box-sizing: border-box;
   box-shadow: 0px 0px 8px #000000;
   overflow: hidden;
   -webkit-transform: translate(-50%,0);
   -ms-transform: translate(-50%,0);
   transform: translate(-50%,0);
}
.bkgimage
{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   object-position: center center;
   object-fit: cover;
}
.slidebkg
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
   z-index: 0;
}
.slideimg
{
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   object-fit: cover;
}
.center
{
   object-position: center center;
}
.bottom
{
   object-position: center bottom;
}
.top
{
   object-position: center top;
}
.right
{
   object-position: right center;
}
.left
{
   object-position: left center;
}
.fl-left
{
   float: left;
}
.fl-right
{
   float: right;
}
.wh-75
{
   background: rgba(255,255,255,.75);
}
.wh-85
{
   background: rgba(255,255,255,.85);
}
.bl-75
{
   background: rgba(0,0,0,0.75);
}
.purple-60
{
   background: rgba(30,0,0,0.60);
}
.blue
{
   background: rgba(70,130,180,1.0);
}
.green
{
   background: rgba(160,190,100,1.0);
}
.gray
{
   background-color: #4F4F4F;
}
.white
{
   background-color: #F8F8FF;
}
.border-gr
{
   border: 2px solid #A0BE64;
}
.border-bl
{
   border: 2px solid #4682B4;
}
.border-wh
{
   border: 2px solid #FFFFFF;
}
.bloglist
{
   position: relative;
   width: 100%;
   height: auto;
   min-height: 100px;
   padding: 0;
   margin: 0 0 40px 0;
   box-sizing: border-box;
   text-align: left;
}
.buttonwrap
{
   position: relative;
   width: 100%;
   text-align: center;
}
input .buttonsizer
{
   width: 66px;
}
#vidtitle
{
   position: absolute;
   top: 4%;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   text-align: center;
   padding: 2px 0 2px 0;
}
.thumbwrap
{
   position: relative;
   display: block;
   box-sizing: border-box;
}
.thumb-item:nth-child(odd) .round-thumb
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4px;
   border-radius: 50%;
   border: solid 3px #57728E;
}
.thumb-item:nth-child(even) .round-thumb
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4px;
   border-radius: 50%;
   border: solid 3px #A0BE64;
}
.thumb-caption
{
   position: relative;
   display: inline-block;
   width: 100%;
   box-sizing: border-box;
   padding: 10px 0 0 0;
}
.wrap
{
   position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
}
.roll
{
   position: absolute;
   width: 100%;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   background: rgba(0,0,0,0);
   z-index: 500;
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.roll + img
{
   position: relative;
   width: 100%;
   height: auto;
   overflow: hidden;
   z-index: 200;
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.roll iframe
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.roll:hover, .roll:active, .roll:focus
{
   background: rgba(0,0,0,0.6);
}
.roll:hover + img, .roll:active + img, .roll:focus + img
{
   -webkit-transform: rotate(0deg) scale(2.0,2.0) translate(-20px,-20px);
   -moz-transform: rotate(0deg) scale(2.0,2.0) translate(-20px,-20px);
   transform: rotate(0deg) scale(2.0,2.0) translate(-20px,-20px);
}
.roll:hover iframe, .roll:active iframe, .roll:focus iframe
{
   opacity: 1;
}
.roll:hover .feature, .roll:active .feature, .roll:focus .feature
{
   opacity: 1;
}
.roll:hover .name, .roll:active .name, .roll:focus .name
{
   opacity: 0;
}
.roll:hover .name-right, .roll:active .name-right, .roll:focus .name-right
{
   opacity: 0;
}
.feature
{
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   heigh: auto;
   background-color: transparent;
   padding: 0;
   margin: 0;
   text-align: center;
   opacity: 0;
   -webkit-transform: translate(0,-50%);
   -ms-transform: translate(0,-50%);
   transform: translate(0,-50%);
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.name
{
   position: absolute;
   width: auto;
   height: auto;
   top: 50%;
   left: 50%;
   opacity: 1;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.name-right
{
   position: absolute;
   width: auto;
   height: auto;
   top: 50%;
   right: 0;
   opacity: 1;
   -webkit-transform: translate(0,-50%);
   -ms-transform: translate(0,-50%);
   transform: translate(0,-50%);
   -webkit-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   -moz-transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.roll-title
{
   position: relative;
   display: block;
   margin: 0 0 1% 0;
}
.roll-info
{
   position: relative;
   display: block;
   padding: 0 3% 0 3%;
   margin: 0 0 5% 0;
   text-align: left;
}
.roll-link
{
   position: relative;
}
.item-image
{
   position: relative;
   width: 100%;
   height: auto;
   overflow: hidden;
   box-sizing: border-box;
}
.image-50left
{
   position: relative;
   width: 50%;
   height: auto;
   overflow: hidden;
   box-sizing: border-box;
   padding: 2% 1% 0 0;
}
.image-50right
{
   position: relative;
   width: 50%;
   height: auto;
   overflow: hidden;
   box-sizing: border-box;
   padding: 2% 0 0 1%;
}
@media only screen and (min-width: 1400px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 170px 0 80px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 12%;
   box-sizing: border-box;
   margin: 0 2% 4% 2%;
}
.nav-pad
{
   padding: 3% calc(3% + 160px) 3% 3%;
}
.roll-pad
{
   padding: 0 220px 60px 60px;
}
.left-pad
{
   margin: 0;
   padding: 3% 0 3% 3%;
}
.right-pad
{
   margin: 0 160px 0 0;
   padding: 3% 3% 3% 0;
}
.content-pad
{
   padding: 5% 2% 2% 2%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 31%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 1%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 40%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: calc(65% - 240px);
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 75%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 3% 0 0 43%;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 3% 43% 0 0;
}
.graphic-left
{
   position: relative;
   width: 40%;
   box-sizing: border-box;
   padding: 0 0 0 0;
}
.graphic-right
{
   position: relative;
   width: 40%;
   box-sizing: border-box;
   padding: 0 0 0 0;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
}
@media only screen and (min-width: 1250px) and (max-width: 1399px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 180px 0 40px;
}
.nav-pad
{
   padding: 3% calc(3% + 160px) 3% 3%;
}
.roll-pad
{
   padding: 0 200px 40px 40px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 12%;
   box-sizing: border-box;
   margin: 0 2% 4% 2%;
}
.left-pad
{
   margin: 0;
   padding: 3% 0 3% 3%;
}
.right-pad
{
   margin: 0 160px 0 0;
   padding: 3% 3% 3% 0;
}
.content-pad
{
   padding: 5% 2% 3% 2%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 31%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 1%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 40%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: calc(50% - 80px);
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 75%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2% 0 0 43%;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2% 43% 0 0;
}
.graphic-left
{
   position: relative;
   width: 40%;
   box-sizing: border-box;
   padding: 0 0 0 0;
}
.graphic-right
{
   position: relative;
   width: 40%;
   box-sizing: border-box;
   padding: 0 0 0 0;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
}
@media only screen and (min-width: 970px) and (max-width: 1249px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 180px 0 40px;
}
.nav-pad
{
   padding: 4% calc(4% + 160px) 4% 4%;
}
.roll-pad
{
   padding: 0 200px 40px 40px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 18%;
   box-sizing: border-box;
   margin: 0 4% 4% 4%;
}
.left-pad
{
   margin: 0;
   padding: 3% 0 3% 3%;
}
.right-pad
{
   margin: 0 160px 0 0;
   padding: 3% 3% 3% 0;
}
.content-pad
{
   padding: 5% 2% 3% 2%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 48%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 1%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 50%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: calc(50% - 80px);
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 75%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4% 0 0 0;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4% 0 0 0;
}
.graphic-left
{
   position: relative;
   width: 55%;
   box-sizing: border-box;
   padding: 0 2% 0 0;
}
.graphic-right
{
   position: relative;
   width: 55%;
   box-sizing: border-box;
   padding: 0 0 0 2%;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 969px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 20px 0 60px;
}
.nav-pad
{
   padding: 60px;
}
.roll-pad
{
   padding: 0 60px 40px 60px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 22%;
   box-sizing: border-box;
   margin: 0 2% 4% 2%;
}
.left-pad
{
   margin: 0;
   padding: 3% 0 3% 3%;
}
.right-pad
{
   margin: 0 0 0 0;
   padding: 3% 3% 3% 0;
}
.content-pad
{
   padding: 3% 2% 3% 2%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 48%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 1%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 50%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: 50%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 75%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4% 0 0 0;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 4% 0 0 0;
}
.graphic-left
{
   position: relative;
   width: 55%;
   box-sizing: border-box;
   padding: 0 2% 0 0;
}
.graphic-right
{
   position: relative;
   width: 55%;
   box-sizing: border-box;
   padding: 0 0 0 2%;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
}
@media only screen and (min-width: 580px) and (max-width: 767px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 40px 0 20px;
}
.nav-pad
{
   padding: 60px 40px;
}
.roll-pad
{
   padding: 0 40px 40px 40px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 28%;
   box-sizing: border-box;
   margin: 0 2% 4% 2%;
}
.left-pad
{
   margin: 0;
   padding: 5%;
}
.right-pad
{
   margin: 0 0 0 0;
   padding: 5%;
}
.content-pad
{
   padding: 0 5% 10% 5%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 70%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 5% 15% 5% 15%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 100%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 5% 0 0 0;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 5% 0 0 0;
}
.graphic-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 0 0 40px 0;
}
.graphic-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 0 0 40px 0;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
}
@media only screen and (max-width: 579px)
{
.slide-content
{
   position: absolute;
   bottom: 42px;
   right: 0;
   width: 100%;
   box-sizing: border-box;
   border-style: dotted;
   border-color: #FFFFFF;
   border-width: 0 0 0 0;
   padding: 0 10px 0 10px;
}
.nav-pad
{
   padding: 40px 20px;
}
.roll-pad
{
   padding: 0 20px 40px 20px;
}
.thumb-item
{
   position: relative;
   display: inline-block;
   width: 40%;
   box-sizing: border-box;
   margin: 0 4% 4% 4%;
}
.left-pad
{
   margin: 0;
   padding: 5%;
}
.right-pad
{
   margin: 0 0 0 0;
   padding: 5%;
}
.content-pad
{
   padding: 2% 3% 12% 3%;
}
.play-wrap
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 2%;
}
.over
{
   display: inline-block;
   position: relative;
   float: left;
   width: 96%;
   box-sizing: border-box;
   border: solid 2px #4682B4;
   margin: 2%;
   padding: 1%;
   text-align: center;
   overflow: hidden;
}
.vertical-50
{
   position: absolute;
   width: calc(50% - 80px);
   height: auto;
   top: 0;
   right: 160px;
   box-sizing: border-box;
   margin: 0 0 0 0;
   padding: 0;
}
.content-25
{
   display: inline-block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   overlow: hidden;
}
.content-50
{
   display: inline-block;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
}
.content-75
{
   display: inline-block;
   position: relative;
   width: 100%;
   height: auto;
   box-sizing: border-box;
   text-align: center;
   padding: 0 5% 0 0;
}
.content-100
{
   position: relative;
   display: block;
   width: 100%;
   box-sizing: border-box;
   margin: 0 0 0 0;
}
.flex-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 5% 0 0 0;
}
.flex-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 5% 0 0 0;
}
.graphic-left
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 0 0 40px 0;
}
.graphic-right
{
   position: relative;
   width: 100%;
   box-sizing: border-box;
   padding: 0 0 40px 0;
}
.col-wrap
{
   position: relative;
   width: 100%;
   background: rgba(240,240,240,0.80);
   box-sizing: border-box;
   padding: 40px 20px 40px 20px;
   margin: 0 0 0 0;
}
#vidtitle
{
   position: absolute;
   top: 1%;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   text-align: center;
   padding: 2px 0 2px 0;
}
input .buttonsizer
{
   width: calc(50% - 40px);
}
}