Difference between revisions of "Template:Team:Tec-Chihuahua/css"

Line 977: Line 977:
 
}
 
}
  
−
.team-member, .std-section > h2, .calendar, .calendar-legend, .std-section > p, .std-section > img, .std-section li, .std-section > div p, .std-section div img {
+
.team-member, .std-section > h2, .calendar, .calendar-legend, .std-section > p, .std-section > img, .std-section li, .std-section > div p, .std-section div img, .std-section table {
 
     visibility: hidden;
 
     visibility: hidden;
 
}
 
}

Revision as of 20:42, 19 October 2016

@import 'https://fonts.googleapis.com/css?family=Lato%7COpen+Sans';

body { 

   background-color: #fafafa;

}

.loading-screen { 

   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   z-index: 999999;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #078794;
   color: #fff;
   transition: all 0.5s;

}

ul.no-bullet li { 

   list-style: none;

}

.loading-screen .content h2 { 

   text-align: center;

}

.loading-screen.bye { 

       transform: translate(0, -100%);

}

.black-overlay { 

   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: rgba(0,0,0,0.4);
   z-index: 7000;

}

.traslucent { 

   opacity: 0;

}

.main-nav, .nav-backdrop { 

   position: fixed;
   top: 0;
   width: 100%;
   z-index: 20;
   height: 48px;

}

  1. globalWrapper .main-nav, #globalWrapper .nav-backdrop {
   top: 14px;

}

.blue-bg { 

   background-color: rgb(7, 135, 148);

}

p.attention, #content .std-section p.attention { 

   margin: 40px auto;
   display: block;
   text-align: center;
   font-size: 24px;

}

p.attention.left, #content .std-section p.attention.left { 

   margin: 40px auto;
   display: block;
   text-align: left;
   font-size: 24px;

}

.page-preview { 

   max-width: 70%;
   max-height: 70vh;
   height: auto;
   margin: 100px auto;
   display: block;

}

.page-ender { 

   max-width: 80%;
   max-height: 300px;
   margin: 20px auto;
   display: block;

}

.margin { 

   margin: 40px auto;

}

.margin-big { 

   margin: 80px auto;

}

.parallax { 

   margin: 50px 0;
   width: 100%;
   max-height: 300px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 0%;
   padding: 130px 10px;

}

.parallax p { 

   font-size: 40px;
   margin: 0;
   text-align: center;
   color: #fff;
   text-shadow: 2px 2px #333;

}

.center-block { 

   display: block;
   margin-left: auto;
   margin-right: auto;

}

/* BEGIN NAV */ .nav-backdrop { 

   background-color: #078794;
   z-index: 1;

}

.main-nav a { 

   color: #fff;
   -webkit-transition: color 0.3s;
   -moz-transition: color 0.3s;
   transition: color 0.3s;
   display: block;

}

.main-nav .logo { 

   position: absolute;
   right: 5px;
   top: 5px;

}

.main-nav a:focus { 

   text-decoration: none;

}

.main-nav a:hover, .main-nav .option.header:hover { 

   text-decoration: none;
   color: #ddd;
   cursor: pointer;

}

.main-nav .options-wrapper { 

   display: flex;
   width: 100%;
   margin-top: 8px;

}

.main-nav .option-item { 

   position: relative;
   flex-grow: 1;
   color: #fff;
   padding: 4px 8px;
   left: 0px;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   transition: all 0.5s;

}

.main-nav .option-item.active { 

   border-bottom: #fff solid 2px;

}

.main-nav .option.header { 

   text-align: center;
   -webkit-transition: color 0.3s;
   -moz-transition: color 0.3s;
   transition: color 0.3s;

}

.main-nav .option-dropdown { 

   display: none;
   opacity: 0;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   transition: opacity 0.5s;

}

.main-nav .option.header.active-menu { 

   font-weight: 600;
   border-right: #fff solid 1px;
   display: inline-block;
   padding-right: 15px;

}

.main-nav .active .option.header.active-menu { 

   padding-bottom: 3px;
   border-bottom: #fff solid 2px;
   border-right: #fff solid 1px;

}

.main-nav .option.header.active-menu + .option-dropdown { 

   top: 1px;
   display: block;
   opacity: 1;
   position: absolute;
   width: 100vw;

}

.main-nav .option.header+ .option-dropdown .option { 

   transform: translate(200px);
   -webkit-transition: transform 0.3s;
   -moz-transition: transform 0.3s;
   transition: transform 0.3s;

}

