API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 26th, 2019
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 20.16 KB | None | 0 0
raw download clone embed print report
  1. @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
  2.  
  3. body {
  4.   position: absolute;  
  5.   background-color: white;
  6.   width: 100%;
  7.   height: 100%;
  8.   /* margin-left: 75px;
  9.   margin-right: 75px; */
  10.   /* max-height: 10px; */
  11.   background-color: white;
  12.   /* margin: 0 10% 0 10%; */
  13.   margin: 0;
  14.   font-family: 'Montserrat', sans-serif;
  15. }
  16.  
  17. .spool_data {
  18.   width: 100%;
  19. }
  20.  
  21. .container {
  22.   padding: .8em 1.2em;
  23.   margin: 0 9.75% 0 9.5%
  24. }
  25.  
  26. .hide-dekstop {
  27.   display: none;
  28. }
  29.  
  30. header {
  31.   position: relative;
  32.   justify-content: space-between;
  33. }
  34.  
  35. .logo {
  36.   position: absolute;
  37.   top: 10px;
  38.   float: left;
  39.   width: auto;
  40.   height: 100px;
  41.   z-index: 4;
  42. }
  43.  
  44. .text_holder {
  45.   background-color: white;
  46.   float: right;
  47.   cursor: text;
  48.   margin-top: 41px;
  49.   padding: 12px 16px;
  50.   font-family: Montserrat;
  51.   font-size: 18px;
  52.   width: 41%;
  53.   height: 10%;
  54.   z-index: 1;
  55. }
  56.  
  57. .input-placeholder::-webkit-input-placeholder {
  58.   color: black;
  59.   opacity: 0.55;
  60. }
  61.  
  62. .input-placeholder-red::-webkit-input-placeholder {
  63.   color: red;
  64.   opacity: 0.75;
  65. }
  66.  
  67. .button_check {
  68.   background-color: #3D444A;
  69.   color: white;
  70.   float: right;
  71.   border: none;
  72.   cursor: pointer;
  73.   margin-top: 41px;
  74.   padding: 14px 16px;
  75.   font-family: Montserrat;
  76.   font-size: 18px;
  77.   width: 15%;
  78. }
  79.  
  80. .button_check:hover {
  81.   background-color: #777;
  82.   text-decoration: underline;
  83. }
  84.  
  85. ul {
  86.   list-style-type: none;
  87.   margin: 0;
  88.   padding: 0;
  89. }
  90.  
  91. nav ul {
  92.   height: 200px;
  93.   position: fixed;
  94.   background: rgb(36, 41, 44);
  95.   transition: transform 1s;
  96.   z-index: 7;
  97.   padding-top: 3em;
  98. }
  99.  
  100. .text_holder_list {
  101.   background-color: white;
  102.   float: right;
  103.   cursor: text;
  104.   margin-top: 41px;
  105.   padding: 12px 16px;
  106.   font-family: Montserrat;
  107.   font-size: 18px;
  108.   width: 41%;
  109.   height: 10%;
  110.   z-index: 1;
  111. }
  112.  
  113. .button_check_list {
  114.   background-color: #3D444A;
  115.   color: white;
  116.   float: right;
  117.   border: none;
  118.   cursor: pointer;
  119.   margin-top: 41px;
  120.   padding: 14px 16px;
  121.   font-family: Montserrat;
  122.   font-size: 18px;
  123.   width: 15%;
  124. }
  125.  
  126. .button_check_list:hover {
  127.   background-color: #777;
  128.   text-decoration: underline;
  129. }
  130.  
  131. .menu {
  132.   width: 20px;
  133.   margin-top: 35px;
  134.   float: right;
  135. }
  136.  
  137. .close-btn {
  138.     margin-bottom: 1em;
  139.     margin-top: -1.3em;
  140.     text-align: right;
  141.     padding: 0 1.4em;
  142. }
  143.  
  144. .close-btn img {
  145.     width: 25px;
  146.     cursor: pointer;
  147. }
  148.  
  149. .space {
  150.   padding-top: 100px;
  151. }
  152.  
  153. /* .production_process {
  154.   width: 100%;
  155.   height: 100vh;
  156.   margin-top: 40px;
  157.   display: flex;
  158.   box-sizing: border-box;
  159. }
  160.  
  161. .production_process .box {
  162.   width: 16.66666667%;
  163.   text-align: center;
  164.   line-height: 100vh;
  165.   flex-grow: 1;
  166.   background-size: cover;
  167.   background-position: center;
  168.   transition: 1s;
  169. }
  170.  
  171. .production_process .box h1 {
  172.   margin: 0;
  173.   padding: 0;  
  174.   line-height: 100vh;
  175.   font-size: 2em;
  176.   background: rgba(0, 0, 0, .8);
  177.   transition: .5s;
  178. }
  179.  
  180. .slide_paragraph {
  181.   margin-top: 20px;
  182.   font-size: 10px;
  183.   text-align: center;
  184.   text-transform: none;
  185.   position: relative;
  186.   margin-top: -40vh;
  187.   background: rgba(255, 255, 255, .8);
  188.   color: black;
  189.   display: none;
  190. }
  191.  
  192. .production_process .box h1 span {
  193.   background: rgba(255, 255, 255, 0);
  194.   width: 100%;
  195.   transition: 1s;
  196.   color: #FFF;
  197.   padding: 25px 20px;
  198.   text-transform: uppercase;
  199.   letter-spacing: 2px;
  200. }
  201.  
  202. .box:hover h1 span {
  203.   color: #262626;
  204.   background: rgba(255, 255, 255, .8);
  205.   letter-spacing: 10px;
  206.   box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  207. }
  208.  
  209. .box:hover h1 {
  210.   background: rgba(0, 0, 0, 0);
  211. }
  212.  
  213. .box:hover {
  214.   width: 80vw;
  215. }
  216.  
  217. .box:hover .slide_paragraph {
  218.   display: block;
  219. } */
  220.  
  221. .production_process {
  222.   width: 100%;
  223.   height: 90%;
  224.   margin-top: 40px;
  225.   display: flex;
  226.   flex-direction: column;
  227.   box-sizing: border-box;
  228. }
  229.  
  230. .production_process .box {
  231.   width: 100%;
  232.   text-align: center;
  233.   line-height: 15%;
  234.   flex-grow: 1;
  235.   background-size: cover;
  236.   background-position: center;
  237.   transition: 1s;
  238. }
  239.  
  240. .production_process .box h1 {
  241.   margin: 0;
  242.   padding: 0;  
  243.   line-height: 20vh;
  244.   font-size: 2em;
  245.   background: rgba(0, 0, 0, .8);
  246.   transition: .5s;
  247. }
  248.  
  249. /* .slide_paragraph {
  250.   font-size: 14px;
  251.   text-transform: none;
  252.   position: relative;
  253.   margin-bottom: -0.1em;
  254.   padding: 15px 0;
  255.   background: rgba(255, 255, 255, .8);
  256.   color: black;
  257.   display: none;
  258. } */
  259.  
  260. .production_process .box p {
  261.   font-size: 14px;
  262.   text-align: justify;
  263.   /* padding-left: 100px; */
  264.   margin-bottom: -0.1em;
  265.   padding: 10px 190px;
  266.   background: rgba(255, 255, 255, .8);
  267.   color: black;
  268.   display: none;
  269. }
  270.  
  271. /* .production_process .box:nth-child(2) p {
  272.   padding: 10px 500px;
  273. } */
  274.  
  275. .production_process .box h1 span {
  276.   background: rgba(255, 255, 255, 0);
  277.   width: 100%;
  278.   transition: 1s;
  279.   color: #FFF;
  280.   padding: 25px 20px;
  281.   text-transform: uppercase;
  282.   letter-spacing: 2px;
  283. }
  284.  
  285. .box:hover h1 span {
  286.   color: #262626;
  287.   background: rgba(255, 255, 255, .8);
  288.   box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  289. }
  290.  
  291. .box:hover h1 {
  292.   background: rgba(0, 0, 0, 0);
  293. }
  294.  
  295. .box:hover {
  296.   height: 60%;
  297. }
  298.  
  299. .box:hover .slide_paragraph {
  300.   display: inherit;
  301. }
  302.  
  303. .container .box:nth-child(1) {
  304.   background: url(images/slides/bg-4.jpg);
  305.   background-size: 100% 400px;  
  306. }
  307. .container .box:nth-child(2) {
  308.   background: url(images/slides/bg-2.jpg);
  309.   background-size: 100% 400px;
  310. }
  311. .container .box:nth-child(3) {
  312.   background: url(images/slides/bg-3.jpg);
  313.   background-size: 100% 400px;
  314. }
  315. .container .box:nth-child(4) {
  316.   background: url(images/slides/bg-4.jpg);
  317.   background-size: 100% 400px;
  318. }
  319. .container .box:nth-child(5) {
  320.   background: url(images/slides/bg-2.jpg);
  321.   background-size: 100% 400px;
  322. }
  323. .container .box:nth-child(6) {
  324.   background: url(images/slides/bg-3.jpg);
  325.   background-size: 100% 400px;
  326. }
  327.  
  328. .header_lines {
  329.   position: relative;
  330.   margin: 4% 0 2% 0;
  331. }
  332.  
  333. .header_production {
  334.   position: relative;
  335.   font-size: 30px;
  336.   z-index: 1;
  337.   overflow: hidden;
  338.   text-align: center;
  339.   display: block;
  340.   text-decoration: bold;
  341.   margin: 30px 0 10px;
  342.   color: black;
  343. }
  344.  
  345. .header_production:before, .header_production:after {
  346.   position: absolute;
  347.   top: 51%;
  348.   overflow: hidden;
  349.   width: 50%;
  350.   height: 1px;
  351.   opacity: 0.5;
  352.   content: '\a0';
  353.   background-color: #808080;
  354. }
  355.  
  356. .header_production:before {
  357.   margin-left: -51%;
  358.   text-align: right;
  359. }
  360.  
  361. .header_production:after {
  362.   margin-left: 1%;
  363. }
  364.  
  365. .header_data {
  366.   position: relative;
  367.   font-size: 30px;
  368.   z-index: 1;
  369.   overflow: hidden;
  370.   text-align: center;
  371.   display: block;
  372.   text-decoration: bold;
  373.   margin: 30px 0 10px;
  374.   color: black;
  375. }
  376.  
  377. .header_data:before, .header_data:after {
  378.   position: absolute;
  379.   top: 51%;
  380.   overflow: hidden;
  381.   width: 50%;
  382.   height: 1px;
  383.   opacity: 0.5;
  384.   content: '\a0';
  385.   background-color: #808080;
  386. }
  387.  
  388. .header_data:before {
  389.   margin-left: -51%;
  390.   text-align: right;
  391. }
  392.  
  393. .header_data:after {
  394.   margin-left: 1%;
  395. }
  396.  
  397. .spool_img_div {
  398.   position: relative;
  399. }
  400.  
  401. .spool_img {
  402.   float: left;
  403.   position: relative;
  404.   height: 330px;
  405.   margin: 30px 0 0;
  406.   width: auto;
  407.   overflow: hidden;
  408. }
  409.  
  410. /* .bottom-left {
  411.   position: absolute;
  412.   top: 330px;
  413.   left: 5px;
  414.   z-index: 1;
  415.   font-size: 14px;
  416.   font-family: Ubuntu;
  417. }
  418.  
  419. .bottom-right {
  420.   position: absolute;
  421.   top: 330px;
  422.   left: 370px;
  423.   z-index: 1;
  424.   font-size: 14px;
  425.   font-family: Ubuntu;
  426. } */
  427.  
  428. .centered {
  429. position: absolute;
  430. top: 185px;
  431. left: 215px;
  432. z-index: 1;
  433. font-size: 14px;
  434. font-family: Ubuntu;
  435. color: red;
  436. transform: translate(-50%, -50%);
  437. -webkit-transform: rotate(90deg);
  438. -moz-transform: rotate(90deg);
  439. -o-transform: rotate(90deg);
  440. -ms-transform: rotate(90deg);
  441. transform: rotate(90deg);
  442. }
  443.  
  444. table {
  445.   float: right;
  446.   position: relative;
  447.   width: 39.5%;
  448.   margin: 30px 0 0;
  449.   border-collapse: collapse;
  450. }
  451.  
  452. th,
  453. td {
  454.   border-bottom: 1px solid #cecfd5;
  455.   width: 10%;
  456.   padding: 7px 15px;
  457. }
  458.  
  459. td:nth-child(2) {
  460.   background: rgba(211,211,211,.1);
  461. }
  462.  
  463. thead {
  464.     border-bottom: 2.5px solid #cecfd5;
  465. }
  466.  
  467. .column_attribute {
  468.     font-size: 17px;
  469.     text-align: left;
  470. }
  471.  
  472. .column_value {
  473.     font-size: 17px;
  474.     background: rgba(211,211,211,.1);
  475.     text-align: right;
  476. }
  477.  
  478. .attribute_value {
  479.   text-align: right;
  480.   font-size: 17px;
  481. }
  482.  
  483. .diameter_name,
  484.  .material_name,
  485.  .color_name,
  486.  .mean_name,
  487.  .ovality_name,
  488.  .deviation_name,
  489.  .temperature_name,
  490.  .date_name {
  491.   font-size: 17px;
  492.   text-align: left;
  493.   color: #395870;
  494.   display: block;
  495. }
  496.  
  497. .diameter_name:hover,
  498.  .material_name:hover,
  499.  .color_name:hover,
  500.  .mean_name:hover,
  501.  .ovality_name:hover,
  502.  .deviation_name:hover,
  503.  .temperature_name:hover,
  504.  .date_name:hover {
  505.     cursor: help;
  506. }
  507.  
  508. .extra-text_value, .extra-text_ral {
  509.   color: #7c7c80;
  510.   font-size: 15px;
  511. }
  512.  
  513. .extra-text_ral:hover {
  514.     cursor: help;
  515. }
  516.  
  517. title {
  518.     position: relative;
  519.     top: 40px;
  520. }
  521.  
  522. .header_graph_div {
  523.   /* padding: .8em 1.2em; */
  524.   margin-left: 0;
  525.   margin-right: 0;
  526. }
  527.  
  528. .header_graph {
  529.   position: relative;
  530.   font-size: 30px;
  531.   z-index: 1;
  532.   overflow: hidden;
  533.   text-align: center;
  534.   display: block;
  535.   margin: 410px 0 -1.5em;
  536.   color: black;
  537. }
  538.  
  539. .header_graph:before, .header_graph:after {
  540.   position: absolute;
  541.   top: 51%;
  542.   overflow: hidden;
  543.   width: 50%;
  544.   height: 1px;
  545.   opacity: 0.5;
  546.   content: '\a0';
  547.   background-color: #808080;
  548. }
  549.  
  550. .header_graph:before {
  551.   margin-left: -51%;
  552.   text-align: right;
  553. }
  554.  
  555. .header_graph:after {
  556.   margin-left: 1%;
  557. }
  558.  
  559. .svg-container {
  560.     display: inline-block;
  561.     position: relative;
  562.     width: 100%;
  563.     margin: 50px 0 0;
  564.     padding-bottom: 20%;
  565.     vertical-align: top;
  566.     overflow: hidden;
  567. }
  568.  
  569. .svg-content-responsive {
  570.     display: inline-block;
  571.     position: absolute;
  572.     top: 10px;
  573.     left: 0;
  574. }
  575.  
  576. .axis path,
  577. .axis line {
  578.     fill: lightgrey;
  579.     opacity: 0;
  580.     stroke: grey;
  581.     stroke-width: 1;
  582. }
  583.  
  584. .line {
  585.     fill: none;
  586.     stroke: #0DB7CB;
  587.     opacity: 0.5;
  588.     stroke-width: 3px;
  589. }
  590.  
  591. .area {
  592.     fill: lightgrey;
  593.     opacity: 0.5;
  594.     stroke: grey;
  595.     stroke-width: 1;
  596. }
  597.  
  598. .tick text {
  599.     font-size: 12px;
  600. }
  601.  
  602. .tick line {
  603.     opacity: 0.2;
  604. }
  605.  
  606. .overlay {
  607.   fill: none;
  608.   pointer-events: all;
  609.   opacity: 0;
  610. }
  611.  
  612. .focus circle {
  613.   fill: none;
  614.   stroke: steelblue;
  615. }
  616.  
  617. .focus text {
  618.   fill: none;
  619.   font-size: 12px;
  620. }
  621.  
  622. .initial-footer {
  623.   position: relative;
  624.   width: 100%;
  625.   bottom: 0;
  626. }
  627.  
  628. .footer-container {
  629.   width: 100%;
  630.   background: #3D444A;
  631.   color: #fff;
  632.   padding: 1em 0 0.1em;
  633.   bottom: 0;
  634.   margin-top: 2%;
  635.   /* border-top-right-radius: 40px; */
  636.   text-align: center;
  637.   /* transform: skewY(2deg);  */
  638. }
  639.  
  640. .logo-footer {
  641.   width: 200px;
  642. }
  643.  
  644. p {
  645.   color: #fff;
  646.   font-size: .9em;
  647.   line-height: 1.6em;
  648. }
  649.  
  650. @media only screen and (max-width: 1024px) {
  651.   .hide-dekstop {
  652.     display: block;
  653.   }
  654.  
  655.   .hide-mobile {
  656.     display: none;
  657.   }
  658.  
  659.   .logo {
  660.     height: 50px;
  661.     position: absolute;
  662.     left: -20%;
  663.   }
  664.  
  665.   .menu {
  666.     width: 15px;
  667.     margin-right: -20%;
  668.   }
  669.  
  670.   .close-btn img {
  671.     width: 20px;
  672.     margin-top: 25px;
  673.     margin-right: -32%;
  674.     cursor: pointer;
  675.   }
  676.  
  677.   .text_holder_list {
  678.     margin-top: 3em;
  679.   }
  680.  
  681.   .button_check_list {
  682.     margin-top: 3em;
  683.   }
  684.  
  685.   nav ul {
  686.     position: fixed;
  687.     width: 35%;
  688.     top: 0;
  689.     right: 0;
  690.     text-align: left;
  691.     background: rgb(36, 41, 44);
  692.     height: 50%;
  693.     z-index: 7;
  694.     padding-top: 2.5em;
  695.     margin-top: 0;
  696.     margin-bottom: 0;
  697.   }
  698.  
  699.   .close-btn {
  700.     margin-bottom: 1em;
  701.     margin-top: -1.3em;
  702.     text-align: right;
  703.     padding: 0 1.4em;
  704.   }
  705.  
  706.   .button_check_list {
  707.     position: absolute;
  708.     left: 0;
  709.     display: block;
  710.     top: 21%;    
  711.     height: 10%;
  712.     padding: 0;
  713.     /* padding: .5em 0; */
  714.     /* margin-right: 0%; */
  715.     /* float: center; */
  716.     width: 100%;
  717.   }
  718.  
  719.   .text_holder_list {
  720.     position: absolute;
  721.     padding: 0;
  722.     left: 0;
  723.     width: 100%;
  724.     display: block;
  725.     text-align: center;
  726.     top: 10%;
  727.     /* padding-left: 10.5%; */
  728.   }
  729.  
  730.   .initial-footer {
  731.     position: relative;
  732.     width: 100%;
  733.     bottom: 0;
  734.   }
  735.  
  736.   .footer-container {
  737.     position: relative;
  738.     width: 100%;
  739.     background: #3D444A;
  740.     color: #fff;
  741.     padding: 0.1em 0 0;
  742.     bottom: 0;
  743.     margin-top: 2%;
  744.     /* border-top-right-radius: 40px; */
  745.     text-align: center;
  746.     /* transform: skewY(2deg);  */
  747.   }
  748.  
  749.   .address {
  750.     font-size: 9px;
  751.     margin-bottom: 0;
  752.   }
  753.  
  754.   .logo-footer {
  755.     width: 100px;
  756.   }
  757.  
  758.   @media only screen and (min-width: 300px) {    
  759.     .logo {
  760.       height: 60px;
  761.       position: absolute;
  762.       left: -18%;
  763.     }
  764.  
  765.     .menu {
  766.       width: 20px;
  767.       margin-right: -10%;
  768.     }
  769.  
  770.     .close-btn img {
  771.       width: 25px;
  772.       margin-top: 25px;
  773.       margin-right: 5%;
  774.       cursor: pointer;
  775.     }
  776.  
  777.     .text_holder_list {
  778.       margin-top: 3em;
  779.     }
  780.  
  781.     .button_check_list {
  782.       margin-top: 3em;
  783.     }
  784.  
  785.     .initial-footer {
  786.       position: relative;
  787.       width: 100%;
  788.       bottom: 0;
  789.     }
  790.    
  791.     .footer-container {
  792.       position: relative;
  793.       width: 100%;
  794.       background: #3D444A;
  795.       color: #fff;
  796.       padding: 0.1em 0 0;
  797.       bottom: 0;
  798.       margin-top: 2%;
  799.       /* border-top-right-radius: 40px; */
  800.       text-align: center;
  801.       /* transform: skewY(2deg);  */
  802.     }
  803.  
  804.     .address {
  805.       font-size: 10px;
  806.       margin-bottom: 0;
  807.     }
  808.  
  809.     .logo-footer {
  810.       width: 125px;
  811.     }
  812.   }
  813.  
  814.   @media only screen and (min-width: 350px) {
  815.     nav ul {
  816.       position: fixed;
  817.       width: 45%;
  818.       top: 0;
  819.       right: 0;
  820.       text-align: left;
  821.       background: rgb(36, 41, 44);
  822.       height: 50%;
  823.       z-index: 7;
  824.       padding-top: 2.5em;
  825.       margin-top: 0;
  826.       margin-bottom: 0;
  827.     }
  828.   }
  829.  
  830.   @media only screen and (min-width: 400px) {
  831.     .logo {
  832.       height: 75px;
  833.       position: absolute;
  834.       left: -15%;
  835.     }
  836.  
  837.     .menu {
  838.       width: 25px;
  839.       margin-right: -10%;
  840.       margin-top: 45px;
  841.     }
  842.  
  843.     .close-btn img {
  844.       width: 30px;
  845.       margin-top: -2px;
  846.       margin-right: 3%;
  847.       cursor: pointer;
  848.     }
  849.  
  850.     nav ul {
  851.       position: fixed;
  852.       width: 50%;
  853.       top: 0;
  854.       right: 0;
  855.       text-align: left;
  856.       background: rgb(36, 41, 44);
  857.       height: 50%;
  858.       z-index: 7;
  859.       padding-top: 2.5em;
  860.       margin-top: 35px;
  861.       margin-bottom: 0;
  862.     }
  863.  
  864.     .text_holder_list {
  865.       margin-top: 4em;
  866.     }
  867.  
  868.     .button_check_list {
  869.       margin-top: 4em;
  870.     }
  871.  
  872.     .initial-footer {
  873.       position: relative;
  874.       width: 100%;
  875.       bottom: 0;
  876.     }
  877.    
  878.     .footer-container {
  879.       position: relative;
  880.       width: 100%;
  881.       background: #3D444A;
  882.       color: #fff;
  883.       padding: 0.1em 0 0;
  884.       bottom: 0;
  885.       margin-top: 2%;
  886.       /* border-top-right-radius: 40px; */
  887.       text-align: center;
  888.       /* transform: skewY(2deg);  */
  889.     }
  890.  
  891.     .address {
  892.       font-size: 11px;
  893.       margin-bottom: 0;
  894.     }
  895.  
  896.     .logo-footer {
  897.       width: 150px;
  898.     }
  899.   }
  900.  
  901.   @media only screen and (min-width: 475px) {
  902.     nav ul {
  903.       position: fixed;
  904.       width: 50%;
  905.       top: 0;
  906.       right: 0;
  907.       text-align: left;
  908.       background: rgb(36, 41, 44);
  909.       height: 50%;
  910.       z-index: 7;
  911.       padding-top: 2.5em;
  912.       margin-top: 35px;
  913.       margin-bottom: 0;
  914.     }
  915.  
  916.     .close-btn img {
  917.       width: 30px;
  918.       margin-top: -3px;
  919.       margin-right: 3%;
  920.       cursor: pointer;
  921.     }
  922.   }
  923.  
  924.   @media only screen and (min-width: 500px) {  
  925.     .logo {
  926.       height: 100px;
  927.       position: absolute;
  928.       left: -15%;
  929.     }
  930.  
  931.     .menu {
  932.       width: 30px;
  933.       margin-right: -10%;
  934.       margin-top: 60px;
  935.     }
  936.  
  937.     .close-btn img {
  938.       width: 35px;
  939.       margin-top: -2px;
  940.       margin-right: 3%;
  941.       cursor: pointer;
  942.     }
  943.  
  944.     nav ul {
  945.       position: fixed;
  946.       width: 45%;
  947.       top: 0;
  948.       right: 0;
  949.       text-align: left;
  950.       background: rgb(36, 41, 44);
  951.       height: 50%;
  952.       z-index: 7;
  953.       padding-top: 2.5em;
  954.       margin-top: 50px;
  955.       margin-bottom: 0;
  956.     }
  957.  
  958.     .text_holder_list {
  959.       margin-top: 5em;
  960.     }
  961.  
  962.     .button_check_list {
  963.       margin-top: 5em;
  964.     }
  965.  
  966.     .initial-footer {
  967.       position: relative;
  968.       width: 100%;
  969.       bottom: 0;
  970.     }
  971.    
  972.     .footer-container {
  973.       position: relative;
  974.       width: 100%;
  975.       background: #3D444A;
  976.       color: #fff;
  977.       padding: 0.1em 0 0;
  978.       bottom: 0;
  979.       margin-top: 2%;
  980.       /* border-top-right-radius: 40px; */
  981.       text-align: center;
  982.       /* transform: skewY(2deg);  */
  983.     }
  984.  
  985.     .address {
  986.       font-size: 12px;
  987.       margin-bottom: 0;
  988.     }
  989.  
  990.     .logo-footer {
  991.       width: 175px;
  992.     }
  993.   }
  994.  
  995.   @media only screen and (min-width: 550px) {
  996.     .hide-mobile {
  997.       display: block;
  998.     }
  999.  
  1000.     .hide-dekstop {
  1001.       display: none;
  1002.     }
  1003.    
  1004.     .logo {
  1005.       left: 0;
  1006.       margin-left: -10%;
  1007.       height: 75px;
  1008.       position: absolute;
  1009.     }
  1010.  
  1011.     /* nav ul {
  1012.       display: none;
  1013.     } */
  1014.  
  1015.     .text_holder {
  1016.       position: relative;
  1017.       float: right;
  1018.       width: 36%;
  1019.       height: 3px;
  1020.       font-size: 10px;
  1021.       text-align: left;
  1022.       padding-left: 2%;
  1023.       padding-right: 2%;
  1024.       border-style: solid;
  1025.       border-color: #3D444A;
  1026.       border-width: 1.5px;
  1027.       border-top-left-radius: 10%;
  1028.       border-bottom-left-radius: 10%;
  1029.       -webkit-border-top-left-radius: 10%;
  1030.       -webkit-border-bottom-left-radius: 10%;
  1031.       -moz-border-top-left-radius: 10%;
  1032.       -moz-border-bottom-left-radius: 10%;
  1033.     }  
  1034.  
  1035.     .button_check {
  1036.         position: relative;
  1037.         float: right;
  1038.         text-align: center;
  1039.         width: 15%;
  1040.         height: 30px;
  1041.         margin-right: -10%;
  1042.         font-size: 10px;
  1043.         padding-top: 0.9em;
  1044.         padding-left: 0.2em;
  1045.         padding-right: 0.2em;
  1046.         border-top-right-radius: 10%;
  1047.         border-bottom-right-radius: 10%;
  1048.         -webkit-border-top-right-radius: 10%;
  1049.         -webkit-border-bottom-right-radius: 10%;
  1050.         -moz-border-top-right-radius: 10%;
  1051.         -moz-border-bottom-right-radius: 10%;
  1052.     }
  1053.  
  1054.     .initial-footer {
  1055.       position: relative;
  1056.       width: 100%;
  1057.       bottom: 0;
  1058.     }
  1059.    
  1060.     .footer-container {
  1061.       position: relative;
  1062.       width: 100%;
  1063.       background: #3D444A;
  1064.       color: #fff;
  1065.       padding: 0.1em 0 0;
  1066.       bottom: 0;
  1067.       margin-top: 2%;
  1068.       /* border-top-right-radius: 40px; */
  1069.       text-align: center;
  1070.       /* transform: skewY(2deg);  */
  1071.     }
  1072.  
  1073.     .address {
  1074.       font-size: 12px;
  1075.       margin-bottom: 0;
  1076.     }
  1077.  
  1078.     .logo-footer {
  1079.       width: 150px;
  1080.     }
  1081.   }
  1082.  
  1083.   @media only screen and (min-width: 750px) {
  1084.     .logo {
  1085.       left: 0;
  1086.       margin-left: -10%;
  1087.       height: 100px;
  1088.       position: absolute;
  1089.     }
  1090.    
  1091.     .text_holder {
  1092.       background-color: white;
  1093.       float: right;
  1094.       cursor: text;
  1095.       margin-top: 41px;
  1096.       padding: 12px 16px;
  1097.       font-family: Montserrat;
  1098.       font-size: 18px;
  1099.       width: 41%;
  1100.       height: 10%;
  1101.       z-index: 1;
  1102.     }
  1103.  
  1104.     .button_check {
  1105.       background-color: #3D444A;
  1106.       color: white;
  1107.       float: right;
  1108.       border: none;
  1109.       cursor: pointer;
  1110.       margin-top: 41px;
  1111.       padding: 14px 16px 14px 12px;
  1112.       font-family: Montserrat;
  1113.       font-size: 18px;
  1114.       width: 15%;
  1115.       height: 49px;
  1116.     }
  1117.  
  1118.     .address {
  1119.       font-size: 14px;
  1120.       margin-bottom: 0;
  1121.     }
  1122.  
  1123.     .logo-footer {
  1124.       width: 200px;
  1125.     }
  1126.   }
  1127. }
  1128.  
  1129. /* .footer-container .container {
  1130.   transform: skewY(-2deg);
  1131. } */
  1132.  
  1133. /* .footer-container:before {
  1134.   content: "";
  1135.   width: 40px;
  1136.   height: 40px;
  1137.   background-color: #3D444A;
  1138.   position: absolute;
  1139.   top: -39px;
  1140.   left: 0;
  1141.   z-index: -2;
  1142. }
  1143.  
  1144. .footer-container:after {
  1145.   content: "";
  1146.   width: 80px;
  1147.   height: 80px;
  1148.   background-color: #fff;
  1149.   position: absolute;
  1150.   top: -80px;
  1151.   left: 0;
  1152.   border-radius: 50%;
  1153.   z-index: -1;
  1154. } */
  1155.  
  1156. /* ul.footer-links {
  1157.   margin: 0 auto;
  1158.   padding: 0 2em 0 2em;
  1159. }
  1160.  
  1161. ul.footer-links li {
  1162.   display: inline-block;
  1163. }
  1164.  
  1165. ul.footer-links li a {
  1166.   color: #9D9D9D;
  1167.   font-size: .8em;
  1168.   padding: 0 .2em;
  1169. }
  1170.  
  1171. ul.footer-links li a:hover {
  1172.   color: #fff;
  1173.   font-size: .8em;
  1174. } */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!