/* ================================================================== Template Specific Styles (Custom CSS here) ================================================================== */ /* Template Promo(Gradient Mixed) -------------------------------------------------------------- */ /* Set Font Family to teaser */ body { font-family: 'Dosis', sans-serif; background: rgba(72,85,99,1); background: -moz-linear-gradient(left, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(72,85,99,1)), color-stop(100%, rgba(41,50,60,1))); background: -webkit-linear-gradient(left, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 100%); background: -o-linear-gradient(left, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 100%); background: -ms-linear-gradient(left, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 100%); background: linear-gradient(to right, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#485563', endColorstr='#29323c', GradientType=1 ); } #templatepromo { background: none transparent; text-transform: uppercase; } #templatepromo h1 { -webkit-text-stroke: 0px; } /* Main Text */ #templatepromo .lt-main { font-weight: 700; font-size: 1.75em; } /* Sub Text */ #templatepromo .lt-sub { color: #fff; } /* Sub Text Background Box Color */ #templatepromo .lt-boxed { background: none transparent; } /* Gradients for each scene */ #templatepromo #scene-1, .loader-container { background: none transparent; } #templatepromo #scene-2 { background: rgba(19,106,138,1); background: -moz-linear-gradient(left, rgba(19,106,138,1) 0%, rgba(38,120,113,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,106,138,1)), color-stop(100%, rgba(38,120,113,1))); background: -webkit-linear-gradient(left, rgba(19,106,138,1) 0%, rgba(38,120,113,1) 100%); background: -o-linear-gradient(left, rgba(19,106,138,1) 0%, rgba(38,120,113,1) 100%); background: -ms-linear-gradient(left, rgba(19,106,138,1) 0%, rgba(38,120,113,1) 100%); background: linear-gradient(to right, rgba(19,106,138,1) 0%, rgba(38,120,113,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#136a8a', endColorstr='#267871', GradientType=1 ); } #templatepromo #scene-3 { background: rgba(19,78,94,1); background: -moz-linear-gradient(left, rgba(19,78,94,1) 0%, rgba(113,178,128,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(19,78,94,1)), color-stop(100%, rgba(113,178,128,1))); background: -webkit-linear-gradient(left, rgba(19,78,94,1) 0%, rgba(113,178,128,1) 100%); background: -o-linear-gradient(left, rgba(19,78,94,1) 0%, rgba(113,178,128,1) 100%); background: -ms-linear-gradient(left, rgba(19,78,94,1) 0%, rgba(113,178,128,1) 100%); background: linear-gradient(to right, rgba(19,78,94,1) 0%, rgba(113,178,128,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e5e', endColorstr='#71b280', GradientType=1 ); } #templatepromo #scene-4 { background: rgba(92,37,141,1); background: -moz-linear-gradient(left, rgba(92,37,141,1) 0%, rgba(67,137,162,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,37,141,1)), color-stop(100%, rgba(67,137,162,1))); background: -webkit-linear-gradient(left, rgba(92,37,141,1) 0%, rgba(67,137,162,1) 100%); background: -o-linear-gradient(left, rgba(92,37,141,1) 0%, rgba(67,137,162,1) 100%); background: -ms-linear-gradient(left, rgba(92,37,141,1) 0%, rgba(67,137,162,1) 100%); background: linear-gradient(to right, rgba(92,37,141,1) 0%, rgba(67,137,162,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c258d', endColorstr='#4389a2', GradientType=1 ); } #templatepromo #scene-5 { background: rgba(52,143,79,1); background: -moz-linear-gradient(left, rgba(52,143,79,1) 0%, rgba(86,180,211,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52,143,79,1)), color-stop(100%, rgba(86,180,211,1))); background: -webkit-linear-gradient(left, rgba(52,143,79,1) 0%, rgba(86,180,211,1) 100%); background: -o-linear-gradient(left, rgba(52,143,79,1) 0%, rgba(86,180,211,1) 100%); background: -ms-linear-gradient(left, rgba(52,143,79,1) 0%, rgba(86,180,211,1) 100%); background: linear-gradient(to right, rgba(52,143,79,1) 0%, rgba(86,180,211,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#348f4f', endColorstr='#56b4d3', GradientType=1 ); } #templatepromo #scene-6, #templatepromo #scene-7 { background: rgba(67,137,162,1); background: -moz-linear-gradient(left, rgba(67,137,162,1) 0%, rgba(28,216,210,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(67,137,162,1)), color-stop(100%, rgba(28,216,210,1))); background: -webkit-linear-gradient(left, rgba(67,137,162,1) 0%, rgba(28,216,210,1) 100%); background: -o-linear-gradient(left, rgba(67,137,162,1) 0%, rgba(28,216,210,1) 100%); background: -ms-linear-gradient(left, rgba(67,137,162,1) 0%, rgba(28,216,210,1) 100%); background: linear-gradient(to right, rgba(67,137,162,1) 0%, rgba(28,216,210,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4389a2', endColorstr='#1cd8d2', GradientType=1 ); } .sk-three-bounce .sk-child, .sk-spinner-pulse, .sk-double-bounce .sk-child, /* Preloader Color */ .video-play-button:before, .video-play-button:after, /* "GO" button color */ .sven-info .btn:after /* "Subscribe" button on footer */ { background: none #fff; } .video-play-button span { color: #E7464F; } .sven-info, .sven-timer { font-family: 'Dosis', sans-serif; } .sven-info .btn:hover { color: #E7464F; } .bt-container { opacity: 0.3; } /* ================================================================== Responsive styles ================================================================== */ /* Small Devices, Tablets -------------------------------------------------------------- */ @media only screen and (min-width : 768px) { #templatepromo .lt-main { font-size: 2.75em; } } /* Medium Devices, Desktops, Laptops -------------------------------------------------------------- */ @media only screen and (min-width : 1224px) { #templatepromo .lt-main { font-size: 3.75em; } } /* Large Devices, Wide Screens -------------------------------------------------------------- */ @media only screen and (min-width : 1824px) { #templatepromo .lt-main { font-size: 5em; } }