.main-nav .option.header.active-menu + .option-dropdown .option { 

   display: inline-block;
   padding: 3px 15px;

}

.cover { 

   z-index: 5;
   display: block;
   background: url(T--Tec-Chihuahua--Alfalfa-field-myxo-placeholder.jpeg) center 0% no-repeat;
   background-size: cover;
   background-color: #333;
   height: 100vh;
   width: 100%;
   position: relative;

}

.mini-cover { 

   z-index: 5;
   display: block;
   background: url(Cover.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   background-color: #333;
   height: 200px;
   max-height: 100vh;
   width: 100%;
   position: relative;

}

.cover .overlay, .mini-cover .overlay { 

   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0,0,0,0.3);

}

.mini-cover .gradient-overlay { 

   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,3163c6+100&0+0,0+65,0.55+100 */
   background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(121,154,218,0) 65%, rgba(0,0,0,0.55) 100%); /* FF3.6-15 */
   background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* Chrome10-25,Safari5.1-6 */
   background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(121,154,218,0) 65%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#8c3163c6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.cover .gradient-overlay { 

   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,da4e5b+65,e96f2e+100&0+0,0.2+65,0.6+100 */
   background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(218,78,91,0.2) 65%, rgba(233,111,46,0.2) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(218,78,91,0.2) 65%,rgba(233,111,46,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#99e96f2e',GradientType=0 ); /* IE6-9 */


}

.cover .content, .mini-cover .content { 

   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   text-align: center;

}

.cover .content h1, .mini-cover .content h1 { 

   margin-top: 0px;
   font-size: 48px;

}

.cover .content, .mini-cover .content { 

   color: #fff;

}

.cover .content h3, .mini-cover .content h3 { 

   font-size: 24px;

}

.slide-menu { 

   position: fixed;
   bottom: 20px;
   left: 20px;
   padding-left: 0px;
   list-style: none;
   z-index: 5000;
   opacity: 0;
   -webkit-transition: opacity 0.3s;
   -moz-transition: opacity 0.3s;
   transition: opacity 0.3s;

}

.slide-menu.show { 

   opacity: 1;
   -webkit-transition: opacity 0.7s;
   -moz-transition: opacity 0.7s;
   transition: opacity 0.7s;

}

.slide-menu li { 

   position: relative;
   margin: 10px;
   color: #000;
   background: rgba(255,255,255,.5);
   -webkit-border-radius: 10px;
   border-radius: 10px;

}


.slide-menu li:hover { 

   background: rgba(255,255,255,.7);

}

.slide-menu li:after { 

   content: "";
   background: rgba(255,255,255,.5);
   position: absolute;
   bottom: -10px;
   height: 10px;
   width: 5px;
   left: 50%;
   transform: translate(-50%);

}

.slide-menu li:last-child:after { 

   height: 0px;

}

.slide-menu li.active { 

   background: rgba(0,0,0,.5);
   color: #fff;

}

.slide-menu li a { 

   color: inherit;
   padding: 9px 18px;
   display: block;

}

.slide-menu li a:hover, .slide-menu li a:focus, .slide-menu li a:active { 

   text-decoration: none;

}

.section .sorted p.left-text { 

   text-align: left;

}

.section .sorted ul li { 

   color: #fff;
   font-size: 18px;

}

.control-arrows { 

   position: fixed;
   right: 20px;
   bottom: 20px;
   padding: 5px;

}

.control-arrows span { 

   display: block;
   font-size: 36px;
   color: #fff;
   -webkit-transition: all 0.7s;
   -moz-transition: all 0.7s;
   transition: all 0.7s;

}

.control-arrows span:hover { 

   cursor: pointer;
   color: #bcbcbc;

}

.control-arrows span.nope { 

   opacity: 0;
   pointer-events: none;
   cursor: initial;

}

.control-arrows span.go-down { 

   transform: translate(0, 100%);

}

.section h1 { 

   color: #fff;
   text-align: center;
   margin: 0;

}

.sorted { 

   display: block;

}

.sorted div { 

   display: inline-block;
   vertical-align: middle;
   text-align: center;
   width: 49%;

}

.sorted .left { 

   float: left;
   width: 50%;

}

.sorted .right { 

   float: right;
   width: 50%;

}

.sorted img { 

   display: inline-block;
   max-height: 30vh;
   width: auto;
   margin: 10px auto;

}

