Difference between revisions of "Template:Virginia/css/index"

 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
@charset "UTF-8";
+
/**
−
/* Override iGEM wiki settings, removing everything but the top navbar. */
+
* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018
−
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);
+
* @version v0.1.11
−
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
+
* @link https://github.com/Virginia-iGEM/igem-wikibrick
−
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);
+
* @license MIT
−
#sideMenu,
+
*/
−
#top_title {
+
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);@-ms-viewport{width:device-width}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}ul{border:0;font:inherit;vertical-align:baseline}.category-gallery div a:hover p,article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*,::after,::before{box-sizing:inherit}html,pre{-ms-overflow-style:scrollbar}html{box-sizing:border-box;touch-action:manipulation;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{line-height:1;font-family:sans-serif}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:none}table{border-collapse:collapse;border-spacing:0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace}pre{overflow:auto}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{resize:vertical;overflow:auto}button,input{overflow:visible}button,select{text-transform:none}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[tabindex="-1"]:focus{outline:0!important}fieldset{min-width:0}legend{max-width:100%;white-space:normal;color:inherit;display:block}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}#sideMenu,#top_title,[hidden],template{display:none}#content{width:100vw;padding:0;border:0;color:#000;margin-left:auto;margin-right:auto;background-color:#fff;position:relative}#globalWrapper{font-size:inherit;padding-bottom:0}#top_menu_under{height:0}ul{list-style-image:none;padding:0}#mw-content-text>p{width:0;height:0}#igem-navbar-placeholder{height:14px;position:fixed;display:block;background-color:#383838;border-bottom:solid #000 2px;color:#fff;z-index:9999;width:100%;font-size:.75em;margin:0;padding:0}#igem-navbar-placeholder p,ul{margin:0}.MathJax nobr>span.math>span{border-left-width:0!important}.category-gallery{padding:3% 5%;background-color:#fff;overflow:hidden}.category-gallery::after{clear:both;content:"";display:block}.category-gallery div{width:calc(50% - 30px);float:left;margin-left:20px;position:relative}@media only screen and (min-width:1000px){.category-gallery div{width:calc(16.66667% - 35px);float:left;margin-left:30px}}.category-gallery div a{position:relative;display:block;overflow:hidden;overflow-y:scroll;overflow-x:hidden}.category-gallery div a p,.petri-dish{display:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.category-gallery div a p{font-size:2em;position:absolute;top:50%;left:50%;margin-top:-.5em;margin-left:-.25em;z-index:9;transition:all .2s;text-align:center}.category-gallery div a:hover img{image-orientation:from-image;opacity:.1}.category-gallery div a img{border-radius:50%;image-orientation:from-image;margin-bottom:25px;min-width:90%;min-height:90%;transition:opacity ease-in-out .2s,background-color ease-in-out .7s}.petri-dish{border-radius:50%;background-color:#4484ce}
−
  display: none; }
+
−
 
+
−
#content {
+
−
  width: 100vw;
+
−
  padding: 0px;
+
−
  border: none;
+
−
  color: black;
+
−
  margin-left: auto;
+
−
  margin-right: auto;
+
−
  background-color: #fff;
+
−
  position: relative; }
+
−
 
+
−
#globalWrapper {
+
−
  font-size: inherit;
+
−
  padding-bottom: 0; }
+
−
 
+
−
#top_menu_under {
+
−
  height: 0px; }
+
−
 
+
−
ul {
+
−
  list-style-image: none;
+
−
  /* removes the iGEM wiki bullets */
+
−
  padding: 0;
+
−
  margin: 0; }
+
−
 
+
−
#mw-content-text > p {
+
−
  width: 0px;
+
−
  height: 0px; }
+
−
 
+
−
#igem-navbar-placeholder {
+
−
  height: 14px;
+
−
  position: fixed;
+
−
  display: block;
+
−
  background-color: #383838;
+
−
  border-bottom: solid black 2px;
+
−
  color: white;
