Difference between revisions of "Team:TUDelft/css/custom/test2"

Revision as of 10:54, 17 October 2018

/* Removing default wiki layout */

/**************************************************************************************************************************************************************************************************/

home_logo,
sideMenu {

display: none; }

sideMenu,
top_title,

.patrollink { display: none; }

content {

margin-left: 0px; margin-top: -7px; padding: 0px; width: 100%; background: none !important; }

body { background-image: url("") !important; background-repeat: no-repeat; background-position: bottom left; background-attachment: fixed; position: relative; margin-top: 40px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }

bodyContent h1,
bodyContent h2,
bodyContent h3,
bodyContent h4,
bodyContent h5,
bodyContent h6, {

margin-bottom: 0px; }

.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important; }

html { scroll-behavior: smooth !important; }

.adopeicon { height: 40px; width: auto; margin: 10px; padding-left: 10px; }

/* TOPNAV */ nav, footer, #myScrollspy, .content, .blockquoteadpbl, .blockquotegrnbl, blockquoteorngcrl { -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }

.content {

padding: 25px;
background-color: #FFFFFF;

}

.navbar { z-index: 500 !important; }

.dropdown-menu { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; z-index: 501 !important; }

@media (max-width: 1200px) {

   .navbar-header {
       float: none;
   }
   .navbar-left,.navbar-right {
       float: none !important;
   }
   .navbar-toggle {
       display: block;
   }
   .navbar-collapse {
       border-top: 1px solid transparent;
       box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
   }
   .navbar-fixed-top {

top: 0; border-width: 0 0 1px; }

   .navbar-collapse.collapse {
       display: none!important;
   }
   .navbar-nav {
       float: none!important;

margin-top: 12px; } .navbar-nav>li {

       float: none;
   }
   .navbar-nav>li>a {
       padding-top: 10px;
       padding-bottom: 10px;
   }
   .collapse.in{
 		display:block !important;

} }

   #custom-nav {

margin-left: -15px !important;

   margin-right: -15px !important;}