.sorted img.big { 

   max-height: 60vh;

}

  1. bodyContent .section p, .section p, #bodyContent .footer p, .footer p {
   color: #fff;
   text-align: center;
   margin: 0 5vw;
   font-size: 30px;

}

.footer ul { 

   color: #fff;
   list-style: none;
   padding-left: 20px;

}

.footer li ul li:before { 

   content: "- "

}

.footer a { 

   color: #fff;

}

.footer a:hover { 

   color: #ccc;
   text-decoration: none;

}

  1. bodyContent .section p.small, .section p.small, #bodyContent .footer p.small, .footer p.small {
   font-size: 18px;
   margin-bottom: 10px;

}

.modal-title { 

   font-family: 'Open Sans', sans-serif;;
   text-align: center;
   font-size: 30px;

}

.modal-text { 

   font-size: 16px;

}

.std-section h2 { 

   text-align: center;
   font-family: 'Open Sans', sans-serif;;
   margin-top: 60px;
   padding-bottom: 10px;

}

.std-section h2:after, .modal-title:after { 

   content: "";
   display: block;
   margin-top: 10px;
   height: 1px;
   width: 100%;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+20,cccccc+20,cccccc+80,000000+100&0+0,0.65+20,0.65+80,0+100 */
   background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(204,204,204,0.65) 20%, rgba(204,204,204,0.65) 80%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(204,204,204,0.65) 20%,rgba(204,204,204,0.65) 80%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}

.team-member { 

   font-family: 'Lato', sans-serif;
   margin-bottom: 30px;
   position: relative;

}

.team-member img { 

   margin: 0px auto;

}

.member-description p.meta { 

   color: #555;
   font-weight: 600;

}

.member-description p.meta::nth-child(2) { 

   margin-top: 80px;

}

.footer { 

   padding: 30px 0;
   background-color: #333;

}

.footer .logo { 

   display: block;
   margin: 40px auto;
   max-width: 100%;
   max-height: 20vh;

}

.footer .outlier { 

   position: absolute;
   bottom: -10px;
   text-align: center;

}

.section p a { 

   color: #ddd;

}

.section p a:hover, .section p a:visited, .section p a:active { 

   color: #eee;
   border-bottom: #eee solid 1px;
   text-decoration: none;

} 

.section p a:visited, .section p a:active {
    border-bottom: none;
}

.calendar-wrapper { 

   position: relative;

}

.calendar-wrapper.left { 

   -webkit-transition: transform 0.6s;
   transition: transform 0.6s;
   -webkit-transform: translate(-100%);
   transform: translate(-100%);

}

.calendar-wrapper.right { 

   -webkit-transition: transform 0.6s;
   transition: transform 0.6s;
   -webkit-transform: translate(100%);
   transform: translate(100%);

}

.calendar { 

   display: block;
   margin: 5vh auto;

}

.calendar-header { 

   color: #f0f0f0;
   text-align: center;
   font-size: 26px;
   padding: 10px;
   margin-bottom: 10px;

}

.calendar-header .controls { 

   float: right;

}

.calendar .event p { 

   font-size: 8px;
   text-align: left;

}

.calendar-header .controls span { 

   -webkit-user-select: none;
   user-select: none;
   -webkit-transition: transform 0.3s;
   transition: transform 0.3s;
   -webkit-transform: translate(0);
   transform: translate(0);

}

.calendar-header .controls span.disabled { 

   color: #aaa;
   cursor: not-allowed !important;

}

.calendar-header .controls span:first-child:hover:not(.disabled) { 

   cursor: pointer;
   -webkit-transform: translate(-5px);
   transform: translate(-5px);

}

.calendar-header .controls span:last-child:hover:not(.disabled) { 

   cursor: pointer;
   -webkit-transform: translate(5px);
   transform: translate(5px);

}

.calendar-header .controls span:active:not(.disabled) { 

   color: #ccc;

}

.calendar-grid.has-event { 

   background-color: #006400;
   cursor: pointer;

}


.calendar-header .month-name { 

   display: inline-block;

}

.calendar-row { 

   display: block;
   text-align: center;

}

.calendar-grid { 

   position: relative;
   float: left;
   width: 14.28%;
   height: 100px;
   border: #f0f0f0 solid 1px;
   margin: 0;
   border-left: none;
   border-top: none;
   color: #f0f0f0;
   padding: 2px;

}

.calendar-row:last-child .calendar-grid { 

   border-bottom: none;

}

.calendar-row .calendar-grid:last-child { 

   border-right: none;

}