+
−
  z-index: 9999;
+
−
  width: 100%;
+
−
  font-size: 0.75em;
+
−
  margin: 0;
+
−
  padding: 0; }
+
−
  #igem-navbar-placeholder p {
+
−
    margin: 0; }
+
−
 
+
−
/* Begin actual Virginia iGEm 2018 Code */
+
−
/* UVA Colors
+
−
$background-dark-color:     #232D4B;
+
−
$background-light-color:    #ffffff;
+
−
$accent-color:             #E57200;
+
−
$light-accent-color:        rgb(255, 191, 128);
+
−
$text-light:               #ffffff;
+
−
$text-dark-color:                 #666666;
+
−
$link-color:                #EB5F0C;
+
−
*/
+
−
/* Cherenkov Colors
+
−
$background-dark-color:#282828;
+
−
$background-light-color:#C3C3D8;
+
−
$accent-color: #BFFBF9;
+
−
$text-light: #E8F9F9;
+
−
$text-dark-color: #001C4E;
+
−
$link-color: #3DD4DF;
+
−
*/
+
−
/*Passion Fruit Colors*/
+
−
/*
+
−
$background-dark-color:#FAF4E0;
+
−
$background-light-color:rgb(128, 39, 81);
+
−
$accent-color: #F5287F;
+
−
$light-accent-color: rgb(255, 142, 189);
+
−
$text-light: #1E0811;
+
−
$text-dark-color: #FFF0EF;
+
−
$link-color: #FBB645;
+
−
*/
+
−
/*Applies to all*/
+
−
body, #mw-content-text {
+
−
  font-family: "Lato";
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  border: 0; }
+
−
 
+
−
a {
+
−
  text-decoration: none;
+
−
  color: #2c6a94;
+
−
  transition: all 0.2s ease-in-out; }
+
−
  a:hover {
+
−
    color: #00c3ff;
+
−
    text-shadow: 0px 0px 8px #00c3ff; }
+
−
 
+
−
img {
+
−
  width: auto;
+
−
  height: auto;
+
−
  max-height: 100%;
+
−
  max-width: 100%;
+
−
  overflow: hidden; }
+
−
 
+
−
#main {
+
−
  height: 100%;
+
−
  color: #817f74;
+
−
  padding: 1% 1%;
+
−
  width: auto;
+
−
  height: auto;
+
−
  position: relative;
+
−
  background-color: #f7f5e9; }
+
−
  #main::after {
+
−
    clear: both;
+
−
    content: "";
+
−
    display: block; }
+
−
  #main div#media {
+
−
    width: calc(33.33333% - 80px);
+
−
    float: left;
+
−
    margin-left: 60px;
+
−
    text-align: center;
+
−
    position: absolute;
+
−
    top: 40px;
+
−
    bottom: 20px; }
+
−
  #main div#text {
+
−
    width: calc(66.66667% - 100px);
+
−
    float: left;
+
−
    margin-left: 60px; }
+
−
    #main div#text h1 {
+
−
      padding: 3% 1%; }
+
−
    #main div#text p {
+
−
      margin: 1%;
+
−
      line-height: 2em; }
+
−
 
+
−
#media {
+
−
  color: #817f74;
+
−
  width: 100%;
+
−
  height: 100%; }
+
−
 
+
−
/*scroll bar*/
+
−
.scrolltop {
+
−
  display: none;
+
−
  width: 100%;
+
−
  margin: 0 auto;
+
−
  position: fixed;
+
−
  bottom: 20px;
+
−
  right: 10px; }
+
−
 
+
−
.scroll {
+
−
  position: absolute;
+
−
  right: 20px;
+
−
  bottom: 20px;
+
−
  background: #b2b2b2;
+
−
  background: rgba(178, 178, 178, 0.7);
+
−
  padding: 20px;
+
−
  text-align: center;
+
−
  margin: 0 0 0 0;
+
−
  cursor: pointer;
+
−
  transition: 0.5s;
+
−
  -moz-transition: 0.5s;
+
−
  -webkit-transition: 0.5s;
+
−
  -o-transition: 0.5s; }
