CSS 40
Theme.css Guest on 14th August 2020 01:16:27 AM
  1. @charset "utf-8";
  2. /* CSS Document */
  3. *:before,
  4. *:after,
  5. * { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; }
  6.  
  7. .display-1, .display-2, .display-3, .display-4 {}
  8. .display-1 { font-size:66px; line-height:1.37; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;}
  9. .display-2 { font-size:42px; line-height:1.2; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;}
  10.  
  11. h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight:normal;}
  12.  
  13. h1, .h1 { font-size:56px; line-height:1.1; color: #F6A704; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;}
  14. h2, .h2 { font-size:36px; line-height:1.2; color:#1B3565; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;}
  15. h3, .h3 { font-size:30px; line-height:1.4; color:#1B3565; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif;  }
  16. h4, .h4 { font-size:24px; line-height:1.4; color:#1B3565;  font-family: 'Open Sans', sans-serif;  }
  17. h5, .h5 { font-size:20px; line-height:1.15; color:#1B3565; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif; }
  18. h6, .h6 { font-size:16px; line-height:1.43;}
  19.  
  20. small { font-size:12px; line-height:1.41; display:block; }
  21. p { font-size:14px; line-height:1.7;}
  22. p.lead { font-size:18px; line-height:1.5; font-weight:300; }
  23. p span { font-size:13px; line-height:1.5; display:block; }
  24.         /* Responsive style start */
  25.         @media screen and (max-width:991px) {
  26.                 h4, .h4 { font-size:20px; }
  27.         }
  28.         @media screen and (max-width:767px) {
  29.                 h2, .h2 { line-height:1.2;}
  30.                 h3, .h3 { line-height:1.2; }
  31.                 h4, .h4 { font-size: 16px; }
  32.         }
  33.  
  34. .color-primary { color:#1A3566;}
  35. .color-red { color:#ce0505;}
  36. .text-uppercase { text-transform:uppercase; }
  37. .pull-right { float:right; }
  38. .inverse { color:#fff;}
  39. .icon-circle { display:inline-block; vertical-align:middle;  border: 1px solid #979797; background-color: #F4F4F4; width:60px; height:60px; line-height:54px; border-radius:50%;}
  40. .container { margin:0 auto; max-width:none;}
  41. .img-responsive { display:inline-block; vertical-align:middle; max-width:100%;}
  42. .media-top { vertical-align:top;}
  43.         @media screen and (min-width:767px) {
  44.                 .media { display:table;}
  45.                 .media-middle { vertical-align:middle; }
  46.                 .media-bottom { vertical-align:bottom; }
  47.                 .media-right,
  48.                 .media-body,
  49.                 .media-left { display:table-cell; }
  50.                 .media-body { width:2000px;}
  51.                 .media-right { padding-left:30px; }
  52.                 .media-left  { padding-right:30px; }
  53.         }
  54. /* Form gruop css */
  55. .form-group { margin-bottom: 15px; }
  56. .form-group-inline { display:inline-block;}
  57. .form-group .control-label { display:block; margin-bottom:10px; color: rgba(15,29,58,0.45);     font-family: 'Lato', sans-serif; font-size: 16px; font-family: 'Open Sans', sans-serif;  }
  58. .form-group .form-control { display: block; width: 100%; height: 42px; padding: 6px 12px; font-size: 16px; line-height: 1.42857143; color: #1B3565; background-color: #fff; background-image: none; border: 1px solid #e0e0e0; border-radius: 4px;font-size:18px;}
  59. .form-control:focus { outline: 0; border-color:#1B3565; }
  60. /*
  61. .form-control::-moz-placeholder { color: #d1d0ce; opacity: 1; }
  62. .form-control:-ms-input-placeholder { color: #d1d0ce; opacity: 1;}
  63. .form-control::-webkit-input-placeholder { color: #d1d0ce; opacity: 1;}
  64. .form-control::-ms-expand { background-color: transparent; border: 0;}
  65. */
  66. .form-group .form-control::-webkit-input-placeholder { color: #d1d0ce; opacity:1; font-size:16px; }
  67. .form-group .form-control::-moz-placeholder { color: #d1d0ce; opacity:1;  font-size:16px;}
  68. .form-group .form-control:-ms-input-placeholder { color: #d1d0ce;  opacity:1;  font-size:16px;}
  69. .form-group .form-control:-moz-placeholder {  color: #d1d0ce; opacity:1;  font-size:16px;}
  70.  
  71. .form-group.form-group-lg .form-control { height:60px;}
  72.  
  73. .form-group-dark { position:relative;}
  74. .form-group-dark .control-label { font-size:14px; font-weight:bold; color:#444444; margin-bottom:5px; }
  75. .form-group-dark .form-control { border-radius:10px; background:#f1f1f1 !important; border:2px solid #cececf; font-size:14px; color:#000000;}
  76. .form-group-dark .form-control::-webkit-input-placeholder { color: #666; opacity:1; font-size:14px; }
  77. .form-group-dark .form-control::-moz-placeholder { color: #666; opacity:1;  font-size:14px;}
  78. .form-group-dark .form-control:-ms-input-placeholder { color: #666;  opacity:1;  font-size:14px;}
  79. .form-group-dark .form-control:-moz-placeholder {  color: #666; opacity:1;  font-size:14px;}
  80.  
  81. .form-group-dark .input-wrap { position:relative;}
  82. .form-group-dark .input-wrap + .input-wrap,
  83. .form-group-dark .form-control + .form-control { margin-top:15px; }
  84. .form-group-dark .error-msg { position: absolute; left: 100%; bottom: 0; background: #1a3566; color: #fff; t-size: 14px; border-radius: 9px; width: 100%; max-width: 110px; display: block; padding: 10px 12px; margin-left: 8px; display:none;}
  85. .form-group-dark .error-msg:before { content:""; position:absolute; left:-5px; top:50%; margin-top:-5px; border-right:5px solid #1a3566; border-top:5px solid transparent; border-bottom:5px solid transparent;  }
  86.  
  87. .alert { padding:12px 24px; background:#e6e5e5; border-radius:3px; margin-top:30px; max-width:700px; margin:30px auto 0; }
  88. .alert.alert-success { color: #0e8208; border: 1px solid #10ad07; background: #e1f5e2;}
  89.  
  90. .checkbox { padding-left: 20px;}
  91. .checkbox label { display: inline-block; position: relative; padding-left: 5px; line-height:1.2; user-select: none; }
  92. .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 16px; height: 16px; top:1px; left: -20px; border: 1px solid #757575; border-radius: 3px; background-color: #757575; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
  93. .checkbox label::after { display: inline-block; position: absolute; width: 10px; height: 5px; left: -17px; top: 5px; border-left:2px solid #fff; border-bottom:2px solid #fff;  font-size: 11px; color: #555555; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
  94. .checkbox input[type="checkbox"] { opacity: 0; display:none; }
  95. /*.checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }*/
  96. .checkbox input:focus,
  97. .checkbox label:before:focus,
  98. .checkbox label:after:focus,
  99. .checkbox label:focus { outline:none;}
  100.  
  101. .checkbox input[type="checkbox"]:checked + label::after { content: ""; }
  102.  
  103. .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; }
  104. .checkbox input[type="checkbox"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; }
  105.  
  106. .checkbox.checkbox-circle label::before { border-radius: 50%; }
  107. .checkbox.checkbox-inline { margin-top: 0; }
  108.  
  109. .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #428bca; border-color: #428bca; }
  110. .checkbox-primary input[type="checkbox"]:checked + label::after { color: #fff; }
  111.  
  112. .radio { padding: 0; margin-bottom:15px; }
  113. .radio label { display: inline-block; position: relative; padding-left: 0; line-height:1.2; user-select: none; vertical-align:middle; }
  114. .radio label::before { content: ""; opacity:0; display: inline-block; position: absolute; width: 26px; height: 26px; top:1px; left: -20px; border: 1px solid #1a3566; border-radius: 50%; background-color: #1a3566; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
  115.  
  116. .radio label::after { display: inline-block; position: absolute; width: 10px; height: 5px; left: -17px; top: 5px; border-left:2px solid #fff; border-bottom:2px solid #fff;  font-size: 11px; color: #555555; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
  117. .radio input[type="radio"] { opacity: 0; display:none; }
  118. /*.radio input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }*/
  119. .radio input:focus,
  120. .radio label:before:focus,
  121. .radio label:after:focus,
  122. .radio label:focus { outline:none;}
  123.  
  124. .radio input[type="radio"]:checked + label::after { content: ""; }
  125.  
  126. .radio input[type="radio"]:disabled + label { opacity: 0.65; }
  127. .radio input[type="radio"]:disabled + label::before { background-color: #eeeeee; cursor: not-allowed; }
  128.  
  129. .radio.radio-circle label::before { border-radius: 50%; }
  130. .radio.radio-inline { margin-top: 0; }
  131.  
  132. .radio-primary input[type="radio"]:checked + label::before { opacity:1;}
  133. .radio-primary input[type="radio"]:checked + label::after { color: #fff; }
  134.  
  135. .radio.radio-grid label { position:relative; }
  136. .radio.radio-grid label:after,
  137. .radio.radio-grid label:before { position:absolute; left:auto;}
  138. .radio.radio-grid label:after { top: 24px; right: 23px; width: 11px; height: 6px; }
  139. .radio.radio-grid label:before { top:16px; right:16px; }
  140.  
  141. /* Select 2 */
  142. .select2-container:focus { outline:none;}
  143. .select2-container.select2-container--focus *:not(b),
  144. .select2-container.select2-container--focus { outline:none !important; border:none !important;}
  145. .select2-container .select2-selection--single { height:45px;}
  146. .select2-container--default .select2-selection--single { border:1px solid #fff; box-shadow:0 0 2px 1px rgba(0,0,0,0.1); }
  147. .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:45px;}
  148. .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; }
  149. .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: -1px;  border-width: 4px 4px 0 4px; }
  150.  
  151. .select2-container .select2-search { display:none;}
  152. .select2-container--open .select2-dropdown--below { box-shadow:0 0 2px 1px rgba(0,0,0,0.1); }
  153. .select2-dropdown { border:none; background:rgba(255,255,255,0.95); text-align:center; border-radius:0 0 4px 4px; overflow:hidden;}
  154. .select2-container.select2-container--default .select2-results__option { line-height: 33px; position:relative; }
  155. .select2-container.select2-container--default .select2-results__option:after {     content: ""; width: auto; height: 1px; background: #a6acba; margin: 0; display: block; position: absolute; left: 10px; right: 10px; bottom: 0; }
  156. .select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted { background:none; color:#00012c; font-weight:bold;}
  157. .select2-container.select2-container--default .select2-results__option.select2-results__option--highlighted:before { display:none;}
  158. .select2-container.select2-container--default .select2-results__option[aria-selected=true] {  background-color: transparent; color: #bbb; font-weight: bold;}
  159. .select2-container--default .select2-results>.select2-results__options { max-height: 134px;}
  160.  
  161. .mCSB_scrollTools { width:10px; opacity:0; transition:all ease-in-out 0.2s;}
  162. .mCSB_scrollTools.mCSB_scrollTools_onDrag { opacity:1;}
  163. .mCSB_outside + .mCSB_scrollTools { right:0; top: 5px; bottom: 5px;}
  164. .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width:2px;}
  165. .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background:rgba(0,0,0,0.5);}
  166. /* Button style */
  167. a.btn,
  168. a.btn:focus,
  169. a.btn:hover { outline:none; text-decoration:none; }
  170. .btn { display: inline-block; padding: 9px 12px; font-size: 14px; line-height: 1.2; color: #5e5e5e; text-align: center; vertical-align: middle; cursor: pointer; background-color: #d1dade; border-radius: 3px; background-image: none !important; border: none; text-shadow: none; box-shadow: none; }
  171. .btn-default { color: #333; background-color: #fff; border-color: #ccc; }
  172. .btn-primary { color: #fff; background-color: #428bca; border-color: #357ebd; }
  173. .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
  174.  
  175. .btn { font-family: 'Open Sans', sans-serif; border-radius: 4px; color: #F6A704; font-size: 16px; padding:14px 24px; line-height:1.15; border:1px solid transparent; position:relative; }
  176. .btn input[type="radio"],
  177. .btn input[type="checkbox"] { position:absolute; top:0; left:0; opacity:0; visibility:hidden; width:0; height:0;}
  178.  
  179. .btn:focus { outline:none;}
  180.  
  181. .btn.btn-lg { font-size:16px; padding-top:19px; padding-bottom:19px;}
  182. .btn.btn-sm { padding:8px 24px; font-size:12px; }
  183.  
  184. .btn.btn-block { display:block; width:100%;}
  185.  
  186. /* Primary Button */
  187. .btn-primary { background-color: #1B3565; border-color: #1B3565;}
  188. .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus{ background-color: #0e3e96; border-color: #0e3e96; }
  189.  
  190. /* Primary Button */
  191. .btn-inverse.btn-primary { color: #1B3565; background-color: #E3EBF0; border-color: #E3EBF0;}
  192. .btn-inverse.btn-primary:hover, .btn-inverse.btn-primary:focus, .btn-inverse.btn-primary:active, .btn-inverse.btn-primary:active:focus{ background-color: #cbdbe4; border-color: #cbdbe4; }
  193.  
  194. .btn-outline.btn-primary { background-color: transparent; border-color: #1B3565; color:#1B3565; }
  195. .btn-outline.btn-primary:hover, .btn-outline.btn-primary:focus, .btn-outline.btn-primary:active, .btn-outline.btn-primary:active:focus{ background-color: #1B3565; border-color: #1B3565; color: #F6A704;  }
  196.  
  197. .btn.btn-start { min-width:160px; color:#fff; font-family: 'Open Sans', sans-serif; font-size:20px; font-weight:600; }
  198. .btn-next { min-width:160px;  }
  199.  
  200. /* range slider */
  201. .range-slider { margin:20px 0;  background: #18366a; border: none; box-shadow: none; border-radius: 50px; }
  202. .range-slider.noUi-horizontal { height:14px;}
  203. .range-slider.noUi-horizontal .noUi-handle { top: -3px; width: 20px; height: 20px; border-radius: 50%; cursor:e-resize; }
  204. .range-slider.noUi-horizontal .noUi-handle:focus { outline:none;}
  205. .range-slider .noUi-connect { background: #fb993f; border-radius:100px;}
  206. .range-slider .noUi-handle { background: #18366a; border:5px solid #fb993f; box-shadow:0px 1px 2px 2px rgba(0,0,0,0.3); border-radius:50%;}
  207. .range-slider .noUi-handle:before,
  208. .range-slider .noUi-handle:after { display:none;}
  209.  
  210. .range-slider.range-slider-pipes {}
  211. .range-slider.range-slider-pipes { background:transparent;}
  212. .range-slider.range-slider-pipes .noUi-connect { background:#18366a;}
  213. .range-slider.range-slider-pipes .noUi-pips-horizontal { padding: 3px 0; height: auto; top: 0; }
  214. .range-slider.range-slider-pipes .noUi-pips-horizontal:before { content: ""; left: 0; right: 0; background: #DAD9D7; height: 2px; position: absolute; top: 7px;}
  215. .range-slider.range-slider-pipes .noUi-marker-horizontal.noUi-marker { border-radius: 50%; width:6px; height:6px; background-color: #D8D8D8; margin:2px 0 2px -3px; }
  216. .range-slider.range-slider-pipes .noUi-marker-horizontal.noUi-marker:nth-child(2n+1) { height: 10px; width: 10px; border: 2px solid #1B3565; background-color: #D8D8D8; margin:0 0 0 -5px; }
  217.  
  218. .banner { background:center no-repeat; background-size:cover; padding-bottom: 31%; /* 16:9 */  height: 0;}
  219.         /* Responsive style start */
  220.         @media screen and (max-width:480px) {
  221.                 .banner { height:220px; }
  222.         }
  223. /* Section style */
  224. .section-title { margin:0 0 30px; }
  225.  
  226. /* Responsive video */
  227. .video-wrapper { background-color: #D1D3D5; position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
  228. .video-wrapper:before { content:""; position:absolute; left:50%; top:50%; display:inline-block; border-left:47px solid #fff; border-top:32px solid transparent; border-bottom:32px solid transparent; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); }
  229. .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  230.  
  231. /* section finance */
  232. .section-finance { padding:50px 0 60px; }
  233.  
  234. .finance-step { margin-bottom:5px; }
  235. .finance-step .finance-img { display:inline-block; vertical-align:middle; max-height:92px; }
  236. .finance-step .step-title { margin:20px 0 10px;}
  237.  
  238.         /* Responsive style start */
  239.         @media screen and (max-width:767px) {
  240.                 .section-finance { padding:30px 0 40px;}
  241.                 .finance-step { border-bottom:1px solid #dad9d7; max-width:285px; margin:0 auto 25px; padding-bottom:25px;}
  242.                 .finance-step .step-description { font-size:13px;}
  243.                 .col-sm-4:last-child .finance-step { border-bottom:none; padding-bottom:0; margin-bottom:0;}
  244.         }
  245.  
  246. /* pre-qualified */
  247. .pre-qualified { padding:42px 0 88px; position:relative;}
  248. .pre-qualified .section-title { margin-bottom:22px; }
  249. .pre-qualified .btn-get-started { margin-top:20px; width:220px; max-width:100%;}
  250.  
  251. .section-slide .btn.btn-yesno { margin:80px 0;}
  252. .section-slide .slide-input { margin:30px auto 15px; width:100%; max-width:500px;}
  253. .section-slide .btn.btn-back { margin:15px 0; min-width:50%;}
  254. .section-slide .btn-back.btn-block { margin:30px 0 0;}
  255. .section-slide .checkbox { margin:30px 0;}
  256. .section-slide .section-birthdate { margin:40px 0 30px;}
  257. .section-slide .select2 { min-width:80px; margin:0 5px;}
  258. .section-slide .select2.select2-container--default .select2-selection--single .select2-selection__arrow b { opacity:0;}
  259. .section-slide .select2-container .select2-selection--single .select2-selection__rendered { padding-right:8px;}
  260.  
  261. .custom-modal { display: none; position: absolute; z-index: 10000000; top: 50%; left: 50%; border: 11px solid #fff; background: rgba(229, 232, 237, 0.95); width: 100%; padding: 51px 35px; transform:translate(-50%,-50%);
  262. -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -webkit-box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 13px 0 rgba(0,0,0,0.2); }
  263. .custom-modal:focus { outline:none; }
  264. .custom-modal .modal-title { margin:20px 0 0;}
  265. .custom-modal .modal-text { margin: 11px 0 0; color: #444444; }
  266. .custom-modal .btn-close-window { margin:43px 0 0; min-width:300px; }
  267.  
  268.         /* Responsive style start */
  269.         @media screen and (max-width:767px) {
  270.                 .section-slide .btn.btn-outline { margin-top:20px;}
  271.                 .custom-modal .btn-close-window { min-width:200px; }
  272.                 .section-slide .btn.btn-yesno { margin: 20px 0; }
  273.                 .section-slide .btn.btn-back { min-width:100%; }
  274.         }
  275.         @media screen and (max-width:480px) {
  276.                 .section-slide .checkbox label { text-align:left; }
  277.         }
  278.  
  279. .slide-wrapper { }
  280. .slide-wrapper .slide-arrow { border:none; background:none; width:40px; height:40px; line-height:40px; text-align:center; position:absolute; top:50%; margin-top:-20px; z-index:10; }
  281. .slide-wrapper .slide-arrow:focus { outline:none; }
  282. .slide-wrapper .slide-arrow svg { vertical-align:middle; display:inline-block; }
  283. .slide-wrapper .slide-arrow svg path { fill:#1B3565;}
  284. .slide-wrapper .slide-arrow:hover svg path { fill:#133980; }
  285. .slide-wrapper .slide-prev { left:-40px; }
  286. .slide-wrapper .slide-next { right:-40px;}
  287. .slide-wrapper .req-que { margin-left:2px;}
  288.  
  289. .slider-wrap { margin:50px auto 25px;  }
  290. .slider-wrap .slider-value { font-size:18px; color:#18366a; min-width:65px; display:inline-block;}
  291. .slider-wrap .slider-value strong { color:#18366a;}
  292.  
  293. .slider-nav  { display:inline-block; margin:0; padding:0; position:absolute; left:0; width:100%; bottom:-40px; }
  294. .slider-nav  li { display:inline-block; vertical-align:middle; margin:0 5px; width:12px; height:12px; border-radius:50%; background:transparent; border:2px solid #1B3565; cursor:pointer; }
  295. .slider-nav  li.active { background:#1B3565;}
  296.  
  297.  
  298.  
  299.         /* Responsive style start */
  300.         @media screen and (max-width:767px) {
  301.                 .slider-nav { bottom: auto; position: relative; left: auto; margin-top: 15px; }
  302.                 .slider-nav li {margin: 0 4px 4px;}
  303.                 .slide-wrapper .slide-arrow { top:auto; margin:0; bottom:-48px; padding: 0; width: 32px; height: 32px; line-height: 32px;}
  304.                 .slide-wrapper .slide-prev { left:0; }
  305.                 .slide-wrapper .slide-next { right:0;}
  306.                 .pre-qualified { padding: 30px 0 70px; }
  307.                 .section-slide .btn.btn-outline { margin:20px 0 0; display:block;}
  308.                 .slider-wrap .slider-value .visible-xs { display:inline-block !important;}
  309.         }
  310.  
  311. /* section-explainer */
  312. .section-explainer { padding:32px 0 132px;}
  313. .section-explainer .btn-apply-now { width:220px; max-width:100%; margin-top:38px;}
  314.         /* Responsive style start */
  315.         @media screen and (max-width:767px) {
  316.                 .section-explainer .col-xs-12 { padding:0;}
  317.         }
  318. /* benefits-financing */
  319. .benefits-financing { border: 0.5px solid #1B3565; background-color: #1B3565; padding:32px 0 38px;}
  320. .benefits-financing .icon-circle img { display:inline-block; vertical-align:middle; max-height:37px;}
  321.  
  322.         /* Responsive style start */
  323.         @media screen and (max-width:767px) {
  324.                 .section-explainer { padding: 30px 0 40px; }
  325.         }
  326.  
  327. /* flexible-financing */
  328. .flexible-financing { padding:50px 0;}
  329. .flexible-financing .section-title { margin-bottom:15px;}
  330. .flexible-financing .lead { margin:0 0 15px;}
  331. .flexible-financing .btn-qualified { margin-top:12px; width:220px; max-width:100%;}
  332.  
  333.         /* Responsive style start */
  334.         @media screen and (max-width:767px) {
  335.                 .flexible-financing { padding: 35px 0;}
  336.         }
  337.        
  338. /***/
  339. .btn.btn-get-started { width:100%; max-width:100%; margin-top:30px;}
  340. .responsive-table h3 { margin:0; }
  341. .responsive-table { background:#fff; }
  342. .responsive-table table { text-align:center; width:100%; }
  343. .responsive-table table tr td:first-child,
  344. .responsive-table table tr th:first-child { text-align:left; }
  345. .responsive-table table tr th { line-height:normal; font-weight:normal; background-color: #1B3565; font-size:15px; color:#fff; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif; padding:8px 0;}
  346. .responsive-table table tr th:first-child { background-color: rgba(227,235,240,0.6);}
  347. .responsive-table table tr th span { display:block; border-right:1px solid rgba(227, 235, 240, 0.2);}
  348. .responsive-table table tr th:last-child span { border:none;}
  349. .responsive-table table tr th span.color-primary { color:#F6A704;}
  350.  
  351. .responsive-table table tr td { font-family: 'Open Sans', sans-serif; font-size: 13px; padding:8px 15px; border-bottom:1px solid #e5e5e5; color:#1B3565;}
  352. .responsive-table table tr td img { max-height:20px; display:inline-block; vertical-align:middle;}
  353.  
  354. .assurance-banner { padding:70px 0 85px; background:#000 center center no-repeat; background-size:auto 110%; }
  355. .banner-text { padding:30px 40px; background-color: rgba(17, 35, 68, 0.83); margin-left: 65px;}
  356. .banner-description-text { padding:30px; background:#364662; }
  357. .banner-lead-text { padding:30px;  background:#112344; }
  358. .banner-lead-text p,
  359. .banner-description-text  p { margin:0;}
  360. .banner-text .btn.btn-sm { padding:12px 24px; font-size:12px; color:#fff; border-color:#fff; margin:15px  0 20px;}
  361.  
  362. .policy-covers { padding:50px 0; border-bottom: 1px solid rgba(27, 53, 101, 0.3);}
  363. .policys { margin:5px 0 30px; }
  364. .policys .policys-img { max-height:87px;}
  365. .policys .policys-title { margin:15px 0 0;}
  366.  
  367. .assurance-video { padding:30px 0; border-bottom: 1px solid rgba(27, 53, 101, 0.3);}
  368.  
  369. .why-choose { padding:60px 0 30px; background-color: rgba(227,235,240,0.6); }
  370.  
  371. .insurance-list { padding:0;}
  372. .insurance-list li { position:relative; list-style:none;  font-family: 'Open Sans', sans-serif; font-size: 12px; color:#3b527b; line-height:2.4; padding-left:35px;}  
  373. .insurance-list li:before { content:""; position:absolute; width:28px; height:28px; top:0; left:0; background:url(../images/tick-yellow.png) center no-repeat; background-size:20px auto;  }
  374.  
  375. .get-a-quote { background:#1B3565; padding:70px 0 77px;}
  376.  
  377. .your-details { padding:50px 0 56px; background-color: #F4F4F4;}
  378. .your-details p.lead { color: #1B3565;}
  379. .contact-detail { margin-top:35px; }
  380. .contact-detail .form-group .control-label { color: #1B3565; font-family: 'Lato', sans-serif; font-size: 12px; }
  381. .contact-detail .form-group textarea.form-control { min-height:167px;}
  382.  
  383.  
  384.         /* Responsive style start */
  385.         @media screen and (max-width:1200px) {
  386.                 .banner-text { margin:0;}
  387.         }
  388.         @media screen and (max-width:767px){
  389.                 .btn.btn-lg { font-size: 14px; padding-top: 17px; padding-bottom: 17px;}
  390.                 .assurance-banner { padding:30px 0;  }
  391.                 .banner-text { background:none; padding:0 15px;}
  392.                 .banner-text h1 { font-size:36px; margin-bottom:20px; }
  393.                 .policys { max-width:280px; margin:20px auto 0; padding-bottom:20px;  border-bottom: 1px solid rgba(27, 53, 101, 0.3); }
  394.                 .policys.last { border:none;}
  395.                 .btn-lg.btn-get-started { width: 220px; }
  396.         }
  397.        
  398. /* jewelary page style start */
  399. .jewelary-banner { padding:375px 0; background:center no-repeat; background-size:cover; }      
  400. .jewelary-banner .display-1 { display:block; margin-bottom:5px; letter-spacing:2px; }
  401. .jewelary-banner .btn { margin-top:15px;}
  402.        
  403.         /* Responsive style start */
  404.         @media screen and (max-width:1200px) {
  405.                 .jewelary-banner { padding:230px 0; }
  406.                 .display-1 { font-size:62px; }
  407.         }
  408.         @media screen and (max-width:991px){
  409.                 .jewelary-banner { padding:170px 0; }
  410.                 .display-1 { font-size: 54px; letter-spacing:0; line-height: 1; }
  411.                 .display-2 { font-size: 32px; }
  412.                 .btn.btn-start { font-size:16px; }
  413.                 .jewelary-banner .display-1 { margin-bottom:10px; }
  414.         }
  415.         @media screen and (max-width:767px){
  416.                 .display-1 { font-size: 44px; }
  417.                 .jewelary-banner {  padding:150px 0;  }
  418.                 .btn.btn-start { min-width: 140px; }
  419.         }      
  420.         @media screen and (max-width:480px){
  421.                 .display-1 { font-size: 34px; }
  422.         }
  423.        
  424. /* carousel vacation page style start */       
  425. .choose-vacation {}
  426.  
  427. .carousel-vacation { margin:30px 0 0;}
  428. .carousel-vacation .owl-item { padding:0 7px;}
  429. .carousel-vacation .owl-dots { display:none; }
  430. .carousel-vacation.owl-carousel .owl-nav { position: absolute; left: 50%; bottom: -85px; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
  431. .carousel-vacation.owl-carousel .owl-nav button.owl-next,
  432. .carousel-vacation.owl-carousel .owl-nav button.owl-prev { font-size:16px; color:#1A3566; font-family: 'Open Sans', sans-serif;}
  433. .carousel-vacation.owl-carousel .owl-nav button:focus { outline:none; }
  434. .carousel-vacation.owl-carousel .owl-nav button.owl-next:before { content:"|"; font-size:14px; margin:0 10px; font-weight:bold;  display:inline-block; vertical-align:bottom; }
  435. .carousel-vacation.owl-carousel .owl-nav img { display: inline-block; vertical-align: baseline; }
  436.  
  437. .choose-vacation .bottom-title { margin:15px 0 40px;}
  438.  
  439.         @media screen and (max-width:767px){
  440.                 .choose-vacation { margin-top:15px; }
  441.                 .choose-vacation .bottom-title { margin: 15px 0 70px; }
  442.         }      
  443. /********************************************/
  444. /*   jwelary portfolio  page style start    /*
  445. /********************************************/
  446.  
  447. /* Section Expert Detail */
  448. .expert-details { padding:20px 0 100px;}
  449. .expert-details .media-left { padding-right:100px; }
  450. .expert-details .media-body { position:relative; }
  451. .expert-details .lead { margin-top:20px; }
  452. .expert-img { display:inline-block; width:294px; height:294px; border-radius:50%; overflow:hidden; vertical-align:middle; margin-bottom:30px; }
  453. .expert-name { margin:0;}
  454. .nav-social { padding:0; margin:0;}
  455. .nav-social li { display:inline-block; vertical-align:middle; list-style:none; margin:0 11px; }
  456. .nav-social li img { height:26px; }
  457. .expert-action { margin-top:30px; }
  458. .expert-action .btn { margin-right:40px;}
  459.  
  460.         @media screen and (min-width:991px){
  461.                 .expert-action { position: absolute; left: 0; bottom: 0; }
  462.         }
  463.         @media screen and (max-width:991px){
  464.                 .expert-details { padding: 20px 0 60px; }
  465.                 .expert-details .media-left { padding-right:50px; }
  466.                 .expert-details .lead { margin-top:20px;}
  467.                 .expert-img { width: 224px; height: 224px; }
  468.                 .expert-name { font-size:24px;}
  469.                 .expert-action .btn { margin-right: 15px;}
  470.         }
  471.         @media screen and (max-width:767px){
  472.                 .expert-details .media-body { text-align:center;}
  473.                 .expert-action .btn { margin:10px; }
  474.                 .expert-details .media-left { padding:0;}
  475.                 .expert-img { width: 194px; height: 194px; margin-bottom:20px; }
  476.         }
  477.         @media screen and (max-width:580px){
  478.                 .expert-img { width: 164px; height: 164px; }
  479.         }
  480. /* Section Pull Quote */
  481. .customjewelrytestimonials .lead { max-width:750px; margin:0 auto;}
  482. .customjewelrytestimonials .quote-action { padding:35px 0 65px;}
  483. .customjewelrytestimonials .quote-action .btn { min-width:138px; margin:0 15px; }
  484.  
  485.         @media screen and (max-width:767px) {
  486.                 .customjewelrytestimonials .quote-action .btn { margin:0 5px;}
  487.         }
  488.        
  489. /* Section jewelry-expert */   
  490. .jewelry-expert { padding:80px 0 140px;}       
  491. .jewelry-expert .expert-image { display:inline-block; width:138px; height:138px; border-radius:50%; overflow:hidden; vertical-align:middle; margin-bottom:40px; }
  492. .jewelry-expert .section-slide .select2 { margin:0; min-width:100%;}
  493.  
  494.         @media screen and (max-width:991px){
  495.                 .jewelry-expert { padding: 40px 0 90px;}
  496.         }
  497.  
  498. /* section instagram  */
  499. .section-instagram { padding:65px 0; /* border-top:1px solid #bcc4d2; */}
  500. .section-instagram .instagram-post { margin:0; padding:0; }
  501. .section-instagram .instagram-post li { list-style:none; float:left; width:16.6667%; padding:8px;}
  502.         @media screen and (max-width:991px){
  503.                 .section-instagram { padding: 35px 0; }
  504.                 .section-instagram .instagram-post li { width:33.33%; }
  505.         }
  506.         @media screen and (max-width:640px){
  507.                 .section-instagram .instagram-post li { width:50%; }
  508.         }      
  509.        
  510. /**********************/
  511. /*  Page repair style */
  512. /**********************/       
  513. .repair-banner { padding:90px 0 120px; background:#000 center center no-repeat; background-size:cover; }
  514. .repair-banner .banner-text { padding:30px 40px; background-color: rgba(17, 35, 68, 0.83); margin-left: 65px;}
  515. .repair-banner .banner-description-text { padding:30px; background:#364662; }
  516. .repair-banner .banner-lead-text { padding:30px;  background:#112344; }
  517. .repair-banner .banner-lead-text p { margin:0;}
  518.  
  519. .image-comparison {}
  520. .image-comparison img { max-height:600px;}
  521. .image-comparison .cocoen-drag { width:7px; margin-left:-3px;}
  522. .image-comparison .cocoen-drag:before { height:36px; width: 36px; border: 6px solid #FFFFFF; background-color: #1B3565; box-shadow: inset 0 0 6px 4px rgba(0,0,0,0.21), 0 2px 4px 0 rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 6px 4px rgba(0,0,0,0.21), 0 2px 4px 0 rgba(0,0,0,0.5); -moz-box-shadow: inset 0 0 6px 4px rgba(0,0,0,0.21), 0 2px 4px 0 rgba(0,0,0,0.5); border-radius:50%; margin:-18px 0 0 -18px;}
  523.  
  524. .custom-slider { margin-bottom:30px; padding-bottom:60px; position:relative;}
  525. .custom-slide-wrapper { padding:0; margin:0; position:relative; }
  526. .custom-slide-wrapper:after,
  527. .custom-slide-wrapper:before { position:absolute; top:0; height:100%; z-index:10; padding:0 24px; line-height:normal; text-transform:uppercase; font-size:28px; background:#1b3565; color:#fff; font-family: 'Open Sans', sans-serif; font-weight:300; writing-mode: vertical-lr;
  528.   text-orientation: sideways; text-align:center; text-orientation: sideways; }
  529. .custom-slide-wrapper:after { content:"after"; left:100%; }
  530. .custom-slide-wrapper:before { content:"before"; right:100%;}
  531. .custom-slide-wrapper li { display:block; overflow:hidden; list-style:none; }
  532.  
  533.  
  534. .custom-slider .custom-slide-arrow { border:none; background:none; width:40px; height:40px; line-height:40px; text-align:center; position:absolute; top:50%; margin-top:-50px; z-index:10; }
  535. .custom-slider .custom-slide-arrow:focus { outline:none; }
  536. .custom-slider .custom-slide-arrow svg { vertical-align:middle; display:inline-block; }
  537. .custom-slider .custom-slide-arrow svg path { fill:#1B3565;}
  538. .custom-slider .custom-slide-arrow:hover svg path { fill:#133980; }
  539. .custom-slider .custom-slide-prev { left:-150px; }
  540. .custom-slider .custom-slide-next { right:-150px;}
  541.  
  542. .custom-slider-nav  { position:absolute; left:0; bottom:0; display:inline-block; margin:20px 0; padding:0; width:100%; text-align:center; }
  543. .custom-slider-nav  li { display:inline-block; vertical-align:middle; margin:0 2px; width:10px; height:10px; border-radius:50%; background:#eef3f6; cursor:pointer; }
  544. .custom-slider-nav  li.active { background:#1B3565;}
  545.  
  546.  
  547. .repair-video { padding:20px 0 60px; background:#E3EBF0; border-top: 1px solid rgba(27, 53, 101, 0.3); }
  548.  
  549.         /* Responsive style start */
  550.         @media screen and (max-width:1200px) {
  551.                 .banner-text { margin:0;}
  552.         }
  553.         @media screen and (max-width:991px) {
  554.                 .repair-banner { padding:80px 0 90px; }
  555.                 .image-comparison img { max-height:480px;}
  556.                 .custom-slide-wrapper { padding:0 37px;}
  557.                 .custom-slide-wrapper:after,
  558.                 .custom-slide-wrapper:before { font-size:16px; font-weight:400; padding:0 8px;}
  559.                 .custom-slide-wrapper:after { margin-left:-37px;}
  560.                 .custom-slide-wrapper:before {  margin-right:-37px;}           
  561.         }
  562.         @media screen and (max-width:767px){
  563.                 .assurance-banner { padding:30px 0;  }
  564.                 .banner-text { background:none; padding:0 15px;}
  565.                 .banner-text h1 { font-size:36px; margin-bottom:20px; }
  566.                
  567.                 .custom-slider .custom-slide-prev { left:40px;}
  568.                 .custom-slider .custom-slide-next { right:40px;}
  569.                 .custom-slider .custom-slide-arrow svg path { fill:#fff;}
  570.                 .image-comparison img { max-height:380px;}
  571.                 .image-comparison .cocoen-drag { width:5px; margin-left:-2px;}
  572.                 .image-comparison .cocoen-drag:before { border-width:4px;}
  573.                 .image-comparison .cocoen-drag:after { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 100%; }
  574.                
  575.  
  576.         }
  577.         @media screen and (max-width:640px){
  578.                 .image-comparison img { max-height:280px;}
  579.         }
  580.         @media screen and (max-width:480px){
  581.                 .image-comparison img { max-height:230px;}
  582.         }
  583.        
  584. .section-services { padding:26px 0 90px; position:relative; background:#000 center center no-repeat; background-size:cover;  }
  585. .section-services:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#062763; opacity:0.9; z-index:0; }
  586. .section-services .container { position:relative; }
  587. .services-box { margin:34px 0 10px; display:block; }
  588. .services-box .service-icon { display:inline-block; vertical-align:middle; width:63px; height:63px; }
  589. .services-box .service-icon img { display:inline-block; vertical-align:middle; max-width:100%;}
  590. .services-box p { margin:7px 0 0px; font-size:13px; line-height:1.4; font-weight:500; font-family: 'Lato', sans-serif; }
  591.  
  592. .section-promotion { padding:75px 0;}
  593. .section-promotion .h1 { font-size:51px;}
  594. .section-promotion .lead { margin:14px 0 27px;}
  595.  
  596. .offer-box { padding:8px 30px 20px ; border: 5px dashed #DAD9D7; }
  597. .offer-box span { display:block; line-height:normal; }
  598. .offer-box .text-huge { font-size:118px; line-height:1; font-weight:bold; color:#c5b358; font-family: 'Crimson Text', Georgia, Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", serif; }
  599. .offer-box .text-head { font-size:77px; line-height:1; font-weight:300; color:#6c6c6c; font-family: 'Open Sans', sans-serif; margin:2px 0 0;}
  600. .offer-box .date { font-size:18px; line-height:1; font-weight:300; color:#6c6c6c; font-family: 'Open Sans', sans-serif; margin:6px 0 0;}
  601.  
  602.         /* Responsive style start */
  603.         @media screen and (max-width:1200px) {
  604.                 .repair-banner .banner-text { margin-left:0;}
  605.         }
  606.         @media screen and (max-width:991px) {
  607.                 .section-promotion { padding:50px 0; }
  608.                 .offer-box .text-huge { font-size: 108px; }
  609.                 .offer-box .text-head { font-size: 70px; }
  610.                 .section-promotion .h1 { font-size: 44px;}
  611.         }
  612.         @media screen and (max-width:767px) {
  613.                 .section-promotion { padding:35px 0; text-align:center; }
  614.                 .offer-box { margin-top:35px; }
  615.         }
  616.         @media screen and (max-width:640px) {
  617.                 .offer-box { border-width:4px; }
  618.                 .offer-box .text-huge { font-size: 94px;}
  619.                 .offer-box .text-head { font-size: 62px;}
  620.         }
  621.         @media screen and (max-width:580px) {
  622.                 .offer-box .text-huge { font-size: 80px;}
  623.                 .offer-box .text-head { font-size: 52px;}
  624.         }
  625.         @media screen and (max-width:480px) {
  626.                 .offer-box { padding:8px 15px 20px;}
  627.                 .offer-box .text-huge { font-size: 60px;}
  628.                 .offer-box .text-head { font-size: 38px;}
  629.                 .offer-box .date { font-size:14px;}
  630.         }      
  631.         @media screen and (max-width:380px) {
  632.                 .offer-box .text-huge { font-size: 60px;}
  633.                 .offer-box .text-head { font-size: 38px;}
  634.         }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.