.calendar-grid .day-number { 

   position: absolute;
   margin: 0;
   bottom: 2px;
   right: 8px;
   font-size: 18px;

}

.calendar-grid .event { 

   position: absolute;
   text-align: center;
   width: 100%;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);

}

.calendar-grid .event img { 

   transition: all 0.3s ease-in-out;
   max-height: 25px;
   display: inline-block;
   margin: 3px;
   cursor: pointer;

}

.calendar-grid .event img:hover { 

   max-height: 40px;

}

.calendar-header .dropdown { 

   display: inline-block;

}

.calendar-header .dropdown button { 

   width: 130px;
   white-space: nowrap;
   position: relative;
   font-size: 20px;
   background-color: transparent;
   border: none;
   top: -5px;

}

.calendar-header .dropdown ul { 

   background-color: rgba(0,0,0,0.4);
   left: -14px;
   padding-left: 0px;

}

.calendar-header .dropdown ul li { 

   padding: 5px 10px;
   font-size: 18px;
   list-style: none;

}

.calendar-header .dropdown ul li:hover { 

   cursor: pointer;
   background-color: rgba(0,0,0,0.4);

}

.calendar-legend { 

   display: block;
   margin: 30px auto;

}

.calendar-legend h2 { 

   color: #fff;

}

.calendar-legend ul { 

   text-align: center;
   padding-left: 0;

}

.calendar-legend li { 

   position: relative;
   display: inline-block;

}

.calendar-legend li .igemtooltip, .calendar-grid .igemtooltip { 

   color: #333;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background-color: #fff;
   border: #bcbcbc solid 1px;
   display: none;
   z-index: 500;

}

.calendar-legend li .igemtooltip div, .calendar-grid .igemtooltip div { 

   color: #333;

}

.calendar-legend li img, .calendar-legend li p { 

   margin: 0px 5px;
   display: inline-block;
   color: #fff;

}

.calendar-legend li img { 

   max-width: 50px;

}

.calendar-legend li:not(:last-child):after { 

   content: "-";
   color: #fff;
   margin: 0px 20px;

}

.modal-content { 

   border-radius: 0;

}

.modal-header { 

   border-bottom: none;    
   padding: 15px;

}

.modal-body { 

   padding: 0 15px 15px 15px;

}

.modal-body br { 

   margin: 20px;

}

.modal-main-image { 

   max-width: 100%;
   margin: 0px auto;
   display: block;

}

.modal-image-wrapper { 

   margin: 0px auto 25px auto;

}


.modal-footer { 

   border-top: none;

}

.slider-img { 

   background-color: #333;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 0;
   padding-bottom: 75%;

}

  1. modalSlider .carousel-control {
   background-image: none;
   color: #5bc0de;

}

  1. modalSlider .carousel-indicators {
   bottom: 3.5%;

}

  1. modalSlider .carousel-indicators li {
   border-color: #5bc0de;
   margin: 3px;

}

  1. modalSlider .carousel-indicators li.active {
   background-color: #5bc0de;

}

  1. modalSlider .carousel-control span { 
   top: auto;
   bottom: 5%;

}

  1. modalSlider .carousel-inner:not(.no-after):after {
   content: "";
   position: absolute;
   height: 20%;
   width: 100%;
   bottom: 0;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
   background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

}

  1. modalSlider .carousel-inner.no-after .carousel-control {
   opacity: 0.3;

}

  1. modalSlider .carousel-indicators.left {
   bottom: initial;
   top: 50%;
   left: 0;
   margin-left: 0;

}

  1. modalSlider .carousel-indicators.left li {
   display: block;

}

  1. bodyContent p.strong, p.strong {
   font-size: 18px;
   font-weight: 800;

}

.std-section ul { 

   padding-left: 30px;

}

.std-section li { 

   font-size: 16px;
   list-style: initial;

}

.std-section td, .std-section th { 

   font-size: 16px;

}

.social-media { 

   text-align: center;
   display: block;

}

.social-media img { 

   display: inline-block;
   margin: 20px 5px;
   transition: all 0.3s;
   border-radius: 50%;
   max-width: 50px;
   cursor: pointer;

}

.social-media img:hover { 

   background-color: #3399cc;

}

.protocol { 

   padding: 15px 20px;
   width: 100%;
   display: block;
   background-color: #fff;
   border: #bcbcbc solid 1px;
   margin: 0;
   font-size: 20px;

}

.protocol>span { 

   position: relative;
   top: 4px;
   float: right;

}