+
−
 
+
−
.scroll:hover {
+
−
  background: #b2b2b2;
+
−
  transition: 0.5s;
+
−
  -moz-transition: 0.5s;
+
−
  -webkit-transition: 0.5s;
+
−
  -o-transition: 0.5s; }
+
−
 
+
−
.scroll:hover .fa {
+
−
  padding-top: -10px; }
+
−
 
+
−
.scroll .fa {
+
−
  font-size: 30px;
+
−
  margin-top: -5px;
+
−
  margin-left: 1px;
+
−
  transition: 0.5s;
+
−
  -moz-transition: 0.5s;
+
−
  -webkit-transition: 0.5s;
+
−
  -o-transition: 0.5s; }
+
−
 
+
−
#virginia-header {
+
−
  /*Keeps the nav bar sticking on the top*/
+
−
  position: sticky;
+
−
  top: 16px;
+
−
  z-index: 999; }
+
−
  #virginia-header, #virginia-header * {
+
−
    box-sizing: border-box; }
+
−
  #virginia-header #navbar {
+
−
    height: 3rem;
+
−
    width: 100%;
+
−
    display: block;
+
−
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
+
−
    #virginia-header #navbar ul {
+
−
      list-style: none;
+
−
      margin: 0px;
+
−
      padding: 0px;
+
−
      background-color: #252525; }
+
−
      #virginia-header #navbar ul::after {
+
−
        clear: both;
+
−
        content: "";
+
−
        display: block; }
+
−
      #virginia-header #navbar ul li {
+
−
        width: calc(12.5%);
+
−
        float: left;
+
−
        margin-left: 0px;
+
−
        float: left;
+
−
        position: relative;
+
−
        line-height: 3rem;
+
−
        height: 3rem;
+
−
        /*a, related to link*/ }
+
−
        #virginia-header #navbar ul li a, #virginia-header #navbar ul li a:visited {
+
−
          display: flex;
+
−
          align-items: center;
+
−
          padding: 0 20px;
+
−
          height: 100%;
+
−
          width: 100%;
+
−
          background: #252525;
+
−
          color: #fffdff;
+
−
          white-space: nowrap;
+
−
          transition: all 0.2s ease-in-out;
+
−
          /*adds the arrow to dropdowns, selects not only-child*/ }
+
−
          #virginia-header #navbar ul li a img, #virginia-header #navbar ul li a:visited img {
+
−
            display: inline-block;
+
−
            padding: 0.5rem;
+
−
            max-height: 100%;
+
−
            height: auto;
+
−
            width: auto; }
+
−
          #virginia-header #navbar ul li a:hover, #virginia-header #navbar ul li a:visited:hover {
+
−
            color: #00c3ff;
+
−
            text-shadow: 0px 0px 8px #00c3ff; }
+
−
          #virginia-header #navbar ul li a:not(:only-child):after, #virginia-header #navbar ul li a:visited:not(:only-child):after {
+
−
            padding-left: 4px;
+
−
            content: ' ▾'; }
+
−
        #virginia-header #navbar ul li ul {
+
−
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+
−
          position: absolute;
+
−
          z-index: -1;
+
−
          visibility: hidden;
+
−
          opacity: 0;
+
−
          transform: translateY(-2em);
+
−
          transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; }
+
−
          #virginia-header #navbar ul li ul::after {
+
−
            clear: both;
+
−
            content: "";
+
−
            display: block; }
+
−
          #virginia-header #navbar ul li ul li {
+
−
            width: calc(100%);
+
−
            float: left;
+
−
            margin-left: 0px;
+
−
            overflow: hidden; }
+
−
        #virginia-header #navbar ul li:focus > ul, #virginia-header #navbar ul li:hover > ul {
+
−
          z-index: 1;
+
−
          visibility: visible;
+
−
          opacity: 1;
