SHARE
TWEET

Ether's Slider CSS

a guest Feb 8th, 2016 120 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* ==========================================================================
  2.  
  3.  
  4.    11. PRODUCT TOUR STYLES
  5.  
  6.  
  7.    ========================================================================== */
  8.  
  9. .tour-home .previous{
  10.     display:none !important;
  11. }
  12.  
  13. /* BACKGROUND IMAGE */
  14. .tour-hero{
  15.     width: 100%;
  16.         padding: 40px 20px 75px;
  17.     text-align: center;
  18.     display: block;
  19.     position: relative;
  20.     margin-top: 0px;
  21. }
  22.  
  23. .tour-hero .interior-subhead {
  24.     color: #000;
  25.     font-size: 24px !important;
  26.     text-transform: none;
  27.     letter-spacing: 2px;
  28.     line-height: 32px;
  29.     font-style: normal;
  30.     max-width: none !important;
  31. }
  32.  
  33. .tour-hero h1{
  34.     font-size: 42px !important;
  35.     text-transform: uppercase;
  36.     letter-spacing: 2px;
  37.     color: #E86C21;
  38. }
  39.  
  40.  
  41. .tour-panel {
  42.   display: none !important;
  43.   position: fixed;
  44.   width: 100%;
  45.   height: 100%;
  46.   background-size: contain;
  47.   background-position: center;
  48.   background-repeat: no-repeat;
  49.   animation-duration: 0.75s !important;
  50.   background:#FFF;
  51. }
  52.  
  53. .tour-panel .hs_cos_wrapper_type_form .hs-button.primary.large {
  54.     background: #E36D25;
  55.     border-radius: 0px;
  56.     padding: 12px 15px;
  57.     border: none;
  58.     color: #FFF;
  59.     font-size: 16px;
  60. }
  61.  
  62. .final-panel .tour-panel-title h2{
  63.     text-align:center !important;
  64. }
  65.  
  66. .active-tour{
  67.   display: block !important;
  68. }
  69.  
  70. .slideshow-content-section{
  71.     max-width: 1000px;
  72.     margin: 0 auto;
  73.     display: block !important;
  74.     float: none !important;
  75.     margin-left: auto !important;
  76.     margin-right: auto !important;
  77. }
  78.  
  79. .inner-panel .slideshow-content-section{
  80.         position: absolute;
  81.     top: 50%;
  82.     left: 50%;
  83.     -webkit-transform: translate(-50%, -50%);
  84.     transform: translate(-50%, -57%);
  85. }
  86.  
  87. .target-panel h3{
  88.     color: #FFC75A;
  89.     font-size: 20px;
  90. }
  91.  
  92. .connect-panel h3{
  93.     color:#fbaa4f;
  94.     font-size:20px;
  95. }
  96.  
  97. .convert-panel h3{
  98.     color:#029fc2;
  99.     font-size:20px;
  100. }
  101.  
  102. .optimize-panel h3{
  103.     color:#89d3e0;
  104.     font-size:20px;
  105. }
  106.  
  107. .inner-panel img{
  108.         float: none;
  109.     max-height: 380px;
  110.     margin: 0 auto !important;
  111.     width: auto !important;
  112.     clear: both;
  113.     text-align: center;
  114.     display: block;
  115. }
  116.  
  117. .tour-title-module{
  118.     background: #FFD88B;
  119.     display: block;
  120.     color: #FFF;
  121.     height: 350px !important;
  122.     position:relative;
  123. }
  124.  
  125. .tour-title-module:after{
  126.     width: 0;
  127.     content: '';
  128.     height: 0;
  129.     border-top: 45px solid transparent;
  130.     border-bottom: 45px solid transparent;
  131.     border-left: 50px solid #E0E0E2;
  132.     position: absolute;
  133.     right: -50px;
  134.     top: 125px;
  135.     z-index: 3;
  136. }
  137.  
  138. .tour-title-module:last-child:after{
  139.     content:none;
  140. }
  141.  
  142. .orange-module{
  143.     background:#FBC893;
  144. }
  145.  
  146. .blue-module{
  147.     background:#23B2D2;
  148. }
  149.  
  150. .teal-module{
  151.     background:#9EDEE8;
  152. }
  153.  
  154. .tour-title-module h3{
  155.     width: 100%;
  156.     background: #FFC75A;
  157.     text-align: center;
  158.     text-transform: uppercase;
  159.     font-weight: 200;
  160.     padding: 4px;
  161. }
  162.  
  163. .orange-module h3{
  164.     background:#FBAA4F;
  165. }
  166.  
  167. .blue-module h3{
  168.     background:#029FC2;
  169. }
  170.  
  171. .teal-module h3{
  172.     background:#89D3E0;
  173. }
  174.  
  175. .tour-title-module .module-icons{
  176.     width: auto !important;
  177.     display: block !important;
  178.     margin: 0 auto;
  179.     height: 120px !important;
  180.     text-align: center;
  181.     opacity: .8;
  182. }
  183.  
  184. .tour-title-module p{
  185.         text-align: center;
  186.         padding: 10px 28px;
  187. }
  188.  
  189. .tour-title-module p a{
  190.     text-align: center;
  191.     color: #FFF !important;
  192.     font-weight: 500;
  193.     font-style: italic;
  194.     position: absolute;
  195.     left: 50%;
  196.     width: 77px;
  197.     margin-left: -33px;
  198.     bottom: 15px;
  199. }
  200.  
  201. .tour-panel-title{
  202.     background: #FFC75A;
  203.     padding: 20px;
  204.     font-size: 26px;
  205.     color: #FFF;
  206.     width: 100%;
  207. }
  208.  
  209. .connect-panel .tour-panel-title{
  210.     background:#fbaa4f;
  211. }
  212.  
  213. .tour-panel-title h2{
  214.     color:#FFF;
  215.     font-size:31px;
  216.     max-width:1100px;
  217.     text-align:left;
  218.     margin:0 auto;
  219. }
  220.  
  221. .convert-panel .tour-panel-title{
  222.     background:#029FC2;
  223. }
  224.  
  225. .optimize-panel .tour-panel-title{
  226.     background:#89d3e0;
  227. }
  228.  
  229. .tour-panel-title .tour-subhead{
  230. }
  231.  
  232. .slideshow-timeline{
  233.     width: 100%;
  234.     max-width: 1000px;
  235.     display: block;
  236.     float: left;
  237.     margin: 0 auto;
  238.     position: absolute;
  239.     left: 50%;
  240.     margin-left: -500px;
  241.     bottom: 60px;
  242.     padding: 0;
  243.     font-size: 18px;
  244. }
  245.  
  246. .slideshow-timeline li{
  247.     float:left;
  248.     display:Block;
  249.     margin: 0 10px;
  250.  
  251. }
  252.  
  253. .slideshow-timeline li .current-section a{
  254.     position: relative;
  255.     top: -26px;
  256.     font-size: 15px;
  257.     color: #B9B9B9 !important;
  258.     font-style: italic;
  259.    
  260. }
  261.  
  262. .intro-content-group{
  263.         top: 100px;
  264.     position: relative;
  265.  
  266. }
  267.  
  268. .current-section{
  269.     margin-left: 40px;
  270. }
  271.  
  272. .slideshow-timeline li .current-section li a:hover{
  273.     color:#666;
  274.     cursor:pointer;
  275. }
  276.  
  277. .active-target-main a{
  278.     color:#FFC75A;
  279.     font-weight: 500;
  280. }
  281.  
  282. .active-connect-main a{
  283.     color:#FBAA4F;
  284.     font-weight: 500;
  285. }
  286.  
  287. .active-convert-main a{
  288.     color:#029FC2 !important;
  289.     font-weight: 500;
  290. }
  291.  
  292. .active-optimize-main a{
  293.     color:#89d3e0 !important;
  294.     font-weight: 500;
  295. }
  296.  
  297.  .active-target-main .current-section .active a{
  298.     color: #FFF !important;
  299.     background: #FFC75A;
  300.     padding: 6px 8px;
  301.  }
  302.  
  303.   .active-connect-main .current-section .active a{
  304.     color: #FFF !important;
  305.     background: #FBAA4F;
  306.     padding: 6px 8px;
  307.  }
  308.  
  309.    .active-convert-main .current-section .active a{
  310.     color: #FFF !important;
  311.     background: #029FC2;
  312.     padding: 6px 8px;
  313.  }
  314.  
  315.     .active-optimize-main .current-section .active a{
  316.     color: #FFF !important;
  317.     background: #89d3e0;
  318.     padding: 6px 8px;
  319.  }
  320.  
  321.  .current-section .active a:hover{
  322.      color:#FFF !important;
  323.  }
  324.  
  325. .nav {
  326.   position: fixed;
  327.   z-index: 1;
  328.   top: 50%;
  329.   transform: translate(0, -50%);
  330.   font-size: 64px;
  331.   padding: 16px;
  332.   color: white;
  333.   background: rgba(black, 0.6);
  334.   opacity: 0.8;
  335.   transition: opacity 0.25s;
  336. }
  337.  
  338. .nav:hover {
  339.     cursor: pointer;
  340.     opacity: 1;
  341.   }
  342.  
  343.  
  344. .previous {
  345.   left: -10px;
  346.     height: 95px;
  347.     width: 55px;
  348.     border-radius: 0px 90px 90px 0px;
  349.     -moz-border-radius: 0px 90px 90px 0px;
  350.     -webkit-border-radius: 0px 90px 90px 0px;
  351.     background: #FFD88B;;
  352. }
  353.  
  354. .next {
  355.   right: -10px;
  356.     height: 95px;
  357.     width: 55px;
  358.     border-radius: 90px 0px 0 90px;
  359.     -moz-border-radius: 90px 0px 0 90px;
  360.     -webkit-border-radius: 90px 0px 0 90px;
  361.     background: #FFD88B;;
  362. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top