×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

SAFE Final CSS merge

0
0
 
0
Language: CSS
Posted by: Mike MacDonald
Added: Jun 28, 2017 11:53 PM
Views: 2393
Tags: no tags
  1. html,body {
  2.         font-family: 'Source Sans Pro', sans-serif !important;
  3. }
  4. @font-face {
  5.         font-family: 'Caveat Brush';
  6.         font-style: normal;
  7.         font-weight: 400;
  8.         src: local('Caveat Brush'), local('CaveatBrush-Regular'), url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKsz0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
  9.         unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  10. }
  11. @font-face {
  12.         font-family: 'Caveat Brush';
  13.         font-style: normal;
  14.         font-weight: 400;
  15.         src: local('Caveat Brush'), local('CaveatBrush-Regular'), url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKs-gdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  16.         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  17. }
  18. .w3-navbar {
  19.         display: flex;
  20.         justify-content: center;
  21. }
  22. .menu-dropdown {
  23.         width: 450px;
  24.         padding: 20px !important;
  25. }
  26. .menu-dropdown a {
  27.         display: inline !important;
  28. }
  29. .dropdown-icon {
  30.         width: 32px;
  31. }
  32. .nav-section {
  33.         width: 1360px;
  34.         margin: 0 auto;
  35.         text-align: center;
  36. }
  37. .header {
  38.         height: 90px;
  39. }
  40. .w3-opennav {
  41.         color: orange;
  42.         font-size: 20px;
  43.         margin-left: 10px;
  44. }
  45. .youthLogo {
  46.         margin-right: 40px;
  47.         width: 250px;
  48.         padding: 18px 10px 10px 10px;
  49. }
  50. #youthLogoSmall {
  51.         width: 122px;
  52.         height: 36px;
  53.         margin-top: 10px;
  54.         margin-bottom: 10px;
  55. }
  56. #logoHover:hover {
  57.         background-color: transparent;
  58. }
  59. .flip-menu {
  60.         margin-bottom: 5px;
  61. }
  62. .main-top-nav {
  63.         display: none;
  64. }
  65. .main-top-nav .flip-button img {
  66.         margin: 20px;
  67.         padding: 0;
  68.         text-align: center;
  69.         border: 2px solid white !important;
  70.         border-radius: 34px !important;
  71. }
  72. .main-top-nav .flip-button a {
  73.         padding: 0;
  74.         height: 130px;
  75.         margin-bottom: 10px;
  76.         padding-bottom: 15px;
  77. }
  78. .navText {
  79.         text-align: center;
  80.         color: #ffffff;
  81.         margin-top: -10px;
  82. }
  83. .twoLineText {
  84.         margin-top: -20px;
  85. }
  86. .twoLineTextSmall {
  87.         margin-top: -15px;
  88. }
  89. .navImg {
  90.         height: 66px;
  91.         width: 70px;
  92. }
  93. .navBulletPoint {
  94.         width: 20px;
  95.         height: 20px;
  96.         border-radius: 55px;
  97. }
  98. .navLinkForMobile {
  99.         color: #888;
  100.         font-size: 20px;
  101. }
  102. .navLinkForMobile:hover {
  103.         color: black;
  104. }
  105. .topSearch {
  106.         margin-top: 40px;
  107. }
  108. .topSearch .search-cell {
  109.         float: left;
  110. }
  111. .topSearch .fa {
  112.         margin-right: 0px;
  113.         border: 1px solid #00c2f3;
  114.         opacity: 0.7;
  115.         color: #00c2f3;
  116.         padding: 4px;
  117.         padding-bottom: 7px;
  118.         border-left: none;
  119.         border-top-right-radius: 3px;
  120.         border-bottom-right-radius: 3px;
  121. }
  122. .topSearch .search-cell input {
  123.         width: 90px;
  124.         max-width: 146px;
  125.         height: 28px;
  126.         border: solid 1px #00c2f3 !important;
  127.         border-right: none !important;
  128.         opacity: 0.7;
  129.         padding-left: 6px;
  130.         border-radius: 2px;
  131.         color: #00c2f3;
  132. }
  133. #topVideo {
  134.         height: 400px;
  135.         overflow: hidden;
  136. }
  137. .slideshowStyles {
  138.         height: 400px;
  139.         overflow: hidden;
  140. }
  141. #topVideo div {
  142.         position: relative;
  143.         width: 100%;
  144.         height: 0;
  145.         padding-bottom: 56.25%;
  146. }
  147. .innerVid {
  148.         position: absolute;
  149.         top: 0;
  150.         left: 0;
  151.         width: 100%;
  152.         height: 100%;
  153. }
  154. #mobileClickToVideo {
  155.         background-image: url('/storage/app/media/Home%20page/frontPageSheep2.jpg');
  156.         position: relative;
  157.         background-repeat: no-repeat;
  158.         background-position: center center;
  159.         background-size: cover;
  160.         height: 300px;
  161. }
  162. #mobileVideoPlay:hover {
  163.         opacity: .7;
  164. }
  165. .blogWrapper {
  166.         margin-top: -10px;
  167. }
  168. .blogTitle h1 {
  169.         padding-top: 18px;
  170.         margin: 0;
  171.         background-image: url('http://safeanimalsquad.org.nz/storage/app/media/Home%20page/whatsnew-backing.svg');
  172.         background-repeat: no-repeat;
  173.         color: white;
  174.         padding-left: 30px;
  175.         height: 88px;
  176. }
  177. .blogTitleMobile h1 {
  178.         background-image: url('http://safeanimalsquad.org.nz/storage/app/media/Home%20page/whatsnew-backing.svg');
  179.         background-repeat: no-repeat;
  180.         color: white;
  181.         height: 88px;
  182.         margin: 0 auto;
  183.         text-align: center;
  184. }
  185. #HTMLBlock964 {
  186.         margin-top: 22px;
  187.         margin-bottom: 15px;
  188. }
  189. .caveatFont {
  190.         font-family: 'Caveat Brush', cursive;
  191.         font-size: 46px;
  192. }
  193. .thumbnail img {
  194.         height: 110px;
  195.         width: 115px;
  196.         margin-right: 22px;
  197.         margin-left: -25px;
  198. }
  199. h3.ccm-page-list-title {
  200.         margin: 0;
  201.         padding: 0;
  202.         font-size: 20px;
  203.         font-weight: bold;
  204. }
  205. .blog-content-block {
  206.         padding-left: 0;
  207.         margin-left: 0;
  208.         width: 340px;
  209. }
  210. .readmore {
  211.         margin-left: 0px;
  212.         float: left;
  213.         text-decoration: none;
  214.         font-weight: bold;
  215.         font-style: italic;
  216. }
  217. .ccm-page-list-title a {
  218.         text-decoration: none;
  219.         font-family: 'Source Sans Pro', sans-serif !important;
  220. }
  221. .blog-content-item {
  222.         width: 340px !important;
  223. }
  224. .blog-content-item a {
  225.         font-size: 16px;
  226.         font-style: italic;
  227.         text-decoration: none;
  228.         color: #d4007f;
  229.         font-weight: bold;
  230. }
  231. .fb_iframe_widget {
  232.         display: none !important;
  233. }
  234. .blogWrapper h1 {
  235.         font-size: 50px;
  236.         text-align: center;
  237. }
  238. .blogWrapper .subText {
  239.         font-size: 25px;
  240.         text-align: center;
  241.         color: black;
  242. }
  243. .featured-images {
  244.         display: none;
  245. }
  246. .w3-content .info {
  247.         display: none;
  248. }
  249. .poemWrapper {
  250.         text-align: center;
  251. }
  252. .blogLinks {
  253.         color: #00c2f3;
  254.         text-decoration: none;
  255.         font-weight: bold;
  256. }
  257. .kidsColouringName {
  258.         font-size: 25px !important;
  259. }
  260. .animalImageSlider {
  261.         border-radius: 5px !important;
  262.         border: solid 10px #ee721f !important;
  263. }
  264. #poemButton {
  265.         color: white;
  266.         font-size: 34px;
  267.         background-color: #ee721f;
  268.         padding: 3px 10px 3px 10px;
  269.         margin-top: 30px;
  270.         border-radius: 5px;
  271. }
  272. #poemButton:hover {
  273.         cursor: pointer;
  274.         cursor: hand;
  275. }
  276. #surveyInfo h3 {
  277.         color: black;
  278.         font-size: 40px;
  279.         font-family: 'Caveat Brush';
  280.         margin-top: -35px;
  281. }
  282. #surveyInfo #look {
  283.         color: black;
  284.         font-size: 18px;
  285.         margin-top: -10px;
  286.         margin-left: 10px;
  287. }
  288. #surveyInfo #btnLetsGo {
  289.         border: 1px solid white;
  290.         color: white;
  291.         border-radius: 5px;
  292.         padding: 5px 15px 5px 15px;
  293.         font-size: 22px;
  294.         width: 220px;
  295.         margin-left: 60px;
  296.         margin-top: 15px;
  297. }
  298. #surveyInfo #btnLetsGo:hover {
  299.         background-color: white;
  300.         color: #ee721f;
  301. }
  302. #allAboutPigs h3 {
  303.         color: white;
  304.         font-size: 40px;
  305.         font-family: 'Caveat Brush';
  306. }
  307. .midSlideArrows {
  308.         vertical-align: middle;
  309.         background-color: transparent !important;
  310.         color: white !important;
  311.         font-size: 40px !important;
  312.         border: hidden;
  313.         outline: none;
  314. }
  315. .midSlideArrows:hover {
  316.         border: none;
  317.         color: #00c2f3 !important;
  318.         cursor: pointer;
  319.         cursor: hand;
  320. }
  321. .midSlideArrows:active,.midSlideArrows:visited,.midSlideArrows:link {
  322.         border: none !important;
  323.         border: 0px !important;
  324.         border-color: transparent !important;
  325.         text-decoration: none;
  326. }
  327. .funFactsArrowLeft,.funFactsArrowLeftMobile {
  328.         z-index: 500;
  329.         width: 15px;
  330.         height: 24px;
  331.         cursor: pointer;
  332.         cursor: hand;
  333.         vertical-align: middle;
  334.         margin-top: 70px;
  335. }
  336. .funFactsArrowRight,.funFactsArrowRightMobile {
  337.         z-index: 500;
  338.         width: 15px;
  339.         height: 24px;
  340.         cursor: pointer;
  341.         cursor: hand;
  342.         vertical-align: middle;
  343.         margin-top: 70px;
  344. }
  345. #funFactsArrowRight:hover,#funFactsArrowLeft:hover {
  346.         width: 18px;
  347.         height: 27px;
  348. }
  349. .factsStyle {
  350.         margin-top: 15px;
  351.         font-size: 18px;
  352.         color: white;
  353.         font-weight: bold;
  354.         padding: 0px !important;
  355. }
  356. .mySlidesMobile .factsStyle {
  357.         font-size: 18px;
  358.         margin-top: 20px;
  359.         color: white;
  360.         padding: 0px !important;
  361. }
  362. .widget-container {
  363.         max-width: 300px;
  364. }
  365. .funFactsBackground {
  366.         width: 410px;
  367.         height: 328px;
  368.         background-image: url('/storage/app/media/Home%20page/funFactsSmall.svg');
  369.         background-repeat: no-repeat;
  370.         background-position: center center;
  371.         margin-top: 5px !important;
  372.         margin-left: 60px !important;
  373. }
  374. .funFactsBackgroundMobile {
  375.         width: 400px;
  376.         height: 328px;
  377.         background-image: url('/storage/app/media/Home%20page/funFactsSmall.svg');
  378.         background-repeat: no-repeat;
  379.         background-position: center center;
  380.         margin-top: 5px !important;
  381.         margin-left: 0px;
  382.         position: relative !important;
  383. }
  384. .ffRoundAnimals {
  385.         position: absolute;
  386.         top: 43px;
  387.         right: 5px;
  388.         width: 110px;
  389. }
  390. .ffRoundAnimalsMobile {
  391.         position: absolute;
  392.         top: 43px;
  393.         right: 0px;
  394.         width: 110px;
  395. }
  396. .slideWrapper {
  397.         height: 100%;
  398.         width: 100%;
  399.         position: relative;
  400.         overflow: hidden;
  401. }
  402. .mySlides,.mySlidesMobile {
  403.         height: 100%;
  404. }
  405. .mySlides h3,.mySlidesMobile h3 {
  406.         color: #000000;
  407.         padding-top: 0px;
  408.         margin-left: -100px;
  409.         margin-top: 25px;
  410.         font-family: 'Caveat Brush', cursive;
  411.         font-size: 46px;
  412.         z-index: 60;
  413. }
  414. .shrink {
  415.         font-weight: bold;
  416.         -webkit-transform: scale(0.8);
  417.         -moz-transform: scale(0.8);
  418.         -ms-transform: scale(0.8);
  419.         transform: scale(0.8);
  420.         text-align: left;
  421.         color: black;
  422.         background-repeat: no-repeat;
  423.         background-position: right bottom;
  424.         height: 270px;
  425.         margin: 0;
  426.         margin-left: -25px;
  427.         margin-top: -30px;
  428. }
  429. .shrink h4 {
  430.         font-weight: bold;
  431.         margin-top: 1px;
  432.         margin-top: 100px;
  433.         margin-left: -20px;
  434.         color: white !important;
  435. }
  436. .shrink input[type=checkbox].w3-check:checked+.w3-validate,input[type=radio].w3-radio:checked+.w3-validate {
  437.         color: #000000 !important;
  438. }
  439. .funFactsContainer {
  440.         z-index: 40;
  441.         margin-top: -10px;
  442.         overflow: hidden;
  443. }
  444. .funFactsContainerMobile {
  445.         z-index: 40;
  446.         margin-top: -10px;
  447.         overflow: hidden;
  448.         min-width: 390px;
  449.         margin-left: -7px;
  450.         padding-top: 20px;
  451.         transform: scale(.9,.9);
  452. }
  453. .overToYouContainer {
  454.         width: 390px;
  455.         margin: -80px 90px 20px 75px;
  456.         overflow: visible;
  457.         height: 100%;
  458.         background-image: url('/storage/app/media/Home%20page/tealBg2.png');
  459.         background-repeat: no-repeat;
  460.         z-index: 10000;
  461.         position: relative;
  462. }
  463. .overToYouTitle {
  464.         color: black;
  465.         font-family: 'Caveat Brush', cursive;
  466.         font-size: 32px;
  467.         position: absolute;
  468.         top: 40px;
  469.         right: 42px;
  470.         line-height: 21px;
  471. }
  472. .overToYouQuestion {
  473.         position: absolute;
  474.         color: white;
  475.         top: 80px;
  476.         left: 30px;
  477.         font-weight: bold;
  478.         font-size: 15px;
  479.         font-family: 'Source Sans Pro', sans-serif !important;
  480. }
  481. .circleAnimals {
  482.         margin-left: auto;
  483.         margin-right: auto;
  484. }
  485. .circleAnimals img:hover,.circleAnimals2 img:hover {
  486.         cursor: pointer;
  487.         cursor: hand;
  488. }
  489. .circleAnimals img {
  490.         padding-bottom: 20px;
  491.         padding-top: 10px;
  492.         margin-top: 20px;
  493.         width: 200px;
  494.         width: 200px;
  495. }
  496. .circleAnimals2 img {
  497.         padding-top: 30px;
  498.         width: 200px;
  499.         width: 200px;
  500. }
  501. .blueWhiteCtas {
  502.         margin: 0 auto;
  503.         max-width: 1920px;
  504.         margin-top: 30px;
  505. }
  506. .cta:hover {
  507.         cursor: pointer;
  508.         cursor: hand;
  509. }
  510. .whiteCtaPad {
  511.         height: 225px;
  512.         color: #4fc9f5 !important;
  513.         background-color: #fff;
  514. }
  515. .blueCtaPad {
  516.         height: 225px;
  517.         background-color: #4fc9f5;
  518.         color: #fff;
  519. }
  520. .cta h2,.ctaDefault h2 {
  521.         text-align: center;
  522. }
  523. .blueIcon,.whiteIcon {
  524.         margin-left: auto;
  525.         margin-right: auto;
  526.         display: block;
  527.         padding-top: 30px;
  528.         height: 120px;
  529. }
  530. .ctaHeadings {
  531.         color: #4fc9f5;
  532.         text-align: left;
  533.         margin-top: 20px;
  534.         font-family: 'Source Sans Pro', sans-serif !important;
  535. }
  536. .parentsBlock p,.teachersBlock p,.signinBlock p,.aboutBlock p {
  537.         text-align: left !important;
  538. }
  539. .signinBlock {
  540.         margin-top: 10px;
  541. }
  542. .circleShadows {
  543.         width: 208px;
  544.         height: 208px;
  545.         box-shadow: 5px 5px 5px #ddd;
  546.         border-radius: 104px;
  547. }
  548. .side-line {
  549.         display: inline-block;
  550.         border-top: 1px solid #4fc9f5;
  551.         width: 20%;
  552.         margin-bottom: 4px;
  553. }
  554. .triangle {
  555.         display: inline-block;
  556.         height: 15px;
  557.         width: 15px;
  558.         transform: rotate(225deg);
  559.         transform-origin: center center;
  560.         border-top: 1px solid #4fc9f5;
  561.         border-left: 1px solid #4fc9f5;
  562.         margin-top: 3px;
  563.         margin-left: -3px;
  564.         margin-right: -3px;
  565.         margin-bottom: -3px;
  566. }
  567. .footer-container {
  568.         background-color: #4fc9f5;
  569.         margin-top: 35px;
  570.         max-width: 1920px;
  571.         margin: 0 auto;
  572. }
  573. .footerText {
  574.         font-family: 'Caveat Brush', cursive;
  575.         color: white;
  576.         font-size: 20px;
  577.         float: right;
  578. }
  579. .footerTextMobile {
  580.         font-family: 'Caveat Brush', cursive;
  581.         color: white;
  582.         font-size: 20px;
  583.         margin: 0 auto;
  584. }
  585. .socialLinks {
  586.         margin-top: 30px;
  587. }
  588. .socialLinks ul li a .fa {
  589.         font-size: 28px;
  590.         color: #ffffff;
  591. }
  592. .socialLinks ul li a .fa:hover {
  593.         color: #ffcc04;
  594. }
  595. .ccm-block-social-links .list-inline li {
  596.         display: inline;
  597.         margin-left: 7px;
  598. }
  599. .signupWords {
  600.         margin-left: 256px !important;
  601.         margin-top: 50px !important;
  602.         font-size: 24px;
  603.         color: white;
  604. }
  605. .formBack {
  606.         margin-left: 180px !important;
  607.         margin-top: 0px !important;
  608.         background-color: white !important;
  609.         border: 2px solid #ff6600 !important;
  610.         color: #ff6600 !important;
  611.         border-radius: 5px;
  612.         font-size: 18px;
  613.         width: 100px;
  614.         padding: 10px;
  615.         text-align: center;
  616. }
  617. .formBack:hover {
  618.         color: #ff6600 !important;
  619.         font-weight: bold;
  620.         background-color: transparent !important;
  621.         cursor: pointer;
  622.         cursor: hand;
  623. }
  624. #imgxy {
  625.         position: absolute;
  626.         transform: translate(-50%, -50%);
  627. }
  628. #animalFactsBanner {
  629.         background-image: url('/storage/app/media/Animal%20Facts%20page/hen-thin.jpg');
  630.         position: relative;
  631.         background-repeat: no-repeat;
  632.         background-position: center center;
  633.         background-size: cover;
  634.         height: 400px;
  635.         max-width: 1920px;
  636.         margin: 0 auto;
  637. }
  638. #animalFactsPolygon {
  639.         background-image: url('/storage/app/media/Animal%20Facts%20page/orangePolygon.png');
  640.         background-repeat: no-repeat;
  641.         background-position: cover;
  642.         width: 800px;
  643.         height: 414px;
  644.         margin: 0 auto;
  645.         position: absolute;
  646.         top: 0px;
  647.         left: 60;
  648.         margin-top: -10px;
  649.         overflow: hidden;
  650. }
  651. #animalFactsBannerCow {
  652.         background-image: url('/storage/app/media/Animal%20Facts%20page/cowBanner.jpg');
  653.         position: relative;
  654.         background-repeat: no-repeat;
  655.         background-position: center center;
  656.         background-size: cover;
  657.         height: 400px;
  658.         max-width: 1920px;
  659.         margin: 0 auto;
  660. }
  661. #animalFactsPolygonCow {
  662.         background-image: url('/storage/app/media/Animal%20Facts%20page/orangePolygon.png');
  663.         background-repeat: no-repeat;
  664.         background-position: cover;
  665.         width: 800px;
  666.         height: 414px;
  667.         margin: 0 auto;
  668.         position: absolute;
  669.         top: 0px;
  670.         left: 60;
  671.         margin-top: -10px;
  672.         overflow: hidden;
  673. }
  674. .cowStomachText {
  675.         font-size: 13px;
  676.         color: white;
  677.         margin-left: 15px;
  678.         margin-right: 15px;
  679.         text-align: justify;
  680. }
  681. .didYouKnowContainerCows {
  682.         width: 600px;
  683.         margin: 0 auto;
  684. }
  685. .didYouKnowImageCow img {
  686.         height: 100%;
  687.         overflow: visible;
  688.         margin-top: -150px;
  689. }
  690. #animalFactsBannerPig {
  691.         background-image: url('/storage/app/media/Animal%20Facts%20page/pigsBanner.jpg');
  692.         position: relative;
  693.         background-repeat: no-repeat;
  694.         background-position: center center;
  695.         background-size: cover;
  696.         height: 400px;
  697.         max-width: 1920px;
  698.         margin: 0 auto;
  699. }
  700. #animalFactsPolygonPig {
  701.         background-image: url('/storage/app/media/Animal%20Facts%20page/orangePolygon.png');
  702.         background-repeat: no-repeat;
  703.         background-position: cover;
  704.         width: 800px;
  705.         height: 410px;
  706.         margin: 0 auto;
  707.         position: absolute;
  708.         top: 0px;
  709.         left: 60;
  710.         margin-top: -10px;
  711.         overflow: hidden;
  712. }
  713. .didYouKnowContainerPigs {
  714.         width: 700px;
  715.         margin: 0 auto;
  716. }
  717. .animalCircleRow-FactsPage {
  718.         background-color: #ffca28;
  719.         padding-top: 20px;
  720.         max-width: 1920px;
  721.         margin: 0 auto;
  722. }
  723. .animalFactsHeader {
  724.         font-size: 60px;
  725.         margin-top: 60px;
  726.         color: #d15925;
  727.         font-weight: bold;
  728. }
  729. .animalFactsHeaderSmall {
  730.         font-size: 40px;
  731.         color: #d15925 !important;
  732.         font-weight: bold;
  733. }
  734. .greySpeechBubble {
  735.         width: 287px;
  736.         height: 176px;
  737. }
  738. .titleAnimal,.titleSpeechbubble {
  739.         margin-top: 10px;
  740. }
  741. .titleAnimal img {
  742.         margin-top: 25px;
  743. }
  744. .titleSpeechbubble {
  745.         margin-left: 40px;
  746. }
  747. .animalBlurbTitle {
  748.         font-family: 'Caveat Brush', cursive;
  749.         color: white;
  750.         font-size: 30px;
  751. }
  752. .animalBlurbText {
  753.         color: white;
  754.         padding-top: 60px;
  755.         padding-bottom: 45px;
  756.         font-size: 20px;
  757.         text-align: left;
  758. }
  759. .animalBlurbRow {
  760.         background-color: #d15925;
  761.         height: 180px;
  762.         max-width: 1920px;
  763.         margin: 0 auto;
  764. }
  765. .didYouKnowContainer {
  766.         width: 460px;
  767.         margin: 0 auto;
  768. }
  769. .didYouKnowTitle {
  770.         font-family: 'Caveat Brush', cursive;
  771.         color: black;
  772.         font-size: 30px;
  773.         text-align: left;
  774. }
  775. .didYouKnowText {
  776.         color: black;
  777.         text-align: left;
  778.         max-width: 515px;
  779.         font-size: 17px;
  780. }
  781. .didYouKnowImage {
  782.         overflow: visible;
  783. }
  784. .didYouKnowImage img {
  785.         height: 100%;
  786.         overflow: visible;
  787.         margin-top: -200px;
  788.         margin-left: 5px;
  789.         width: 300px;
  790. }
  791. .didYouKnowRow {
  792.         height: 220px;
  793.         overflow: visible;
  794. }
  795. .moreFactsContainer {
  796.         background-color: #ec722a;
  797.         margin: 0 auto;
  798.         height: 301px;
  799. }
  800. .moreFactsText {
  801.         width: 300px;
  802.         color: white;
  803.         margin: 0 auto;
  804.         text-align: left;
  805.         font-size: 17px;
  806. }
  807. .moreFactsTitle {
  808.         font-family: 'Caveat Brush', cursive;
  809.         font-size: 30px;
  810.         color: white;
  811.         padding-top: 20px;
  812. }
  813. .footerFactContainer {
  814.         background-color: #d15925;
  815.         height: 250px;
  816.         margin-bottom: -34px;
  817. }
  818. .footerFactContainer img {
  819.         text-align: center;
  820.         margin-top: 20px;
  821. }
  822.  
  823. @media only screen and (max-width:420px) {
  824.  
  825.         #middleOuterWrapper #middleWrapper {
  826.                 width: 400px !important;
  827.                 margin: 0 auto;
  828.         }
  829. }
  830.  
  831.  
  832. @media only screen and (max-width:600px) {
  833.  
  834.         #middleOuterWrapper #middleWrapper {
  835.                 width: 400px !important;
  836.                 margin: 0 auto;
  837.         }
  838.         .mobile-header-image {
  839.                 transform: scale(1.5, 1.5);
  840.         }
  841. }
  842.  
  843.  
  844. @media only screen and (min-width:980px) and (max-width:1180px) {
  845.  
  846.         #fpSlideshowWrapper {
  847.                 transform: scale(.8,.8);
  848.         }
  849. }
  850.  
  851. @font-face {
  852.         font-family: 'Caveat Brush';
  853.         font-style: normal;
  854.         font-weight: 400;
  855.         src: local('Caveat Brush'), local('CaveatBrush-Regular'), url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKsz0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
  856.         unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  857. }
  858. @font-face {
  859.         font-family: 'Caveat Brush';
  860.         font-style: normal;
  861.         font-weight: 400;
  862.         src: local('Caveat Brush'), local('CaveatBrush-Regular'), url(https://fonts.gstatic.com/s/caveatbrush/v2/_d7bgsk3hfC4DXnUEeYKs-gdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  863.         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
  864. }
  865. .blogTitle #HTMLBlock964 {
  866.         display: none !important;
  867. }
  868. .blogTitle {
  869.         margin-top: 30px;
  870. }
  871. .whatsnewblogtitle {
  872.         margin-top: 22px;
  873.         margin-bottom: 15px;
  874. }
  875. #signupBlockBackground,#signupBlockBackgroundGS {
  876.         margin-top: 20px !important;
  877. }
  878. .animalBlurbTitleMobile,.animalBlurbTitlePigsMob {
  879.         font-family: 'Caveat Brush', cursive;
  880.         color: white;
  881.         font-size: 26px;
  882.         padding-top: 16px;
  883. }
  884. .animalBlurbTextPigs {
  885.         color: white;
  886.         padding-bottom: 45px;
  887.         font-size: 20px;
  888.         text-align: left;
  889. }
  890. .animalBlurbTextMobile {
  891.         color: white;
  892.         padding-top: 55px;
  893.         padding-bottom: 15px;
  894.         font-size: 16px;
  895.         line-height: 20px;
  896. }
  897. .animalBlurbTextPigsMob {
  898.         color: white;
  899.         padding-top: 10px;
  900.         padding-bottom: 15px;
  901.         font-size: 16px;
  902.         line-height: 20px;
  903. }
  904. .didYouKnowImageChicken img {
  905.         height: 100%;
  906.         overflow: visible;
  907.         margin-top: -120px;
  908.         width: 100%;
  909. }
  910. .didYouKnowImageChickenMob img,.didYouKnowImageMob img {
  911.         width: 60%;
  912.         height: 60%;
  913.         margin-top: 40px !important;
  914. }
  915. .moreFactsBlock {
  916.         margin-top: 60px;
  917. }
  918.  
  919. @media only screen and (max-width:600px) {
  920.  
  921.         .mobile-header-imageTop,.mobile-header-issue-images {
  922.                 width: 100%;
  923.                 height: 100%;
  924.         }
  925. }
  926.  

Write a comment

To post comments, please log in or register.