+
−
          transform: translateY(0%);
+
−
          transition-delay: 0s, 0s, 0.3s; }
+
−
 
+
−
#virginia-footer {
+
−
  box-sizing: border-box;
+
−
  background-color: #252525;
+
−
  border-top: 1px solid #2c6a94;
+
−
  color: #fffdff;
+
−
  padding: 25px; }
+
−
  #virginia-footer::after {
+
−
    clear: both;
+
−
    content: "";
+
−
    display: block; }
+
−
  #virginia-footer div.footer-name {
+
−
    width: calc(41.66667%);
+
−
    float: left;
+
−
    margin-left: 0px;
+
−
    line-height: 6rem;
+
−
    height: 6rem; }
+
−
    #virginia-footer div.footer-name * {
+
−
      float: left;
+
−
      margin: auto 1rem; }
+
−
  #virginia-footer div.spacer {
+
−
    width: calc(33.33333%);
+
−
    float: left;
+
−
    margin-left: 0px;
+
−
    line-height: 6rem;
+
−
    height: 6rem; }
+
−
  #virginia-footer div.social-container {
+
−
    width: calc(25%);
+
−
    float: left;
+
−
    margin-left: 0px; }
+
−
 
+
−
/*
+
−
body {
+
−
    background-color: rgba($iconColor, 0.05);
+
−
}
+
−
*/
+
−
/*Code courtesy of https://codepen.io/brandondward/pen/RpyaKL*/
+
−
.social-container {
+
−
  width: calc(25% - 25px);
+
−
  float: left;
+
−
  margin-left: 20px;
+
−
  width: 400px; }
+
−
 
+
−
.social-icons {
+
−
  padding: 0;
+
−
  list-style: none;
+
−
  margin: 1em; }
+
−
  .social-icons li {
+
−
    display: inline-block;
+
−
    margin: 0.15em;
+
−
    position: relative;
+
−
    font-size: 1.2em; }
+
−
  .social-icons i {
+
−
    color: #fff;
+
−
    position: absolute;
+
−
    top: 21px;
+
−
    left: 21px;
+
−
    transition: all 265ms ease-out; }
+
−
  .social-icons a {
+
−
    display: inline-block; }
