API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 17th, 2019
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 26.87 KB | None | 0 0
raw download clone embed print report
  1. html {
  2.     height: 100%;
  3.     box-sizing: border-box;
  4. }
  5.  
  6. *,
  7. *:before,
  8. *:after {
  9.     box-sizing: inherit;
  10. }
  11.  
  12. body {
  13.     position: relative;
  14.     padding-bottom: 10rem;
  15.     min-height: 100%;
  16.     margin: 0;
  17.     font-family: 'Open Sans', sans-serif;
  18. }
  19.  
  20.  
  21. /*----------------------------------------------------------*/
  22.  
  23.  
  24. /*Generic heading design rules*/
  25. h1 {
  26.     font-size: 40px;
  27.     font-weight: 600;
  28.     margin: 0;
  29.     color: #252525;
  30. }
  31.  
  32. h2 {
  33.     padding: 0;
  34.     margin: 0;
  35.     font-size: 28px;
  36.     font-weight: 600;
  37. }
  38.  
  39. h4 {
  40.     font-size: 22px;
  41.     font-weight: 100;
  42.     margin: 0;
  43. }
  44. /*Generic heading styles ends*/
  45.  
  46.  
  47. /*----------------------------------------------------------*/
  48.  
  49.  
  50. /*Top banner that contains logo, navigation menu and hidden hamburger menu*/
  51. .top-banner {
  52.     width: 100%;
  53.     background-color: #252525;
  54.     color: white;
  55.     display: inline-block;
  56.     margin: 0 auto -5px;
  57. }
  58.  
  59. .top-banner-content {
  60.     width: 960px;
  61.     max-width: 100%;
  62.     height: auto;
  63.     margin: auto;
  64. }
  65. /*Top banner ends*/
  66.  
  67.  
  68. /*----------------------------------------------------------*/
  69.  
  70.  
  71. /*Mobile navigation including hamburger menu*/
  72. .hamburger-menu {
  73.     margin-top: 12px;
  74.     color: white;
  75. }
  76.  
  77. .hamburger-menu a {
  78.     margin-top: 12px;
  79.     color: white;
  80. }
  81.  
  82. .hamburger-menu a:visited {
  83.     margin-top: 12px;
  84.     color: white;
  85. }
  86.  
  87. .hamburger-menu a:focus {
  88.     outline: none;
  89. }
  90.  
  91. .hbm {
  92.   width: 32px;
  93.   height: 4px;
  94.   background-color: white;
  95.   margin: 5px 0;
  96. }
  97.  
  98. .mob-top-navigation {
  99.     overflow: auto;
  100.     position: absolute;
  101.     z-index: 999999;
  102.     width: 100%;
  103. }
  104.  
  105. .mob-top-navigation a {
  106.     width: 100%;
  107.     float: left;
  108.     padding-top: 15px;
  109.     padding-bottom: 15px;
  110.     background-color: #007BFE;
  111.     color: #ffffff;
  112.     text-align: left;
  113.     padding-left: 16px;
  114.     box-sizing: border-box;
  115.     -moz-box-sizing: border-box;
  116.     -webkit-box-sizing: border-box;
  117.     text-decoration: none;
  118.     border-bottom: 1px solid #0065d1;
  119. }
  120.  
  121. .mob-top-navigation a:visited {
  122.     text-decoration: none;
  123.     color: white;
  124. }
  125.  
  126. .hbm-c {
  127.     background: none;
  128.     color: inherit;
  129.     border: none;
  130.     padding: 0;
  131.     font: inherit;
  132.     cursor: pointer;
  133.     outline: inherit;
  134. }
  135.  
  136. .fa-bars {
  137. }
  138. /*Mobile navigation end*/
  139.  
  140.  
  141. /*----------------------------------------------------------*/
  142.  
  143.  
  144. /*logo styles*/
  145. .brand-logo {
  146.     width: 300px;
  147.     float: left;
  148.     line-height: 60px;
  149.     font-size: 30px;
  150.     text-decoration: underline;
  151.     text-decoration-color: #707070;
  152.     text-decoration-style: solid;
  153. }
  154.  
  155. .brand-logo a {
  156.     text-decoration: none;
  157.     color: white;
  158. }
  159.  
  160. .brand-logo a:visited {
  161.     text-decoration: none;
  162.     color: #ffffff;
  163. }
  164. /**/
  165.  
  166.  
  167. /*----------------------------------------------------------*/
  168.  
  169.  
  170. /*Desktop navigation link styles*/
  171. .top-navigation {
  172.     float: right;
  173.     list-style-type: none;  
  174.     margin: 0;
  175.     padding: 0;
  176. }
  177.  
  178. .top-navigation a{
  179.     float: right;
  180.     list-style-type: none;  
  181.     margin: 0;
  182.     padding: 0;
  183.     text-decoration: none;
  184.     color: white;
  185. }
  186.  
  187. .top-navigation a:visited{
  188.     text-decoration: none;
  189.     color: white;
  190. }
  191.  
  192. .top-navigation a {
  193.     float: left;
  194.     display: inline;
  195.     width: 90px;
  196.     height: 60px;
  197.     margin: 0;
  198.     text-align: center;
  199.     line-height: 60px;
  200.     font-size: 14px;
  201. }
  202.  
  203. .top-navigation a:hover {
  204.     background-color: white;
  205.     color: #707070;
  206.     text-decoration: underline;
  207. }
  208. /**/
  209.  
  210.  
  211. /*----------------------------------------------------------*/
  212.  
  213.  
  214. /*Banner image - one on every page, has meaningful message across it*/
  215. .banner-image {
  216.     background-color: #445265;
  217.     background-size: cover;
  218.     position: relative;
  219.     padding: 0;
  220.     height: 400px; /*changed to 400px from 350px for desktop version, felt more impactful*/
  221.     width: 100%;
  222. }
  223.  
  224. #home-banner {
  225.     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ) , url('images/home-banner.jpg');
  226. }
  227.  
  228. #animals-banner {
  229.     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ) , url('images/animals-banner.jpg');
  230.     background-position: center;
  231. }
  232.  
  233. #climate-banner {
  234.     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ) , url('images/climate-banner.webp');
  235.     background-position: bottom;
  236. }
  237.  
  238. #resources-banner {
  239.     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ) , url('images/resources-banner.webp');
  240.     background-position: center;
  241. }
  242. /*Banner image ends*/
  243.  
  244.  
  245. /*----------------------------------------------------------*/
  246.  
  247.  
  248. /*Hero message across banner image*/
  249. .message-container {
  250.     position: absolute;
  251.     width: 100%;
  252.     height: 100%;
  253. }
  254.  
  255. .meaningful-message {  
  256.     width: 960px;
  257.     margin: auto;
  258.     padding-top: 70px;
  259.     max-width: 100%;
  260.     text-align: left;
  261.     align-content: center;
  262. }
  263.  
  264. .meaningful-message h1 {
  265.     color: white;
  266.     max-width: 100%;
  267. }
  268. /**/
  269.  
  270.  
  271. /*----------------------------------------------------------*/
  272.  
  273.  
  274. /*The first and second section of each page - that contains general dialog explaining site content*/
  275. .site-main-content {
  276.     margin: 20px auto 50px;
  277.     width: 960px;
  278.     max-width: 100%;
  279.     overflow: auto;
  280.    
  281.    
  282. }
  283. /**/
  284.  
  285.  
  286. /**/
  287. .secondary-page-generic-content {
  288.     border-top: 2px solid #000000;
  289.     padding-top: 10px;
  290.     margin: 20px auto 50px;
  291.     width: 960px;
  292.     height: auto;
  293.     max-width: 100%;
  294.     overflow: auto;
  295. }
  296.  
  297. .secondary-content-h2 {
  298.     padding: 10px;
  299. }
  300. /**/
  301.  
  302.  
  303. /*----------------------------------------------------------*/
  304.  
  305.  
  306. /*Content cards section - contains links to some external sites and displays images/text*/
  307. .content-cards-main-content {
  308.     margin: 20px auto auto;
  309.     width: 960px;
  310.     max-width: 100%;
  311.     overflow: hidden;
  312.     border-top: 2px solid #000000;
  313.     padding-top: 10px;
  314. }
  315.  
  316. /**/
  317.  
  318.  
  319. /*----------------------------------------------------------*/
  320.  
  321.  
  322. /*content-card-link-1 style*/
  323. .content-card-link-1 {
  324.     width: 32%;
  325.     height: 300px;
  326.     float: left;
  327.     border: 1px solid #000000;
  328.     color: #ffffff;
  329.     box-sizing: border-box;
  330.     -moz-box-sizing: border-box;
  331.     -webkit-box-sizing: border-box;
  332.     overflow: hidden;
  333.     background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) ), url(images/local-area-image.webp);
  334.     background-size: cover;}
  335.  
  336. .content-card-link-1:hover {
  337.     background-color: #09a31b;
  338.     background-image: none;
  339.     color: white;
  340.     opacity: 0.7;
  341. }
  342.  
  343. .content-card-link-1 a {
  344.     color: #707070
  345. }
  346.  
  347. .content-card-link-1-text {
  348.     float: left;
  349.     height: 35%;
  350. }
  351.  
  352. .content-card-link-1-text h2 {
  353.     margin-top: 20px;
  354.     margin-left: 15px;
  355. }
  356.  
  357. .content-card-link-1-text h4 {
  358.     padding-left: 15px;
  359. }
  360.  
  361. /*Content-card-link-1 style ends*/
  362.  
  363.  
  364. /*----------------------------------------------------------*/
  365.  
  366.  
  367. /*content-card-link-2 style*/
  368. .content-card-link-2 {
  369.     width: 67%;
  370.     height: 300px;
  371.     float: left;
  372.     margin-left: 9px;
  373.     border: 1px solid #000000;
  374.     color: #ffffff;
  375.     box-sizing: border-box;
  376.     -moz-box-sizing: border-box;
  377.     -webkit-box-sizing: border-box;
  378.     background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) ), url(images/foxes.webp);
  379.     background-size: cover;
  380. }
  381.  
  382. .content-card-link-2:hover {
  383.     background-color: #09a31b;
  384.     background-image: none;
  385.     color: white;
  386.     opacity: 0.7;
  387. }
  388.  
  389. .content-card-link-2 a {
  390.     color: #707070;
  391. }
  392.  
  393. .content-card-link-2-text {
  394.     width: 50%;
  395.     float: left;    
  396. }
  397.  
  398. .content-card-link-2-text h2 {
  399.     margin-left: 15px;
  400.     margin-top: 15px;
  401. }
  402.  
  403. .content-card-link-2-text h4 {
  404.    
  405.     padding-left: 15px;
  406. }
  407.  
  408. .content-card-link-2-image {
  409.     width: 50%;
  410.     height: 100%;
  411.     float: left;    
  412. }
  413. /*Content-card-link-2 style ends*/
  414.  
  415.  
  416. /*----------------------------------------------------------*/
  417.  
  418.  
  419. /*content-card-link-3 style*/
  420. .content-card-link-3 {
  421.     margin-top: 10px;
  422.     margin-bottom: 150px;
  423.     width: 960px;
  424.     float: left;
  425.     overflow: hidden;
  426.     height: 300px;;
  427.     border: 1px solid #000000;
  428.     color: #ffff;
  429.     box-sizing: border-box;
  430.     -moz-box-sizing: border-box;
  431.     -webkit-box-sizing: border-box;
  432.     background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) ), url(images/environment-image.webp);
  433.    
  434.     background-size: cover;
  435. }
  436.  
  437. .content-card-link-3:hover {
  438.     background-color: #09a31b;
  439.     background-image: none;
  440.     color: white;
  441.     opacity: 0.7;
  442.    
  443. }
  444.  
  445. .content-card-link-3 a {
  446.     color: #707070;
  447. }
  448.  
  449. .content-card-link-3-text {
  450.     width: 33%;
  451.     float: left;      
  452. }
  453.  
  454. .content-card-link-3-text h2 {
  455.     margin-left: 15px;
  456.     margin-right: 15px;
  457.     margin-top: 15px;
  458. }
  459.  
  460. .content-card-link-3-text h4 {
  461.     padding-left: 15px;    
  462. }
  463.  
  464. .content-card-link-3-image {
  465.     width: 67%;
  466.     height: 100%;
  467.     float: left;
  468. }
  469. /*Content-card-link-3 style ends*/
  470.  
  471.  
  472. /*----------------------------------------------------------*/
  473.  
  474.  
  475. /*Footer content and styles*/
  476. footer {
  477.     width: 100%;
  478.     background-color: #252525;
  479.     color: white;
  480.     display: inline-block;
  481.     margin: 0 auto;
  482.     height: 150px;
  483.     position: absolute;
  484.     bottom: 0%;
  485. }
  486.  
  487. .footer-content {
  488.     max-width: 100%;
  489.     margin: auto;
  490.     display: block;
  491.     text-align: center;
  492.     padding: 20px;
  493. }
  494.  
  495. .footer-content a {
  496.     color: white;
  497.     text-decoration: none;
  498. }
  499.  
  500. .footer-content a:hover {
  501.     text-decoration: underline;
  502. }
  503. .footer-content a:visited {
  504.     color: white;
  505.     text-decoration: none;
  506. }
  507.  
  508. .social-media-icons {
  509.     fill: white;
  510.     margin: 5px;
  511. }
  512. /*Footer content and styles ends*/
  513.  
  514.  
  515. /*----------------------------------------------------------*/
  516.  
  517.  
  518. /*Animal links*/
  519. ul.contentLinks {
  520.     list-style-type:none;
  521.     padding:0;
  522.     margin: 60px auto 100px auto;
  523.     width: 960px;
  524. }
  525.  
  526. ul.contentLinks li {
  527.     width: 48%;
  528.     height: 520px;
  529.     background-color: #000000;
  530.     float: left; margin: 1%;
  531.     position: relative;
  532. }
  533.  
  534. ul.contentLinks li a {
  535.     width: 100%;
  536.     height: 100%;
  537.     display: block;
  538. }
  539.  
  540. ul.contentLinks li span {
  541.     color: #ffffff;
  542.     position: absolute;
  543.     bottom: 30px; left: 30px;
  544.     font-size:20px;
  545. }
  546.  
  547. .animal1 {  
  548.     background: url("./images/orang3.webp") no-repeat center;
  549.     background-size: 170%; -webkit-transition: all 0.5s ease-out;
  550.     -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;
  551.     -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
  552. }
  553.  
  554. .animal1:hover {
  555.     opacity: 0.8;
  556.     background-size: 180%;
  557.     -webkit-transition: all 0.5s ease;
  558.     -moz-transition: all 0.5s ease;
  559.     -o-transition: all 0.5s ease;
  560.     -ms-transition: all 0.5s ease;
  561.     transition: all 0.5s ease;
  562.     background-color:#f7710f;
  563. }
  564.  
  565. .animal2 {
  566.     background: url("./images/elephant3.webp") no-repeat center;
  567.     background-size: 190%;
  568.     -webkit-transition: all 0.5s ease-out;
  569.     -moz-transition: all 0.5s ease-out;
  570.     -o-transition: all 0.5s ease-out;
  571.     -ms-transition: all 0.5s ease-out;
  572.     transition: all 0.5s ease-out;
  573. }
  574.  
  575. .animal2:hover {
  576.     opacity: 0.8;
  577.     background-size: 200%;
  578.     -webkit-transition: all 0.5s ease;
  579.     -moz-transition: all 0.5s ease;
  580.     -o-transition: all 0.5s ease;
  581.     -ms-transition: all 0.5s ease;
  582.     transition: all 0.5s ease;
  583.     background-color:#f7710f;
  584. }
  585.  
  586. .animal3 {
  587.     background: url("./images/jaguar.jpg") no-repeat center;
  588.     background-size: 170%;
  589.     -webkit-transition: all 0.5s ease-out;
  590.     -moz-transition: all 0.5s ease-out;
  591.     -o-transition: all 0.5s ease-out;
  592.     -ms-transition: all 0.5s ease-out;
  593.     transition: all 0.5s ease-out;
  594. }
  595.  
  596. .animal3:hover {
  597.     opacity: 0.8;
  598.     background-size: 180%;
  599.     -webkit-transition: all 0.5s ease;
  600.     -moz-transition: all 0.5s ease;
  601.     -o-transition: all 0.5s ease;
  602.     -ms-transition: all 0.5s ease;
  603.     transition: all 0.5s ease;
  604.     background-color:#f7710f;
  605. }
  606.  
  607. .animal4 {
  608.     background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) ) ,url("./images/tiger.jpg") no-repeat center;
  609.     background-size: 200%;
  610.     -webkit-transition: all 0.5s ease-out;
  611.     -moz-transition: all 0.5s ease-out;
  612.     -o-transition: all 0.5s ease-out;
  613.     -ms-transition: all 0.5s ease-out;
  614.     transition: all 0.5s ease-out;
  615. }
  616.  
  617. .animal4:hover {
  618.     opacity: 0.8;
  619.     background-size: 210%;
  620.     -webkit-transition: all 0.5s ease;
  621.     -moz-transition: all 0.5s ease;
  622.     -o-transition: all 0.5s ease;
  623.     -ms-transition: all 0.5s ease;
  624.     transition: all 0.5s ease;
  625.     background-color:#f7710f;
  626. }
  627.  
  628. .animal5 {
  629.     background: url("./images/seaturt4.webp") no-repeat center;
  630.     background-size: 170%;
  631.     -webkit-transition: all 0.5s ease-out;
  632.     -moz-transition: all 0.5s ease-out;
  633.     -o-transition: all 0.5s ease-out;
  634.     -ms-transition: all 0.5s ease-out;
  635.     transition: all 0.5s ease-out;
  636. }
  637.  
  638. .animal5:hover {
  639.     opacity: 0.8;
  640.     background-size: 180%;
  641.     -webkit-transition: all 0.5s ease;
  642.     -moz-transition: all 0.5s ease;
  643.     -o-transition: all 0.5s ease;
  644.     -ms-transition: all 0.5s ease;
  645.     transition: all 0.5s ease;
  646.     background-color:#f7710f;
  647. }
  648.  
  649. .animal6 {
  650.     background: url("./images/penguin.jpg") no-repeat center;
  651.     background-size: 170%;
  652.     -webkit-transition: all 0.5s ease-out;
  653.     -moz-transition: all 0.5s ease-out;
  654.     -o-transition: all 0.5s ease-out;
  655.     -ms-transition: all 0.5s ease-out;
  656.     transition: all 0.5s ease-out;
  657. }
  658.  
  659. .animal6:hover {
  660.     opacity: 0.8;
  661.     background-size: 180%;
  662.     -webkit-transition: all 0.5s ease;
  663.     -moz-transition: all 0.5s ease;
  664.     -o-transition: all 0.5s ease;
  665.     -ms-transition: all 0.5s ease;
  666.     transition: all 0.5s ease;
  667.     background-color:#f7710f;}
  668. /*Animal links ends*/
  669.  
  670.    
  671. /*----------------------------------------------------------*/
  672.  
  673.  
  674. /*Responsive image gallery for index page*/
  675. div.gallery {
  676.     margin-bottom: 15px;
  677. }
  678.  
  679. div.gallery:hover {
  680.     -webkit-box-shadow:inset 0px 0px 0px 1px #ffffff;
  681.     -moz-box-shadow:inset 0px 0px 0px 1px #ffffff;
  682.     box-shadow:inset 0px 0px 0px 1px #ffffff;
  683.     background-color: #f7f7f7;
  684.     color: black;
  685.    
  686. }
  687.  
  688. div.gallery img {
  689.     width: 100%;
  690.     height: auto;
  691. }
  692.  
  693. div.gallery img:hover {
  694.     opacity: 0.8;
  695. }
  696.  
  697. div.desc {
  698.     padding: 15px;
  699.     text-align: center;
  700. }
  701.  
  702. * {
  703.     box-sizing: border-box;
  704. }
  705.  
  706. .responsive {
  707.     padding: 0 6px;
  708.     float: left;
  709.     width: 24.99999%;
  710.     margin-bottom: 5px;
  711. }
  712.  
  713.  
  714. .clearfix:after {
  715.   content: "";
  716.   display: table;
  717.   clear: both;
  718. }
  719. /*Responsibe image gallery ends*/
  720.  
  721.  
  722. /*generic content-containers*/
  723. .content-container-left-60 {
  724.     width: 60%;
  725.     float: left;
  726. }
  727.  
  728. .content-container-right-40 {
  729.     width: 39%;
  730.     float: left;
  731.     background-color: aliceblue;
  732.     background: url("./images/profile-picture.jpg") no-repeat center;
  733.     background-size: cover;
  734.     border: 2px solid #000;
  735.     border-radius: 20px;
  736.     height: 380px;
  737.     padding: 0;
  738.     margin: 0 auto;
  739.     position: relative;
  740. }
  741.  
  742. .content-container-right-40 h4{
  743.     color: white;
  744.     font-weight: 500;
  745.     position: absolute;
  746.     bottom: 0;
  747.     padding: 20px;
  748. }
  749.  
  750. .content-container-right-40:hover{
  751.     opacity: 0.9;
  752.    
  753.    
  754. }
  755. /*generic content containers ends*/
  756.  
  757.  
  758. /*----------------------------------------------------------*/
  759.  
  760.  
  761. /*Desktop media query to hide mobile nav bar in desktop view*/
  762. @media all and (min-width:900px) {
  763.     .hamburger-menu {display: none;}
  764.     .mob-top-navigation {display:none;}
  765. }
  766. /**/
  767.  
  768.  
  769. /*----------------------------------------------------------*/
  770.  
  771.  
  772.  
  773. /*Ipad/large mobile media query*/
  774. @media screen and (max-width: 900px) {
  775.    
  776.    
  777.     /*----------------------------------------------------------*/
  778.    
  779.    
  780.     /*Gallery responsiveness*/
  781.     .responsive { width: 49.99999%; margin: 6px 0;}
  782.     /**/
  783.    
  784.    
  785.     /*----------------------------------------------------------*/
  786.    
  787.    
  788.     /*--Top banner contents--*/
  789.  
  790.     /*Mobile navigation*/
  791.     .top-navigation {display: none;}
  792.     .hamburger-menu {display: block; float: left; ; margin-left: 16px; margin-right: 16px; font-size: 23px;}
  793.     .mob-top-navigation {display: block;}
  794.     .hbm {width: 25px; height:3px;}
  795.     /**/
  796.    
  797.     /*Mobile logo*/
  798.     .brand-logo {margin: auto; font-size: 20px; border-left: 1px solid #707070; padding-left: 15px; line-height: 50px;}
  799.     /**/
  800.    
  801.     /*--Top banner contents ends--*/
  802.    
  803.    
  804.     /*----------------------------------------------------------*/
  805.    
  806.    
  807.     /*Banner images*/
  808.     .banner-image {height: 250px;}
  809.    
  810.     .message-container { position: relative; width: 90%; margin: 0 auto auto;}
  811.     .meaningful-message h1 {font-size: 24px;}
  812.     .meaningful-message {margin-left: 16px; width: 90%; padding-top: 2em;}
  813.     /*Banner images ends*/
  814.    
  815.    
  816.     /*----------------------------------------------------------*/
  817.    
  818.    
  819.     /*Primary content sections on page, including the header styling*/
  820.     .site-main-content {width: 90%; margin-top: 20px; margin-bottom: 20px;}
  821.     .secondary-page-generic-content {width: 90%;}
  822.    
  823.     .site-main-content h1 {width: 100%; font-size: 28px; text-align: center; }
  824.     /*Primary content sections ends*/
  825.    
  826.    
  827.     /*generic content-containers*/
  828.     .content-container-left-60 {width: 100%;}
  829.     .content-container-right-40 {width: 100%; height: 300px;}
  830.     /*generic content containers ends*/
  831.    
  832.    
  833.     /*----------------------------------------------------------*/
  834.    
  835.  
  836.     /*--Resources content cards section for mobile--*/    
  837.     .content-cards-main-content {width: 90%; margin: auto;}
  838.    
  839.     /*Resources cards header styles*/
  840.     .content-cards-main-content h1 {width: 90%; font-size: 28px; text-align: center; margin: auto auto 20px; border-bottom: 1px solid #707070; border-bottom-width:medium;}
  841.     .content-cards-main-content h2 {font-size: 24px;}
  842.     .content-cards-main-content h4 {font-size: 20px;}
  843.     /*Resources cards header styles ends*/
  844.    
  845.     /*Resources content cards links*/
  846.     .content-card-link-1 {width: 100%; float: none; height: 400px; margin: auto auto 20px; border: 0; overflow: hidden; border-bottom: 0 solid #707070; background-color: #edf6ff;}
  847.     .content-card-link-1:hover {background-image: url(images/local-area-image.webp); opacity: 1; color: white;}
  848.     .content-card-link-1-text {width: 100%; margin-left: 16px; overflow: auto; height: 150px;}
  849.     .content-card-link-1-text h4 {margin: 0; padding: 0;}
  850.     .content-card-link-1-text h2 {margin-left: 0;}
  851.     .content-card-link-1-image {height: auto;}
  852.    
  853.     .content-card-link-2 {width: 100%; float: none; height: 400px; margin: auto auto 20px; border: 0; overflow: hidden; border-bottom: 0 solid #707070; background-color: #edf6ff;}
  854.     .content-card-link-2:hover {background-image: url(images/foxes.webp); opacity: 1; color: white;}
  855.     .content-card-link-2-text {width: 90%; margin-left: 16px; height: 150px;}
  856.     .content-card-link-2-text h4 {margin: 0; padding: 0;}
  857.     .content-card-link-2-text h2 {margin-left: 0;}
  858.     .content-card-link-2-image {width: 100%; height: auto;}
  859.    
  860.     .content-card-link-3 {width: 100%; float: none; height: 400px; margin: auto auto 20px; border: 0; overflow: hidden; border-bottom: 0 solid #707070; background-color: #edf6ff;}
  861.     .content-card-link-3:hover {background-image: url(images/environment-image.webp); opacity: 1; color: white;}
  862.     .content-card-link-3-text {width: 100%; margin-left: 16px; height: 150px;}
  863.     .content-card-link-3-text h4 {margin: 0; padding: 0;}
  864.     .content-card-link-3-text h2 {margin-left: 0;}
  865.     .content-card-link-3-image {width: 100%; float: left; overflow: hidden; margin: 0 0 20px; height: auto;}    
  866.     /*Resources content cards links ends*/
  867.    
  868.     /*--Resources content cards section ends--*/
  869.    
  870.    
  871.     /*----------------------------------------------------------*/
  872.    
  873.        
  874.     /*Animals content card links*/
  875.     ul.contentLinks { width:90%; margin: 40px 0 60px 5%; }
  876.     ul.contentLinks li { height:400px; }
  877.     .animal1 {background-size: cover;}
  878.     .animal1:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  879.     .animal2 {background-size: cover;}
  880.     .animal2:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  881.     .animal3 {background-size: cover;}
  882.     .animal3:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  883.     .animal4 {background-size: cover;}
  884.     .animal4:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  885.     .animal5 {background-size: cover;}
  886.     .animal5:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  887.     .animal6 {background-size: cover;}
  888.     .animal6:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  889.     /*Animals content card ends*/
  890.    
  891.    
  892.     /*----------------------------------------------------------*/
  893. }
  894.  
  895. /*Ipad/large mobile media query ends*/
  896.  
  897.  
  898.  
  899.  
  900.  
  901. /*Small mobile device media query*/
  902. @media screen and (max-width: 400px) {
  903.    
  904.     /*----------------------------------------------------------*/
  905.    
  906.    
  907.     /*Gallery responsiveness*/
  908.     .responsive {width: 100%; }
  909.     /**/
  910.    
  911.    
  912.     /*----------------------------------------------------------*/
  913.    
  914.    
  915.     /*--Top banner contents--*/
  916.    
  917.     /*Mobile navigation*/
  918.     .top-navigation {display: none;}
  919.     .hamburger-menu {display: block; float: left; ; margin-left: 16px; margin-right: 16px; font-size: 23px;}
  920.     .hbm {width: 25px; height:3px;}
  921.     /**/
  922.    
  923.     /*top banner styles*/
  924.     .brand-logo {margin: auto; font-size: 15px; border-left: 1px solid #707070; padding-left: 15px; line-height: 50px; width: 70%;}
  925.     .top-banner {height: 50px;}
  926.     .top-banner-content {float: none;}
  927.     /**/
  928.    
  929.     /*--Top banner contents ends--*/
  930.    
  931.    
  932.     /*----------------------------------------------------------*/
  933.    
  934.    
  935.     /*Banner images*/
  936.     .banner-image {height: 350px;}
  937.    
  938.     .meaningful-message h1 {font-size:28px;}
  939.     /*Banner images ends*/
  940.    
  941.    
  942.     /*----------------------------------------------------------*/
  943.        
  944.    
  945.     /*Primary content sections on page, including the header styling*/
  946.     .site-main-content h1 {width: 100%; font-size: 28px; text-align: center; padding-bottom: 10px;}
  947.     .secondary-content-h2 {text-align: center;}
  948.     /*Primary content sections ends*/
  949.    
  950.    
  951.     /*----------------------------------------------------------*/
  952.    
  953.    
  954.     /*--Resources content cards section for mobile--*/  
  955.     .content-cards-main-content {width: 90%; margin: auto;}
  956.    
  957.     /*Resources cards header styles*/
  958.     .content-cards-main-content h1 {width: 90%; font-size: 28px; text-align: center; margin: auto auto 20px; border-bottom: 1px solid #707070; border-bottom-width:medium;}
  959.     .content-cards-main-content h2 {font-size: 24px;}
  960.     .content-cards-main-content h4 {font-size: 20px;}
  961.     /*Resources cards header styles ends*/
  962.    
  963.    
  964.     /*Resources content cards links*/
  965.     .content-card-link-1 {height: 400px; margin-bottom: 10px;}
  966.     .content-card-link-1:hover {background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) ), url(images/local-area-image.webp); opacity: 1; color: white;}
  967.     .content-card-link-1-text {height:auto; line-height: 50px}
  968.     .content-card-link-1 h2 {margin-top: 0;}
  969.     .content-card-link-1-image {display: none;}
  970.    
  971.     .content-card-link-2 {height: 400px; margin-bottom: 10px}
  972.     .content-card-link-2:hover {background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) ), url(images/foxes.webp); opacity: 1; color: white;}
  973.     .content-card-link-2-text {height:auto; line-height: 50px}
  974.     .content-card-link-2 h2 {margin-top: 0;}
  975.     .content-card-link-2-image {display: none;}
  976.    
  977.     .content-card-link-3 {height: 400px;}
  978.     .content-card-link-3:hover {background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) ), url(images/environment-image.webp); opacity: 1; color: white;}
  979.     .content-card-link-3-text {height:auto; line-height: 50px}
  980.     .content-card-link-3 h2 {margin-top: 0;}
  981.     .content-card-link-3-image {display: none;}
  982.     /*Resources content cards links ends*/
  983.    
  984.     /*--Resources content cards section ends--*/
  985.    
  986.    
  987.     /*----------------------------------------------------------*/
  988.    
  989.    
  990.     /*Animals content card links*/
  991.     ul.contentLinks li { width: 100%; }
  992.    
  993.    
  994.     .animal1 {background-size: cover;}
  995.     .animal1:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  996.     .animal2 {background-size: cover;}
  997.     .animal2:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  998.     .animal3 {background-size: cover;}
  999.     .animal3:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  1000.     .animal4 {background-size: cover;}
  1001.     .animal4:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  1002.     .animal5 {background-size: cover;}
  1003.     .animal5:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  1004.     .animal6 {background-size: cover;}
  1005.     .animal6:hover {  opacity: 1; background-size: cover; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -o-transition: all 0s ease; -ms-transition: all 0s ease; transition: all 0s ease; background-color:#f7710f;}
  1006.     /*Animals content card ends*/
  1007.    
  1008.     /*----------------------------------------------------------*/
  1009. }
  1010. /*Small mobile device media query ends*/
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!