.protocol:hover { 

   cursor: pointer;
   background-color: #f0f0f0;

}

.protocol:not(:first-child) { 

   border-top: none;

}

.protocol-pdf { 

   height: 800px;
   max-height: 80vh;

}

.protocol[aria-expanded=true]>span { 

   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);

}

.std-section ul.big-list > li { 

   font-size: 18px;
   list-style: none;
   margin: 15px auto;

}

.std-section ul.big-list .padpls { 

   padding-left: 40px;
   font-style: italic;

}

  1. carousel-safety .item {
   background-position: center center;
   background-size: cover;
   background-color: #333;
   height: 500px;
   max-height: 80vh;
   width: 100%;

}

.sorted p button { 

   margin: 10px 15px;
   font-size: 18px;

}

input, select { 

   width: 100%;
   display: block;
   height: 30px;
   font-size: 18px;
   margin-bottom: 15px;

}

input { 

   padding: 5px;

}

.team-member, .std-section > h2, .calendar, .calendar-legend, .std-section > p, .std-section > img, .std-section li, .std-section > div p, .std-section div img, .std-section table { 

   visibility: hidden;

}

.calendar-legend *, .calendar * { 

   visibility: visible !important;

}

@media (max-width: 767px) { 

   .main-nav, .nav-backdrop {
       height: 38px;
   }

   .main-nav {
       z-index: 9500;
   }

   .nav-backdrop {
       z-index: 9499;
   }

   .logo img {
       height: 27px;
   }

   .toggle-menu {
       width: 38px;
       height: 38px;
       padding: 6px 0;
       cursor: pointer;
   }

   .burger {
       width: 22px;
       height: 3px;
       background-color: #fff;
       margin: 4px auto;
   }

   .cover {
       background-attachment: scroll;
       height: 100vh;
   }

   .fp-controlArrow {
       opacity: 0.3;
   }

   .main-nav .options-wrapper {
       display: block;
       position: fixed;
       left: 0;
       top: 0;
       bottom: 0;
       width: 200px;
       background: #333;
       margin-top: 0;
       -webkit-transform: translate(-100%);
       transform: translate(-100%);
       -webkit-transition: transform 0.3s;
       -moz-transition: transform 0.3s;
       transition: transform 0.3s;
       padding-top: 14px;
   }

   .main-nav.open .options-wrapper {        
       -webkit-transform: translate(0%);
       transform: translate(0%);
   }
   
   .main-nav .option.header {
       padding: 5px;
       text-align: left;
   }

   .main-nav .option-item.active {
       border: 0;
       background-color: #33c;
   }   

   .main-nav .option-dropdown {
       display: block;
       opacity: 1;
       top: 0;
       border: none;
       padding: 0;
       background-color: #fafafa;
       max-height: 0;
       min-width: 100%;
       position: relative;
       overflow-y: hidden;
       -webkit-transition: max-height 0.3s;
       -moz-transition: max-height 0.3s;
       transition: max-height 0.3s;
   }

   .main-nav .option-dropdown.open {    
       border: #bcbcbc solid 1px;
   }

   .main-nav .option-dropdown .option {
       padding: 5px;
       color: #333;
       white-space: nowrap;
   }

   .main-nav .option-dropdown .option:hover {
       background-color: #ddd;
   }

   .main-nav .option-dropdown a.option {
       color: #333;
   }

   .main-nav .option-dropdown .option {
       display: block;
   }

   .main-nav .option-item {
       padding: 4px 0;
   }

   .main-nav .option.header+ .option-dropdown .option {
       transform: translate(0px);
   }

   .slide-menu {
       left: 0;
       width: 100%;
       text-align: center;
       margin: 0 !important;
   }

   .slide-menu li {
       display: inline-block;
       margin: 3px;
   }

   .slide-menu li:after {
       bottom: 50%;
       height: 5px;
       width: 10px;
       left: 100%;
       transform: translate(0, 50%);
   }

   .slide-menu li a {
       padding: 5px 10px;
   }

   #bodyContent .section p, .section p {
       font-size: 20px;
   }

   #bodyContent .section p.small, .section p.small {
       font-size: 14px;
   }

   .control-arrows {
       display: none;
   }

}

@media (max-width: 550px) { 

   .parallax {
       max-height: 200px;
       padding: 45px 10px;
   }

   .calendar-header .month-name {
       display: block;
   }

   .calendar-header .controls {
       display: block;
       float: none;
   }

   .calendar-grid {
       height: 120px;
   }

   .calendar-legend li {
       display: block;
       margin: 20px;
   }

   .calendar-legend li:not(:last-child):after {
       content: "";
   }

}

