/*
Theme Name: Thomas Digital
Theme URI: http://underscores.me/
Author: Thomas Digital
Author URI: https://thomasdigital.com/
Description: Theme frontpage styles.
*/

/*================================
	Frontpage Sections
==================================*/
.home-about { width: 100%; padding: 60px 0 70px 0;}
.home-about .column-content { width: 48.5%; padding: 0; float: left;}
.home-about .column-media { width: 48.5%; padding: 0; line-height: 0; float: right;}
.home-about h2.section-heading { margin-bottom: 15px;}
.home-about .column-links { margin-top: 60px;}
.home-about .column-links .link { height: 40px; background: #C11D24; font: normal 13px 'montserratbold'; text-transform: uppercase; margin: 10px 15px 0 0; padding: 0 20px; display: inline-block; line-height: 40px; border: 1px solid #C11D24; color: #FFF;}
.home-about .column-links .link:hover,
.home-about .column-links .link:focus { background: #FFF; color: #C11D24;}
.home-about .column-media .media-vimeo-container { width: 100%; position: relative;}
.home-about .column-media .media-youtube-container { width: 100%; position: relative;}
.home-about .column-media .video_thumbnail { width: 100%; line-height: 0;}
.home-about .column-media .video_thumbnail img { width: 100%; height: auto;}
.home-about .column-media .video_overlay { width: 100%; height: 100%; background: rgba(0,0,0,0.50); position: absolute; top: 0; left: 0;}

/* Video play animation */
@-webkit-keyframes pulse-1 { 0% { -webkit-transform: translate3d(-50%,-50%,0)scale(1); opacity: 1}
100% { -webkit-transform: translate3d(-50%,-50%,0)scale(1.7); opacity: 0}}
@keyframes pulse-1 { 0% { transform: translate3d(-50%,-50%,0)scale(1); opacity: 1}
100% { transform: translate3d(-50%,-50%,0)scale(1.7); opacity: 0}}
@-webkit-keyframes pulse-2 { 0% { -webkit-transform: translate3d(-50%,-50%,0)scale(1); opacity: 0.5}
100% { -webkit-transform: translate3d(-50%,-50%,0)scale(1.7); opacity: 0}}
@keyframes pulse-2 { 0% { transform: translate3d(-50%,-50%,0)scale(1); opacity: 0.5}
100% { transform: translate3d(-50%,-50%,0)scale(1.7); opacity: 0}}
@-webkit-keyframes pulse-3 { 0% { -webkit-transform: translate3d(0%,-50%,0)scale(1); opacity: 0.8;}
100% { -webkit-transform: translate3d(0%,-50%,0)scale(1.5); opacity: 0;}}
@keyframes pulse-3 { 0% { transform: translate3d(0%,-50%,0)scale(1); opacity: 0.8;}
100% { transform: translate3d(0%,-50%,0)scale(1.5); opacity: 0;}}

.home-about .column-media .video_overlay .play { width: 80px; height: 80px; position: absolute; top: 50%; left: 42%; display: block; vertical-align: middle; z-index: 4; -webkit-transition: all 0.2s cubic-bezier(0.19,1,0.22,1) 0s; transition: all 0.2s cubic-bezier(0.19,1,0.22,1) 0s; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.home-about .column-media .video_overlay:hover .play { animation: pulse-3 2s cubic-bezier(.25,.9,.2,1);}
.home-about .column-media .video_overlay:hover .play-overlay { animation: none;}
.home-about .column-media .video_overlay .play:before, 
.home-about .column-media .video_overlay .play:after { position: absolute; top: 50%;  left: 50%; display: block; visibility: hidden; opacity: 0; content: ''; border: 2px solid #C11D24; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(.35) translateY(-50%) translateX(-50%); -ms-transform: scale(.35) translateY(-50%) translateX(-50%); transform: scale(.35) translateY(-50%) translateX(-50%); -webkit-animation: pulse-1 1.6s cubic-bezier(.25,.9,.2,1) 0.2s infinite; animation: pulse-1 1.6s cubic-bezier(.25,.9,.2,1) 0.2s infinite;}
.home-about .column-media .video_overlay .play:before { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; display: block; z-index: -1; -webkit-border-radius: 100%; border-radius: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;}
.home-about .column-media .video_overlay .play:after { width: 40px; height: 40px; border-color: #C11D24; z-index:-1; -webkit-animation: pulse-2 1.6s cubic-bezier(.25,.9,.2,1) 0s infinite; animation: pulse-2 1.6s cubic-bezier(.25,.9,.2,1) 0s infinite;}
.home-about .column-media .video_overlay:hover .play:before,
.home-about .column-media .video_overlay:hover .play:after { visibility: visible;}
.home-about .column-media .video_overlay .play .circle { width: 100%; height: 100%; display: block;}
.home-about .column-media .video_overlay .play .circle:before { width: 100%; height: 100%; display:block; -webkit-border-radius:100%; border-radius: 100%; content: ''; backface-visibility: hidden; -webkit-transition: all 0.45s cubic-bezier(.15,0.2,.1,1) 0s; transition: all 0.45s cubic-bezier(.15,0.2,.1,1) 0s; -webkit-transform: scale(1.15);  transform: scale(1.15);}
.home-about .column-media .video_overlay .play-overlay .circle:before { background: rgba(255,255,255,1);}
.home-about .column-media .video_overlay:hover .play .circle:before { background: rgba(255,255,255,0.70);}
.home-about .column-media .video_overlay .play .circle svg { width: 24px; height: 36px; position: absolute; top: 50%; left: 50%; margin-left: 2px; display: block; z-index: 100; -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);}
.home-about .column-media .video_overlay .play .circle path { fill: #000;}


.home-solutions { width: 100%; padding: 0;}
.home-solutions .content-solutions { width: 100%; margin: 0; padding: 0; clear: both;}
.home-solutions .solution { width: 100%; margin: 0; padding: 0; display: block;}
.home-solutions .solution .column-left { width: 50%; position: relative; padding: 0; display: block; float: left;}
.home-solutions .solution .column-right { width: 50%; position: relative; padding: 0; display: block; float: right;}
.home-solutions .solution .column-background { width: 100%; height: 100%; position: relative; padding: 0; line-height: 0;}
.home-solutions .solution .column-background .overlay { width: 100%; height: 100%; background: url('../img/solutions_overlay.png') no-repeat center top; background-size: cover !important; position: absolute; top: 0; left: 0;}
.home-solutions .solution .column-background img { width: 100%; height: auto;}
.home-solutions .solution .column-content { width: 100%; min-height: 130px; background: url('../img/solutions_arrow.png') no-repeat 90% center rgba(0,0,0,0.30); position: absolute; bottom: 0; left: 0; padding: 25px 55px; color: #FFF;}
.home-solutions .solution .column-left:hover .column-content { background-color: #C11D24;}
.home-solutions .solution .column-right:hover .column-content { background-color: #C11D24;}
.home-solutions .solution .column-content a { width: 100%; height: 100%; display: block;}
.home-solutions .solution .column-content h3 { color: #FFF;}
.home-solutions .solution .column-content .description { font-size: 17px; padding: 5px 0 0 0; line-height: 25px;}


.home-products { width: 100%; padding: 60px 0 70px 0;}
.home-products h2.section-heading { margin-bottom: 20px;}
.home-products .product { width: 48.5%; margin: 0; padding: 0;}
.home-products .product:nth-of-type(odd) { float: left;}
.home-products .product:nth-of-type(even) { float: right;}
.home-products .product .product-name { margin: 25px 0 10px 0; padding: 0;}
.home-products .product .product-excerpt { font-size: 17px; margin: 0; padding: 0; line-height: 30px;}
.home-products .product .product-links { margin: 22px 0 0 0; padding: 0;}
.home-products .product .product-links .link-to-prod { height: 40px; font: normal 13px 'montserratbold'; text-transform: uppercase; margin: 0 15px 0 0; padding: 0 18px; display: inline-block; line-height: 40px; border: 2px solid #C11D24; -webkit-border-radius: 2px; border-radius: 2px; color: #C11D24;}
.home-products .product .product-links .link-to-prod:hover { background: #C11D24; color: #FFF;}
.home-products .product .product-links .link-to-prodpdf { height: 40px; background: #C11D24; font: normal 13px 'montserratbold'; text-transform: uppercase; margin: 0; padding: 0 18px; display: inline-block; line-height: 40px; border: 2px solid #C11D24; color: #FFF;}
.home-products .product .product-links .link-to-prodpdf:hover { background: #FFF; color: #C11D24;}
.home-products .product .media-vimeo-container { width: 100%; position: relative;}
.home-products .product .media-youtube-container { width: 100%; position: relative;}
.home-products .product .video_thumbnail { width: 100%; line-height: 0;}
.home-products .product .video_thumbnail img { width: 100%; max-height: 350px; height: auto;}
.home-products .product .video_overlay { width: 100%; height: 100%; background: rgba(0,0,0,0.50); position: absolute; top: 0; left: 0;}
.home-products .product .video_overlay .play { width: 80px; height: 80px; position: absolute; top: 50%; left: 42%; display: block; vertical-align: middle; z-index: 999; -webkit-transition: all 0.2s cubic-bezier(0.19,1,0.22,1) 0s; transition: all 0.2s cubic-bezier(0.19,1,0.22,1) 0s; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.home-products .product .video_overlay:hover .play { animation: pulse-3 2s cubic-bezier(.25,.9,.2,1);}
.home-products .product .video_overlay:hover .play-overlay { animation: none;}
.home-products .product .video_overlay .play:before, 
.home-products .product .video_overlay .play:after { position: absolute; top: 50%;  left: 50%; display: block; visibility: hidden; opacity: 0; content: ''; border: 2px solid #C11D24; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(.35) translateY(-50%) translateX(-50%); -ms-transform: scale(.35) translateY(-50%) translateX(-50%); transform: scale(.35) translateY(-50%) translateX(-50%); -webkit-animation: pulse-1 1.7s cubic-bezier(.25,.9,.2,1) 0.2s infinite; animation: pulse-1 1.7s cubic-bezier(.25,.9,.2,1) 0.2s infinite;}
.home-products .product .video_overlay .play:before { width: 80px; height: 80px; position: absolute; top: 50%; left: 50%; display: block; z-index: -1; -webkit-border-radius: 100%; border-radius: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;}
.home-products .product .video_overlay .play:after { width: 40px; height: 40px; border-color: #C11D24; z-index:-1; -webkit-animation: pulse-2 1.7s cubic-bezier(.25,.9,.2,1) 0s infinite; animation: pulse-2 1.7s cubic-bezier(.25,.9,.2,1) 0s infinite;}
.home-products .product .video_overlay:hover .play:before,
.home-products .product .video_overlay:hover .play:after { visibility: visible;}
.home-products .product .video_overlay .play .circle { width: 100%; height: 100%; display: block;}
.home-products .product .video_overlay .play .circle:before { width: 100%; height: 100%; display:block; -webkit-border-radius:100%; border-radius: 100%; content: ''; backface-visibility: hidden; -webkit-transition: all 0.45s cubic-bezier(.15,0.2,.1,1) 0s; transition: all 0.45s cubic-bezier(.15,0.2,.1,1) 0s; -webkit-transform: scale(1.15);  transform: scale(1.15);}
.home-products .product .video_overlay .play-overlay .circle:before { background: rgba(255,255,255,1);}
.home-products .product .video_overlay:hover .play .circle:before { background: rgba(255,255,255,0.70);}
.home-products .product .video_overlay .play .circle svg { width: 24px; height: 36px; position: absolute; top: 50%; left: 50%; margin-left: 2px; display: block; z-index: 100; -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);}
.home-products .product .video_overlay .play .circle path { fill: #000;}


.home-tsc { width: 100%; background-size: cover !important; padding: 60px 0 60px 0;}
.home-tsc .column-viewport { width: 66%; position: relative; padding: 0; float: left; color: #FFF;}
.home-tsc .column-specification { width: 31%; padding: 0; float: right; color: #FFF;}
.home-tsc .column-viewport .viewport-note { font-size: 15px; font-family: 'latoitalic'; text-align: center;}
.home-tsc .column-viewport .viewport-fi { width: 100%; height: 100%; margin: 0; padding: 0; line-height: 0;}
.home-tsc .column-viewport .hotspot { width: 35px; height: 35px; background: url('../img/hs_red.png') no-repeat center; position: absolute; display: block; cursor: pointer;}
.home-tsc .column-viewport .hotspot:hover,
.home-tsc .column-viewport .hotspot.active { background: url('../img/hs_blue.png') no-repeat center;}
.home-tsc .column-viewport .hotspot-1 { top: 26%; left: 17%;}
.home-tsc .column-viewport .hotspot-2 { top: 33%; left: 21%;}
.home-tsc .column-viewport .hotspot-3 { top: 51.4%; left: 18%;}
.home-tsc .column-viewport .hotspot-4 { top: 57%; left: 23%;}
.home-tsc .column-viewport .hotspot-5 { top: 35.5%; left: 50%;}
.home-tsc .column-viewport .hotspot-6 { bottom: 5%; right: 37%;}
.home-tsc .column-viewport .hotspot-7 { bottom: 22.7%; right: 22%;}
.home-tsc .column-viewport .hotspot-8 { bottom: 14%; right: 12%;}
.home-tsc .column-viewport .hotspot-9 { bottom: 40.5%; right: 18%;}
.home-tsc .column-viewport .hotspot-10 { top: 48%; right: 4.8%;}
.home-tsc .column-viewport .hotspot-11 { top: 41%; right: 15.5%;}
.home-tsc .column-viewport .hotspot-12 { top: 22%; right: 14.2%;}
.home-tsc .column-specification h2 { font-size: 28px; font-family: 'latobold'; margin-bottom: 20px; color: #FFF;}
.home-tsc .column-specification .hotspot { width: 100%; margin: 0; padding: 0; display: none;}
.home-tsc .column-specification .hotspot-1 { display: block;}
.home-tsc .column-specification .hotspot h3 { padding: 7px 0 25px 0; line-height: 150%; vertical-align: middle; color: #FFF;}
.home-tsc .column-specification .hotspot h3 span { width: 35px; height: 35px; background: url('../img/hs_blue.png') no-repeat center; margin-right: 10px; display: block; float: left;}
.home-tsc .column-specification .hotspot .content { font-size: 15px; line-height: 150%;}
.home-tsc .column-specification .hotspot .link { height: 40px; background: #C11D24; font: normal 13px 'montserratbold'; text-transform: uppercase; margin-top: 30px; padding: 0 22px; display: inline-block; line-height: 42px;}
.home-tsc .column-specification .hotspot .link:hover { background: #FFF; color: #C11D24;}


.home-client-reviews { width: 100%; background-size: cover !important; position: relative; padding: 60px 0 60px 0;}
.home-client-reviews:before { width: 100%; height: 100%; background: rgba(255,255,255,0.90); position: absolute; top: 0; left: 0; content: '';}
.home-client-reviews .company-client-reviews { width: 100%; text-align: center;}
.home-client-reviews .review { width: 100%; margin: 0; padding: 0;}
.home-client-reviews .review .review-rating { height: 46px; background: url('../img/review_rating_border.png') no-repeat center center; margin: 0; padding: 0;}
.home-client-reviews .review .review-rating .fives-rating { width: 100%; height: 100%; background: url('../img/5stars_rating.png') no-repeat center;}
.home-client-reviews .review .review-rating .fours-rating { width: 100%; height: 100%; background: url('../img/4stars_rating.png') no-repeat center;}
.home-client-reviews .review .review-rating .threes-rating { width: 100%; height: 100%; background: url('../img/3stars_rating.png') no-repeat center;}
.home-client-reviews .review .review-rating .twos-rating { width: 100%; height: 100%; background: url('../img/2stars_rating.png') no-repeat center;}
.home-client-reviews .review .review-rating .ones-rating { width: 100%; height: 100%; background: url('../img/1star_rating.png') no-repeat center;}
.home-client-reviews .review .review-message { width: 100%; position: relative; font: normal 20px 'latoitalic'; padding: 35px 70px 30px 70px; line-height: 150%; color: #C11D24;}
.home-client-reviews .review .review-message ul { margin: 0; padding: 0;}
.home-client-reviews .review .review-message ul li { padding: 2px 0;}
.home-client-reviews .review .review-message .open-qoute { width: 30px; height: 24px; background: url('../img/open_qoute.png') no-repeat center; position: absolute; top: 15px; left: 0; display: block;}
.home-client-reviews .review .review-message .close-qoute { width: 30px; height: 24px; background: url('../img/close_qoute.png') no-repeat center; position: absolute; top: 15px; right: 0; display: block;}
.home-client-reviews .review .review-heading { margin: 0; padding: 0;}
.home-client-reviews .review .review-heading h4 { font: normal 15px 'latobold'; padding: 0 0 7px 0; color: #333;}
.home-client-reviews .review .review-heading h5 { font: normal 15px 'latobold'; text-transform: uppercase; color: #333;}
.home-client-reviews .company-client-reviews .slick-arrow { width: 20px; height: 24px; position: absolute; top: 50%; text-align: center; line-height: 24px; opacity: 1; z-index: 2;}
.home-client-reviews .company-client-reviews .slick-arrow.slick-prev { left: -5%;}
.home-client-reviews .company-client-reviews .slick-arrow.slick-next { right: -5%;}
.home-client-reviews .company-client-reviews .slick-arrow.slick-disabled,
.home-client-reviews .company-client-reviews .slick-arrow.slick-disabled:hover { opacity: 0.4;}
.home-client-reviews .company-client-reviews .slick-arrow:hover { opacity: 0.7;}
.home-client-reviews .company-client-reviews .slick-arrow:before { font-size: 37px; opacity: 1; color: #C11D24;}
.home-client-reviews .client-reviews-link { width: 100%; font: normal 15px 'latobold'; text-align: center; margin-top: 35px;}
.home-client-reviews .client-reviews-link a { padding: 5px 0; display: block; color: #C11D24;}
.home-client-reviews .client-reviews-link a:hover { text-decoration: underline; color: #333;}

/*================================
	End Frontpage Sections
==================================*/