/* FOOTER */ .footer { background-color: #F8F8F8; position: relative; right: 0; bottom: -30px; left: 0; padding: 1rem; }

legend { background-color: rgba(249, 251, 251, 1); border: none; color: #797979; }

.logo { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor:pointer; }

.sponsorimg { max-height: 80px; width: auto; } .sponsorimg2 { max-height: 150px; width: auto; } .sponsorimg3 { max-height: 50px; width: auto; }

.sponsimgg {

   float: right;
   max-width: 30%;
   height: auto; 
   padding-left: 10px;
   margin-left: 25px;
   max-height: 250px;

}

/* SIDEBAR */

ul.nav-pills { top: 160px; left: 45px; position: fixed; color: #006C84 !important; font-size: 15px; margin-right: 30px; }

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {

   color: #fff;
   background-color: #E2E8E4;

}

div.col-sm-9 div { height: 250px; font-size: 28px; }

.sponsors img { height: 6em; padding: 1em; }

.sponsors > div > a { display: block; position: relative; /* top: -2.5em;*/ }

/* GENERAL LAYOUT STUFF */

h1 {

   font-size: 45px;
   font-weight: lighter !important;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; }

} h2 {

   font-size: 35px !important;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important;

   font-weight: 100 !important;

}

h3 {

   font-size: 30px;
   font-weight: lighter !important;

}

h4 {

   font-size: 25px;
   font-weight: lighter !important;

}

h5 {

   font-size: 22px;
   font-weight: lighter !important;

}

h6 {

   font-size: 20px;
   font-weight: lighter !important;

}

/* GREEN-BLUE */ .grnbl {

           color: #006C84;
       }

a.grnbl { color: #006C84 !important; }

h1.grnbl {

   border-bottom: 2px solid #006C84 !important;
   padding:5px;

}

/* ADOPE BLUE */

.adpbl {
   color: #0092CB;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

a.adpbl { color: #0092CB !important; }

h1.adpbl {

   border-bottom: 2px solid #0092CB !important;
   padding:5px;

}

/* ORANGE-CORAL */

.orngcrl {

   color: #FFCCBB;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important;

a.orngcrl { color: #FFCCBB !important; }

h1.orngcrl {

   border-bottom: 2px solid #FFCCBB !important;
   padding:5px;

}

/* THE GREYS */

   .thgrys {
   color: #777777;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

sans-serif !important; }

a.thgrys { color: #777777 !important; }

h1.thgrys {

   border-bottom: 2px solid #777777 !important; 
   padding: 5px;

}

/* JANINE's BLUE */

   .jnnbl {
   color: #00B4C7;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
    sans-serif !important;

}

a.jnnbl { color: #00B4C7 !important; }

h1.jnnbl {

   border-bottom: 2px solid #00B4C7 !important;
   padding:5px;

}

p { font-size: 19px !important; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; text-align: justify; }

p.DNAstyle {

    font-family: "Courier New", Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace! important;
    word-wrap: break-word;

}

.blockquotegrnbl {

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #006C84;
 color: #006C84;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

}

.opinions 
{font-size: 20px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
 text-align: right !important;
 width:100%;
 font-style: italic !important;

}

.blockquoteorngcrl {

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #FFCCBB;
 color: #FFCCBB;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

}

.blockquoteadpbl {

 text-align: justify;
 margin: 20px 0;
 padding: 20px;
 border-left: 5px solid #0092CB;
 color: #0092CB;
 background-color: #F8F8F8;
 line-height: 35px;
 font-size: 26px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important;

}

.figadpbl {
   color: #0092CB;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

.figgrnbl {
   color: #006C84;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

.figjnnbl {
   color: #00B4C7;
   text-align: justify;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
   sans-serif !important;
       }

/* BARCODING */ .backgroundbarcoding{ background:#F8F8F8 !important;

                                padding: 5px;
                                border: 1px solid #00B4C7;
                             }

.textDNAbarcoding {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left!important;
                                color: #00B4C7 !important;
                             }

.textboxesDNAbarcoding {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 16px  !important;
                                text-align: left!important;
                                color: #00B4C7 !important;
                                background:#F8F8F8 !important; 
                                padding: 5px;
                                border: 2px solid #00B4C7;:
                             }

.headerDNAbarcoding {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: center !important;
                                color: #00B4C7 !important;
                                background:#F8F8F8 !important; 
                                padding: 5px;
                             }

.DNAbarcoding { font-family: "Courier New" !important;

                                font-size: 13.8px !important;
                                text-align: left !important;
                                color: #00B4C7 !important;
                                background:#FFFFFF !important;
                                padding: 5px;
                       }

.jnnblbarcoding {

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #00B4C7;
                             }

.adpblbarcoding {

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #0092CB;
                             }

.grnblbarcoding {

                                font-family: "Courier New" !important; 
                                font-size: 13.8px !important;
                                color: #006C84;
                                background:#F8F8F8 !important;
                             }

myCarousel {

max-width: 800px; max-height: 600px; } .carousel-caption { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}

.peopleCarouselImg img { height: 400px; max-height: 400px; width: auto; }

.container { /*background-color: rgba(249, 251, 251, 1);*/ } .container-fluid { /*background-color: rgba(249, 251, 251, 1);*/ }

.img-top {

 max-width: 50% !important;
 height: auto;

}

.imgprotocols {

 width: 5% !important;
 height: 5% !important;

}

.spcmkr {

height: 65px;

}

ol, ul.ourlist {

font-size:17px;

} .nowbg., container, .row, .container-fluid, .spcmkr, #content, #globalWrapper{ background: none !important; }

.tableheadergrnbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableunevengrnbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#FFFFFF !important; 
                                padding: 15px;

}

.tableevengrnbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #006C84 !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableheaderadpbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

.tableunevenadpbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#FFFFFF !important; 
                                padding: 15px;

}

.tableevenadpbl {

                                font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
                                font-size: 18px  !important;
                                text-align: left !important;
                                color: #0092CB !important;
                                background:#F8F8F8 !important;
                                padding: 15px;

}

/* THIS IS FOR DROPDOWNMENU */

.collapsible {

 cursor: pointer;
 padding: 16px;
 width: 100%;
 border: none;
 text-align: left;
 outline:;
 font-size: 17px;
 background-color: #FFFFFF:

}

.cadpbl {

  color: white;
  background-color: #0092CB;

} .cgrnbl {

   color: white;
   background-color: #006C84;

} .corngcrl {

   color: #777777;
   background-color: #FFCCBB;

} .cthgrys {

   color: white;
   background-color: #777777;

} .cjnnbl {

   color: white;
   background-color: #00B4C7;

}

.activedropdownadpbl.collapsible:hover {

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.cadpbl.collapsible:hover {

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.corngcrl.collapsible:hover {

 background-color: #F8F8F8;
 color: #FFCCBB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.cjnnbl.collapsible:hover {

 background-color: #F8F8F8;
 color: #00B4C7;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownadpblprotocols.collapsible:hover {

 background-color: #F8F8F8;
 color: #0092CB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownorngcrl.collapsible:hover {

 background-color: #F8F8F8;
 color: #FFCCBB;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownjnnbl.collapsible:hover {

 background-color: #F8F8F8;
 color: #00B4C7;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.collapsible:after {

 content: '\002B';
 color: none;
 font-weight: bold;
 float: right;
 margin-left: 5px; 
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.activedropdownadpblprotocols:after, activedropdownadpbl:after, .activedropdownjnnbl:after, .activedropdownorngcrl:after{

 content: "\2212";
 /* color: #F8F8F8; */
 /* background-color: #0092CB; */
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

.content {

 padding: 0 18px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 background-color: #777777
 color: white;
 font-size: 17px !important;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", 
 sans-serif !important; 
 text-align: justify;

}

CircleLife {

 max-height:600px !important;
 length:auto !important;

}

button{ position:relative; } button span, { position:absolute; top:-85px;}

a.repositioner{ position:absolute; top:-85px;} span.repositioner{ position:absolute; top:-85px;}

section#timeline {

   width: 80%;
   margin: 20px auto;
   position: relative;}

section#timeline:before {

   content: ;
   display: block;
   position: absolute;
   left: 51.7%;
   top: 0;
   margin: 0 0 0 -1px;
   top: 8%;
   bottom: 80%;
   width: 2px;
   height: 90%;
   background: #0092CB;}

section#timeline article {

   width: 80%;
   margin: 0 0 20px 0;
   left: 12%;
   right: -4%;
   position: relative;}

section#timeline article:after {

   content: ;
   display: block;
   clear: both;}

section#timeline article div.inner {

   width: 43%;
   float: left;
   margin: 20px 0 0 0;
   border-radius: 6px;}

section#timeline article div.inner span.date {

   display: block;
   width: 60px;
   height: 60px;
   padding: 5px 0;
   position: absolute;
   top: 0;
   left: 50%;
   margin: 0 0 0 -32px;
   border-radius: 110%;
   font-size: 10px;
   font-weight: 900;
   line-height: normal;
   text-transform: uppercase;
   background: #25303B;            /*Date circle color*/
   color: #FFCCBB;                 /*date letter color*/

/* border: 4px solid red; inner ring r*/

   box-shadow: 0 0 0 7px #0092CB;} /*outer ring color*/

section#timeline article div.inner span.date span {

 display: block;
 text-align: center;}

section#timeline article div.inner span.date span.day {font-size: 10px;} section#timeline article div.inner span.date span.month {font-size: 16px;} section#timeline article div.inner span.date span.year {font-size: 10px;} section#timeline article div.inner h2 {

 padding: 15px;
 margin: 0;
 color: #f7f7f7;
 font-size: 18px;
 text-transform: uppercase;
 letter-spacing: -1px;
 border-radius: 6px 6px 0 0;
 position: relative;}

section#timeline article div.inner h2:after {

 content: ;
 position: absolute;
 top: 10px;
 right: -5px;
 	width: 10px;

height: 10px;

 -webkit-transform: rotate(-45deg);}

section#timeline article div.inner p {

 padding: 10px;
 margin: 0;
 font-size: 10px;
 background: #f7f7f7;
 color: #656565;
 border-radius: 0 0 6px 6px;}

section#timeline article:nth-child(2n+2) div.inner {float: right;} section#timeline article:nth-child(2n+2) div.inner h2:after {left: -5px;} section#timeline article:nth-child(5n) div.inner h2 {background: #006C84;} /*COLOR OF CONTAINER*/ section#timeline article:nth-child(5n) div.inner h2:after {background: #006C84;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+1) div.inner h2 {background: #00B4C7;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+1) div.inner h2:after {background: #00B4C7;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+2) div.inner h2 {background: #FFCCBB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+2) div.inner h2:after {background: #FFCCBB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+3) div.inner h2 {background: #0092CB;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+3) div.inner h2:after {background: #0092CB;/*COLOR OF ARROW*/} section#timeline article:nth-child(5n+4) div.inner h2 {background: #008284;/*COLOR OF CONTAINER*/} section#timeline article:nth-child(5n+4) div.inner h2:after {background: #008284;}/*COLOR OF ARROW*/

/* ------ TEAM MEMBERS ------ */

team .card {

border: none; background: #ffffff; padding: 40px; padding-bottom: 20px; overflow: auto; }

supervisors .card_sup {

border: none; height: 430px; background: #ffffff; padding: 30px; padding-bottom: 20px; overflow: auto; margin: 20px; position: relative; z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }

.img_sup { max-width: 60%; height: auto; border-radius: 50%; }

.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); border-radius: .25rem; }

.image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); }

.mainflip { -webkit-transition: 2s; -webkit-transform-style: preserve-3d; -ms-transition: 2s; -moz-transition: 2s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 2s; transform-style: preserve-3d; position: relative; }

.frontside { position: relative; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 1; margin-bottom: 30px; -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }

.backside { position: absolute; top: 0; left: 0; background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); box-shadow: 5px 7px 9px -4px rgb(158, 158, 158); }

.frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 2s; -webkit-transform-style: preserve-3d; -moz-transition: 2s; -moz-transform-style: preserve-3d; -o-transition: 2s; -o-transform-style: preserve-3d; -ms-transition: 2s; -ms-transform-style: preserve-3d; transition: 2s; transform-style: preserve-3d; }

.frontside .card, .backside .card { height: 500px; width: auto; }

.frontside .card .card-title, .backside .card .card-title { color: #007b5e !important; }

.frontside .card .card-body img { max-width: 60%; height: auto; border-radius: 50%; }

.sup_title {

       margin: -3px !important;

}

/* KATEX */

.katex-display {

 position: relative;

}

.katex-display .katex .eqno {

 display: block;
 position: absolute;
 right: 0;
 top: 50%;
 line-height: 1;
 overflow: scroll;

} .text {

   font-size: 16px;
   padding: 16px 2px;

}

/* ------ SUB-DROPDOWNS ------ */ /*hide the inputs/checkmarks*/ input.inputhide {

 display: none;

}

/*hide the submenu*/ ul.submenu {

 max-height: 0;
 overflow: hidden;

} .subcontent {

   margin-top: 20px;
   font-size: 17px;

}

.subdropdown{

   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif !important; 
   font-size: 17px;
   text-decoration: none !important;
   font-weight: 300 !important;
   padding: 18px;
   margin: -11px;

}

/*position the label*/ label {

   position: relative;
   display: block;
   cursor: pointer;

}

/*show the submenu when checked*/ input:checked~ul.submenu {

 max-height: 300px;

}

.content {

   overflow: auto;

}

/*bullet points in our colours*/

   ul.uladpbl, ul.ulorngcrl, ul.uljnnbl, ul.ulgrnbl {
           list-style: none;
   }

ul.uladpbl li::before {

   content: "\2022"; color: #0092CB;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.ulorngcrl li::before {

   content: "\2022"; color: #FFCCBB;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.uljnnbl li::before {

   content: "\2022"; color: #00B4C7;
   display: inline-block; width: 1em;
   margin-left: -1em

} ul.ulgrnbl li::before {

   content: "\2022"; color: #006C84;
   display: inline-block; width: 1em;
   margin-left: -1em

}

/* MEDALS */

   img.medals {float: right;
   max-width: 30%;
   height: auto; 
   padding: 20px;
   margin-top: -10px;

}

   img.medals2 {float: left;
   max-width: 30%;
   height: auto; 
   padding: 20px;
   margin-right: 20px;
   margin-top: -20px;

}

ol p {
   font-size: 16px !important;    
   }

.medalicon {

 height: 25px !important;

}

to_dna.input {

visibility: visible !important; }

ul.acklist li {

   list-style: none !important; 
   font-size: 20px;
   font-weight: bold;

} ol p i {

   font-size: 16px;

}

ul.reflist li {

   list-style: none !important; 
   font-size: 16px;

}

.looove { margin: 20px; padding: 20px; max-height: 500px !important; }

.loooove { margin: 20px; padding: 20px; max-height: 600px !important; }

figcaption { text-align: justify !important; font-size: 16px !important; }

.modal-body { overflow-x: auto; }

.moniek {

   position: relative;
   width: 33.3333%;
   float: left;
   margin-bottom: 40px;

}

.storyimage {

 opacity: 1;
 display: block;
 width: 110%;
 height: auto;
 transition: .5s ease;
 backface-visibility: hidden;

}

.middle {

   transition: .5s ease;
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   text-align: center;

}

.moniek:hover .storyimage {

   opacity: 0.3;

}

.moniek:hover .middle {

   opacity: 1;

}

.imagequote {

   float: right;
   width: 42%;
   height: auto;
   padding: 20px;
   padding-bottom: 40px;
   margin-top: -25px;

}