+
−
    .social-icons a:before {
+
−
      transform: scale(1);
+
−
      -ms-transform: scale(1);
+
−
      -webkit-transform: scale(1);
+
−
      content: " ";
+
−
      width: 60px;
+
−
      height: 60px;
+
−
      border-radius: 100%;
+
−
      display: block;
+
−
      background: linear-gradient(45deg, #2c6a94, #00c3ff);
+
−
      transition: all 265ms ease-out; }
+
−
    .social-icons a:hover:before {
+
−
      transform: scale(0);
+
−
      transition: all 265ms ease-in; }
+
−
    .social-icons a:hover i {
+
−
      transform: scale(2.2);
+
−
      -ms-transform: scale(2.2);
+
−
      -webkit-transform: scale(2.2);
+
−
      color: #2c6a94;
+
−
      background: -webkit-linear-gradient(45deg, #2c6a94, #00c3ff);
+
−
      -webkit-background-clip: text;
+
−
      -webkit-text-fill-color: transparent;
+
−
      transition: all 265ms ease-in; }
+
−
 
+
−
.category-gallery {
+
−
  padding: 3% 5%;
+
−
  background-color: #f7f5e9; }
+
−
  .category-gallery::after {
+
−
    clear: both;
+
−
    content: "";
+
−
    display: block; }
+
−
  .category-gallery div {
+
−
    width: calc(50% - 30px);
+
−
    float: left;
+
−
    margin-left: 20px;
+
−
    position: relative; }
+
−
    @media only screen and (min-width: 1000px) {
+
−
      .category-gallery div {
+
−
        width: calc(16.66667% - 35px);
+
−
        float: left;
+
−
        margin-left: 30px; } }
+
−
    .category-gallery div a {
+
−
      position: relative;
+
−
      text-align: center;
+
−
      min-width: 100%;
+
−
      min-height: 100%;
+
−
      display: block; }
+
−
      .category-gallery div a p {
+
−
        display: none;
+
−
        position: absolute;
+
−
        top: 50%;
+
−
        left: 50%;
+
−
        transform: translate(-50%, -100%);
+
−
        z-index: 9;
+
−
        /*overlay text over*/
+
−
        transition: all 0.2s; }
+
−
      .category-gallery div a:hover img {
+
−
        background-color: #4799b4cc;
+
−
        filter: blur(2px) contrast(25%) brightness(25%);
+
−
        opacity: 0.5; }
+
−
      .category-gallery div a:hover p {
+
−
        display: block; }
+
−
      .category-gallery div a img {
+
−
        border-radius: 50%;
+
−
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
−
        margin-bottom: 25px;
+
−
        width: 90%;
+
−
        height: 90%; }
+
−
 
+
−
.petri-dish {
+
−
  display: none;
+
−
  border-radius: 50%;
+
−
  background-color: #252525;
+
−
  transform: translate(-50%, -50%); }
+

Latest revision as of 19:43, 17 July 2018

/** 

* This page and wiki was built with the help of igem-wikibrick, a tool created by Virginia iGEM 2018
* @version v0.1.11
* @link https://github.com/Virginia-iGEM/igem-wikibrick
* @license MIT
*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,900italic,500italic,500,400italic);@-ms-viewport{width:device-width}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}ul{border:0;font:inherit;vertical-align:baseline}.category-gallery div a:hover p,article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*,::after,::before{box-sizing:inherit}html,pre{-ms-overflow-style:scrollbar}html{box-sizing:border-box;touch-action:manipulation;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{line-height:1;font-family:sans-serif}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:none}table{border-collapse:collapse;border-spacing:0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace}pre{overflow:auto}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{resize:vertical;overflow:auto}button,input{overflow:visible}button,select{text-transform:none}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}[tabindex="-1"]:focus{outline:0!important}fieldset{min-width:0}legend{max-width:100%;white-space:normal;color:inherit;display:block}progress{vertical-align:baseline}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}#sideMenu,#top_title,[hidden],template{display:none}#content{width:100vw;padding:0;border:0;color:#000;margin-left:auto;margin-right:auto;background-color:#fff;position:relative}#globalWrapper{font-size:inherit;padding-bottom:0}#top_menu_under{height:0}ul{list-style-image:none;padding:0}#mw-content-text>p{width:0;height:0}#igem-navbar-placeholder{height:14px;position:fixed;display:block;background-color:#383838;border-bottom:solid #000 2px;color:#fff;z-index:9999;width:100%;font-size:.75em;margin:0;padding:0}#igem-navbar-placeholder p,ul{margin:0}.MathJax nobr>span.math>span{border-left-width:0!important}.category-gallery{padding:3% 5%;background-color:#fff;overflow:hidden}.category-gallery::after{clear:both;content:"";display:block}.category-gallery div{width:calc(50% - 30px);float:left;margin-left:20px;position:relative}@media only screen and (min-width:1000px){.category-gallery div{width:calc(16.66667% - 35px);float:left;margin-left:30px}}.category-gallery div a{position:relative;display:block;overflow:hidden;overflow-y:scroll;overflow-x:hidden}.category-gallery div a p,.petri-dish{display:none;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.category-gallery div a p{font-size:2em;position:absolute;top:50%;left:50%;margin-top:-.5em;margin-left:-.25em;z-index:9;transition:all .2s;text-align:center}.category-gallery div a:hover img{image-orientation:from-image;opacity:.1}.category-gallery div a img{border-radius:50%;image-orientation:from-image;margin-bottom:25px;min-width:90%;min-height:90%;transition:opacity ease-in-out .2s,background-color ease-in-out .7s}.petri-dish{border-radius:50%;background-color:#4484ce}