@media (max-width: 450px) { 

   .slide-menu {
       bottom: 5px;
   }

   .slide-menu li {
       margin: 0;
   }

   .slide-menu li:after {
       width: 4px;
   }

   .slide-menu li a {
       padding: 4px 8px;
       font-size: 10px;
   }

   .section .sorted > div:not(.grow) {
       width: 24%;
   }

   .section .sorted .grow {
       width: 74%;
   }

   #bodyContent .section p, .section p {
       font-size: 14px;
   }

   #bodyContent .section p.small, .section p.small {
       font-size: 12px;
   }

}


/* Collaboration CSS */

  1. vgemcollaboration {
   margin: 0px auto;
   display: block;

background-image:url('https://static.igem.org/mediawiki/2016/d/de/T--Virginia--collabopen.png'); 

   position: relative;

background-size:180px 220px; /*Adjust background-size and the width and height properties here if you wish to resize the icon*/ width:180px; height:220px; }

  1. vgemcollaboration:hover {

background-image:url('https://static.igem.org/mediawiki/2016/a/a5/T--Virginia--collabclosed.png'); }

  1. vgemcollaboration a {

display:inline-block; width:100%; height:100%; }

.uil-spin-css { 

 background: none;
 position: relative;
 width: 200px;
 height: 200px;

} width: 100%; @-webkit-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-webkit-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-moz-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-ms-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-moz-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-webkit-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @-o-keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} @keyframes uil-spin-css { 

 0% {
   opacity: 1;
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   transform: scale(1.5);
 }
 100% {
   opacity: 0.1;
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
 }

} .uil-spin-css > div { 

 width: 24px;
 height: 24px;
 margin-left: 4px;
 margin-top: 4px;
 position: absolute;

} .uil-spin-css > div > div { 

 width: 100%;
 height: 100%;
 border-radius: 15px;
 background: #ffffff;

} .uil-spin-css > div:nth-of-type(1) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0s;
 -moz-animation-delay: 0s;
 -webkit-animation-delay: 0s;
 -o-animation-delay: 0s;
 animation-delay: 0s;

} .uil-spin-css > div:nth-of-type(1) { 

 -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(2) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.12s;
 -moz-animation-delay: 0.12s;
 -webkit-animation-delay: 0.12s;
 -o-animation-delay: 0.12s;
 animation-delay: 0.12s;

} .uil-spin-css > div:nth-of-type(2) { 

 -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(3) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.25s;
 -moz-animation-delay: 0.25s;
 -webkit-animation-delay: 0.25s;
 -o-animation-delay: 0.25s;
 animation-delay: 0.25s;

} .uil-spin-css > div:nth-of-type(3) { 

 -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(4) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.37s;
 -moz-animation-delay: 0.37s;
 -webkit-animation-delay: 0.37s;
 -o-animation-delay: 0.37s;
 animation-delay: 0.37s;

} .uil-spin-css > div:nth-of-type(4) { 

 -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(5) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -o-animation-delay: 0.5s;
 animation-delay: 0.5s;

} .uil-spin-css > div:nth-of-type(5) { 

 -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(6) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.62s;
 -moz-animation-delay: 0.62s;
 -webkit-animation-delay: 0.62s;
 -o-animation-delay: 0.62s;
 animation-delay: 0.62s;

} .uil-spin-css > div:nth-of-type(6) { 

 -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(7) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.75s;
 -moz-animation-delay: 0.75s;
 -webkit-animation-delay: 0.75s;
 -o-animation-delay: 0.75s;
 animation-delay: 0.75s;

} .uil-spin-css > div:nth-of-type(7) { 

 -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);

} .uil-spin-css > div:nth-of-type(8) > div { 

 -ms-animation: uil-spin-css 1s linear infinite;
 -moz-animation: uil-spin-css 1s linear infinite;
 -webkit-animation: uil-spin-css 1s linear infinite;
 -o-animation: uil-spin-css 1s linear infinite;
 animation: uil-spin-css 1s linear infinite;
 -ms-animation-delay: 0.87s;
 -moz-animation-delay: 0.87s;
 -webkit-animation-delay: 0.87s;
 -o-animation-delay: 0.87s;
 animation-delay: 0.87s;

} .uil-spin-css > div:nth-of-type(8) { 

 -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
 -moz-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
 -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
 -o-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
 transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);

}