Difference between revisions of "Team:SDU-Denmark/css/general"

 
(172 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
div#content {
 +
  overflow:hidden;
 +
}
 +
 
/********************************************************************/
 
/********************************************************************/
 
/********************* DEFAULT WIKI SETTINGS **********************/
 
/********************* DEFAULT WIKI SETTINGS **********************/
Line 31: Line 35:
 
}
 
}
  
 +
 +
.collapseButton {
 +
  text-align: center;
 +
  margin-top: -10px;
 +
  margin-bottom: -10px;
 +
}
  
  
Line 37: Line 47:
 
/********************************************************************/
 
/********************************************************************/
 
#HQ_page h1 {
 
#HQ_page h1 {
−
   font-family: 'poppins', sans-serif;
+
   font-family: 'roboto', sans-serif;
−
   font-size: 500%;
+
  font-weight:100;
 +
   font-size: 300%;
 
   color: rgb(0, 0, 0);
 
   color: rgb(0, 0, 0);
 +
}
 +
 +
span#PowerLeafH1 {
 +
  font-size: 140%;
 
}
 
}
  
 
#HQ_page h2 {
 
#HQ_page h2 {
−
   font-family: 'poppins', sans-serif;
+
   font-family: 'roboto', sans-serif;
 
   font-size: 300%;
 
   font-size: 300%;
 
   color: rgb(0, 0, 0, .8);
 
   color: rgb(0, 0, 0, .8);
−
   margin-bottom: -15px;
+
   margin-bottom: -5px;
 +
  padding-top:5px;
 +
  letter-spacing: 0.1em;
 
}
 
}
  
 
#HQ_page h3 {
 
#HQ_page h3 {
−
   font-family: ‘helvetica neue’, helvetica, arial, sans-serif;
+
   font-family: arial, sans-serif;
−
   font-size: 200%;
+
   font-size: 300%;
 
   color: rgb(0, 0, 0, .8);
 
   color: rgb(0, 0, 0, .8);
 +
  display:inline-block;
 +
  letter-spacing: 0.1em;
 
}
 
}
 +
 +
#HQ_page h4 {
 +
    font-family: helvetica;
 +
    font-size: 150%;
 +
    font-weight: 200;
 +
    margin-bottom: 25px;
 +
}
 +
  
 
#HQ_page h5 {
 
#HQ_page h5 {
Line 66: Line 93:
 
         z-index: 2;
 
         z-index: 2;
 
         font-weight:300;
 
         font-weight:300;
−
box-shadow:inset 0 -1px 0 rgba(255,255,255,.25);
 
 
         margin:-9px -10px -10px -10px;
 
         margin:-9px -10px -10px -10px;
 
}
 
}
  
 +
#HQ_page .container-fluid a {
 +
  color:#73918A;
 +
padding: 0;
 +
}
 +
 +
#HQ_page a.btn.btn-default {
 +
padding: 10px 15px;
 +
}
 +
 +
#HQ_page .container-fluid a:hover {
 +
  color:#E99662 !important;
 +
}
 +
 +
#HQ_page i a {
 +
  color:#73918A;
 +
}
 +
 +
#HQ_page i a:hover {
 +
  color:#E99662 !important;
 +
}
 +
 +
#HQ_page b a {
 +
  color:#73918A;
 +
}
 +
 +
#HQ_page b a:hover {
 +
  color:#E99662 !important;
 +
}
 +
 +
a.modal-link {
 +
  color:#73918A;
 +
}
 +
 +
a.modal-link:hover {
 +
  color:#E99662 !important;
 +
}
  
 
#HQ_page p {
 
#HQ_page p {
−
     font-family: ‘Helvetica Neue’, Helvetica, arial, sans-serif;
+
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
 
     font-size: 16px;
 
     font-size: 16px;
 
     line-height: 24px;
 
     line-height: 24px;
 
     text-align: justify;
 
     text-align: justify;
−
     color: rgba(0, 0, 0, .8);
+
     color: rgba(0, 0, 0, .78);
−
     padding-top: 5px;
+
    padding-top: 0px;
 +
    display:inline-block;
 +
}
 +
 
 +
#HQ_page p.raleway {
 +
    font-family: "Raleway", sans-serif;
 +
    font-size: 14px;
 +
    margin-bottom:0px;
 +
}
 +
 
 +
#HQ_page #abstract p.raleway {
 +
    font-size: 16px;
 +
}
 +
 
 +
#HQ_page #about-our-wiki p.raleway {
 +
    font-size: 16px;
 +
}
 +
 
 +
 
 +
#HQ_page p.P-Larger {
 +
    font-size: 24px;
 +
    margin-top:25px;
 +
}
 +
 
 +
 
 +
 
 +
span.largeFirstLetter {
 +
  font-size:150%;
 +
}
 +
 
 +
 
 +
#HQ_page ul.list li {
 +
    margin-bottom: 15px;
 +
    list-style-type: none;
 +
    list-style: disc;
 +
    color: rgba(0,0,0,0.78);
 +
    font-size: 16px;
 +
    line-height: 22px;
 +
}
 +
 
 +
#HQ_page ol.list li {
 +
    margin-bottom: 15px;
 +
    color: rgba(0,0,0,0.78);
 +
    font-size: 16px;
 +
    line-height: 22px;
 +
}
 +
 
 +
#HQ_page ul.list.mini-list li {
 +
    margin-bottom: 5px;
 +
    list-style-type: none;
 +
    list-style: disc;
 +
    color: rgba(0,0,0,0.78);
 +
    font-size: 14px;
 +
    line-height: 22px;
 +
}
 +
 
 +
#HQ_page ul.list {
 +
    margin: 0px 0px 0px 10px;
 +
    padding: 0px 30px;
 +
    text-align: justify;
 +
}
 +
 
 +
 
 +
#HQ_page li.project-outline-checked:before {
 +
    content: '✔';
 +
    color: #76925E;
 +
    margin-left: -1em;
 +
    margin-right: 1em;
 +
}
 +
 
 +
#HQ_page li.project-outline-crossed:before {
 +
    content: '✗'; 
 +
    color: #E99662;
 +
    margin-left: -1em;
 +
    margin-right: 1em;
 +
}
 +
 
 +
#HQ_page ul.project-outline {
 +
  padding-left:20px;
 +
  padding-bottom:15px;
 +
  text-indent:2px;
 +
    list-style: none;
 +
  list-style-position:outside; 
 +
}
 +
 
 +
#HQ_page table.table td {
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
 +
    font-size: 16px;
 +
    line-height: 24px;
 +
    text-align: justify;
 +
    color: rgba(0, 0, 0, .78);
 +
}
 +
 
 +
#HQ_page table.table th {
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
 +
    font-size: 20px;
 +
    line-height: 24px;
 +
    text-align: justify;
 +
    color: rgba(0, 0, 0, .78);
 +
}
 +
 
 +
 
 +
 
 +
#HQ_page br {
 +
  display: block;
 +
  margin-top: 10px;
 +
  content: " ";
 +
  line-height:22px;
 +
}
 +
 
 +
#HQ_page br.shortBreak {
 +
    margin-top: 5px;
 +
}
 +
 
 +
#HQ_page br.miniBreak {
 +
    margin-top: 0px;
 +
}
 +
 
 +
#HQ_page br.noContent {
 +
    content:none;
 +
}
 +
 
 +
 
 +
hr {
 +
    margin-top: 20px;
 +
    margin-bottom: 20px;
 +
    border: 0;
 +
    border-top: 1px solid rgba(0,0,0,0.8);
 +
}
 +
 
 +
 
 +
 
 +
span.btn-link{
 +
     padding: inherit;
 +
    font-size: inherit;
 +
    line-height: inherit;
 +
    border: inherit;
 +
    font-weight: inherit;
 +
    color: #73918A;
 +
    margin: inherit;
 +
    vertical-align: inherit;
 +
    text-align: inherit;
 +
    display: inherit;
 +
    cursor:pointer;
 +
    margin-bottom:0px;
 +
}
 +
 
 +
span.btn-link:hover {
 +
    color: #E99662;
 +
}
 +
 
 +
.modal-header .close {
 +
    margin-top: 10px;
 +
    margin-right: 15px;
 +
}
 +
 
 +
.modal-header {
 +
    padding: 0px;
 +
    border-bottom: 1px solid #ddd;
 +
    text-align: center;
 +
}
 +
 
 +
h2.modal-title {
 +
  margin-top: 32px;
 +
  padding-bottom: 12px;
 +
  font-size: 300% !important;
 +
}
 +
 
 +
.modal-body {
 +
  padding:40px 0px;
 +
}
 +
 
 +
a.btn.btn-default {
 +
    color: #73918A;
 +
}
 +
 
 +
 
 +
.div-link {
 +
  display:inline-block;
 +
  cursor:pointer;
 +
}
 +
 
 +
 
 +
.double-arrow-down {
 +
    height: 20px;
 +
    pointer-events: none;
 +
    position: relative;
 +
    top: 4px;
 +
    margin-right:10px;
 +
    transition: 0.5s;
 +
}
 +
 
 +
.double-arrow-down.active {
 +
    transform: rotate(180deg);
 +
    transition: 0.5s;
 +
}
 +
 
 +
 
 +
.double-arrow-down2 {
 +
    height: 20px;
 +
    pointer-events: none;
 +
    position: relative;
 +
    top: 4px;
 +
    margin-right:10px;
 +
    transition: 0.5s;
 +
}
 +
 
 +
.double-arrow-down2.active {
 +
    transform: rotate(180deg);
 +
    transition: 0.5s;
 +
}
 +
 
 +
 
 +
 
 +
/*********REMEMBER THIS HR IS MADE AS A CLASS**********/
 +
.hr {
 +
  display: inline-block;
 +
}
 +
.hr:after {
 +
  content: '';
 +
  display: block;
 +
  border-top: 1px solid black;
 +
  margin: 1% 0.4% -1% 0.4%;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.reference {
 +
  position: relative;
 +
  display:inline-block;
 +
  opacity:1;
 +
  height: 16px;
 +
  width: 19px;
 +
  background: url(https://static.igem.org/mediawiki/2016/0/0a/T--SDU-Denmark--reference.png) no-repeat top center;
 +
  background-size: cover;
 +
  z-index: 1;
 +
  margin-right: 2px;
 +
  margin-left: 2px; 
 +
}
 +
 
 +
.reference .referencetext {
 +
  visibility: hidden;
 +
  font-size:12px;
 +
  width: 200px;
 +
  background-color: #D0D7D6;
 +
  color:#fff;
 +
  text-align: center;
 +
  padding: 5px 0;
 +
  border: 1px solid #99ACA8;
 +
  border-radius:8px;
 +
  position: absolute;
 +
  z-index: 1;
 +
  bottom:100%;
 +
  left:50%;
 +
  margin-left: -100px;
 +
  opacity:0;
 +
}
 +
 
 +
.reference:hover .referencetext {
 +
  visibility: visible;
 +
  opacity:1;
 +
  transition: opacity 1s;
 +
}
 +
 
 +
.reference.active .referencetext {
 +
  visibility: visible;
 +
  opacity:1;
 +
  transition: opacity 1s;
 +
}
 +
 
 +
.reference .referencetext::after {
 +
  content: " ";
 +
  position:absolute;
 +
  top: 100%;
 +
  left: 50%;
 +
  margin-left: -5px;
 +
  border-width: 5px;
 +
  border-style: solid;
 +
  border-color: #99ACA8 transparent transparent transparent;
 +
}
 +
 
 +
.reference .referencetext > a {
 +
  color: #537B72;
 +
  line-height: 21px;
 +
}
 +
 
 +
.reference .referencetext > a:hover {
 +
  color: #E99662;
 +
  text-decoration:underline !important;
 +
}
 +
 
 +
#HQ_page object {
 +
  pointer-events:none;
 +
}
 +
 
 +
#HQ_page object.project-design-icon {
 +
  margin-bottom:30px;
 +
  width:20%;
 +
}
 +
 
 +
 
 +
 
 +
#HQ_page p.citation {
 +
  text-align: center;
 +
  font-size: 16px;
 +
  margin-top: 15px;
 +
}
 +
 
 +
#HQ_page p.citation-by {
 +
  float: right;
 +
  margin-bottom: 25px;
 +
}
 +
 
 +
 
 +
#HQ_page .figure-text p {
 +
  font-size: 13px;
 +
  line-height: 1.5em;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#HQ_page div.svg:hover {
 +
  border: 1px solid #76925E;
 +
  border-radius: 10px;
 +
}
 +
 
 +
#HQ_page div.svg-credits:hover {
 +
  border: 1px solid #E2DCA8;
 +
  border-radius: 10%;
 +
}
 +
 
 +
 
 +
#HQ_page div.svg-project{
 +
    text-align:center;
 +
}
 +
 
 +
#HQ_page div.svg-project:hover {
 +
    border: 1px solid rgba(0,0,0,0.3);
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 +
 
 +
#HQ_page object.clickable {
 +
  display: block;
 +
  position: relative;
 +
  z-index: -1;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.reference-2 {
 +
  position: relative;
 +
  display:inline-block;
 +
  opacity:1;
 +
  border-bottom: 1px dotted rgba(0,0,0,0.8);
 +
  z-index: 1;
 +
  margin-right: 2px;
 +
  margin-left: 2px; 
 +
}
 +
 
 +
.reference-2 .referencetext-2 {
 +
  visibility: hidden;
 +
  font-size:12px;
 +
  width: 60vw;
 +
  background-color: #FFF;
 +
  color:#fff;
 +
  text-align: center;
 +
  padding: 5px 0;
 +
  border: 1px solid #99ACA8;
 +
  border-radius:8px;
 +
  position: absolute;
 +
  z-index: 1;
 +
  bottom:100%;
 +
  left:50%;
 +
  margin-left: -30vw;
 +
  opacity:0;
 +
}
 +
 
 +
.reference-2:hover .referencetext-2 {
 +
  visibility: visible;
 +
  opacity:1;
 +
  transition: opacity 1s;
 +
}
 +
 
 +
.reference-2.active .referencetext-2 {
 +
  visibility: visible;
 +
  opacity:1;
 +
  transition: opacity 1s;
 +
}
 +
 
 +
.reference-2 .referencetext-2::after {
 +
  content: " ";
 +
  position:absolute;
 +
  top: 100%;
 +
  left: 50%;
 +
  margin-left: -5px;
 +
  border-width: 5px;
 +
  border-style: solid;
 +
  border-color: #99ACA8 transparent transparent transparent;
 
}
 
}

Latest revision as of 00:38, 2 November 2017

div#content { 

 overflow:hidden;

}

/********************************************************************/ /********************* DEFAULT WIKI SETTINGS **********************/ /********************************************************************/


/* Clear the default wiki settings */

#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { width:100%; padding:0px; margin-top:-32px; margin-left:0px;} body {background-color: white;} #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }


/********************************************************************/ /************************ BOOTSTRAP FIX ***************************/ /********************************************************************/


.container-fluid { 

   padding-right:0px;
   padding-left:0px;
   margin-right:auto;
   margin-left:auto
}

.row { 

 margin-left: 0px;
 margin-right: 0px;

}


.collapseButton { 

 text-align: center;
 margin-top: -10px;
 margin-bottom: -10px;

}


/********************************************************************/ /****************************** FONTS ******************************/ /********************************************************************/

  1. HQ_page h1 {
 font-family: 'roboto', sans-serif;
 font-weight:100;
 font-size: 300%;
 color: rgb(0, 0, 0);

}

span#PowerLeafH1 { 

 font-size: 140%;

}

  1. HQ_page h2 {
 font-family: 'roboto', sans-serif;
 font-size: 300%;
 color: rgb(0, 0, 0, .8);
 margin-bottom: -5px;
 padding-top:5px;
 letter-spacing: 0.1em;

}

  1. HQ_page h3 {
 font-family: arial, sans-serif;
 font-size: 300%;
 color: rgb(0, 0, 0, .8);
 display:inline-block;
 letter-spacing: 0.1em;

}

  1. HQ_page h4 {
   font-family: helvetica;
   font-size: 150%;
   font-weight: 200;
   margin-bottom: 25px;

}


  1. HQ_page h5 {

position: relative; font-family:"Helvetica Neue","Helvetica",sans-serif; font-weight:normal; font-size:1.3rem; margin:0; padding:0; line-height:44px; text-align:center; 

       z-index: 2;
       font-weight:300;
       margin:-9px -10px -10px -10px;

}

  1. HQ_page .container-fluid a {
 color:#73918A;
padding: 0;

}

  1. HQ_page a.btn.btn-default {
padding: 10px 15px;

}

  1. HQ_page .container-fluid a:hover {
 color:#E99662 !important;

}

  1. HQ_page i a {
 color:#73918A;

}

  1. HQ_page i a:hover {
 color:#E99662 !important;

}

  1. HQ_page b a {
 color:#73918A;

}

  1. HQ_page b a:hover {
 color:#E99662 !important;

}

a.modal-link { 

 color:#73918A;

}

a.modal-link:hover { 

 color:#E99662 !important;

}

  1. HQ_page p {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
   font-size: 16px;
   line-height: 24px;
   text-align: justify;
   color: rgba(0, 0, 0, .78);
   padding-top: 0px;
   display:inline-block;

}

  1. HQ_page p.raleway {
   font-family: "Raleway", sans-serif;
   font-size: 14px;
   margin-bottom:0px;

}

  1. HQ_page #abstract p.raleway {
   font-size: 16px;

}

  1. HQ_page #about-our-wiki p.raleway {
   font-size: 16px;

}


  1. HQ_page p.P-Larger {
   font-size: 24px;
   margin-top:25px;

}


span.largeFirstLetter { 

 font-size:150%;

}


  1. HQ_page ul.list li {
   margin-bottom: 15px;
   list-style-type: none;
   list-style: disc;
   color: rgba(0,0,0,0.78);
   font-size: 16px;
   line-height: 22px;

}

  1. HQ_page ol.list li {
   margin-bottom: 15px;
   color: rgba(0,0,0,0.78);
   font-size: 16px;
   line-height: 22px;

}

  1. HQ_page ul.list.mini-list li {
   margin-bottom: 5px;
   list-style-type: none;
   list-style: disc;
   color: rgba(0,0,0,0.78);
   font-size: 14px;
   line-height: 22px;

}

  1. HQ_page ul.list {
   margin: 0px 0px 0px 10px;
   padding: 0px 30px;
   text-align: justify;

}


  1. HQ_page li.project-outline-checked:before {
   content: '✔';
   color: #76925E;
   margin-left: -1em; 
   margin-right: 1em;

}

  1. HQ_page li.project-outline-crossed:before {
   content: '✗';   
   color: #E99662;
   margin-left: -1em; 
   margin-right: 1em;

}

  1. HQ_page ul.project-outline {
  padding-left:20px;
  padding-bottom:15px;
  text-indent:2px;
   list-style: none;
  list-style-position:outside;

}

  1. HQ_page table.table td {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
   font-size: 16px;
   line-height: 24px;
   text-align: justify;
   color: rgba(0, 0, 0, .78);

}

  1. HQ_page table.table th {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
   font-size: 20px;
   line-height: 24px;
   text-align: justify;
   color: rgba(0, 0, 0, .78);

}


  1. HQ_page br {
  display: block;
  margin-top: 10px;
  content: " ";
  line-height:22px;

}

  1. HQ_page br.shortBreak {
   margin-top: 5px;

}

  1. HQ_page br.miniBreak {
   margin-top: 0px;

}

  1. HQ_page br.noContent {
   content:none;

}


hr { 

   margin-top: 20px;
   margin-bottom: 20px;
   border: 0;
   border-top: 1px solid rgba(0,0,0,0.8);

}


span.btn-link{ 

   padding: inherit;
   font-size: inherit;
   line-height: inherit;
   border: inherit;
   font-weight: inherit;
   color: #73918A;
   margin: inherit;
   vertical-align: inherit;
   text-align: inherit;
   display: inherit;
   cursor:pointer;
   margin-bottom:0px;

}

span.btn-link:hover { 

   color: #E99662;

}

.modal-header .close { 

   margin-top: 10px;
   margin-right: 15px;

}

.modal-header { 

   padding: 0px;
   border-bottom: 1px solid #ddd;
   text-align: center;

}

h2.modal-title { 

 margin-top: 32px;
 padding-bottom: 12px;
 font-size: 300% !important;

}

.modal-body { 

 padding:40px 0px;

}

a.btn.btn-default { 

   color: #73918A;

}


.div-link { 

 display:inline-block;
 cursor:pointer;

}


.double-arrow-down { 

   height: 20px;
   pointer-events: none;
   position: relative;
   top: 4px;
   margin-right:10px;
   transition: 0.5s;

}

.double-arrow-down.active { 

   transform: rotate(180deg);
   transition: 0.5s;

}


.double-arrow-down2 { 

   height: 20px;
   pointer-events: none;
   position: relative;
   top: 4px;
   margin-right:10px;
   transition: 0.5s;

}

.double-arrow-down2.active { 

   transform: rotate(180deg);
   transition: 0.5s;

}


/*********REMEMBER THIS HR IS MADE AS A CLASS**********/ .hr { 

 display: inline-block;

} .hr:after { 

 content: ;
 display: block;
 border-top: 1px solid black;
 margin: 1% 0.4% -1% 0.4%;

}



.reference { 

 position: relative;
 display:inline-block;
 opacity:1;
 height: 16px;
 width: 19px;
 background: url(T--SDU-Denmark--reference.png) no-repeat top center;
 background-size: cover;
 z-index: 1;
 margin-right: 2px;
 margin-left: 2px;

}

.reference .referencetext { 

 visibility: hidden;
 font-size:12px;
 width: 200px;
 background-color: #D0D7D6;
 color:#fff;
 text-align: center;
 padding: 5px 0;
 border: 1px solid #99ACA8;
 border-radius:8px; 
 position: absolute;
 z-index: 1;
 bottom:100%;
 left:50%;
 margin-left: -100px;
 opacity:0;

}

.reference:hover .referencetext { 

 visibility: visible;
 opacity:1;
 transition: opacity 1s;

}

.reference.active .referencetext { 

 visibility: visible;
 opacity:1;
 transition: opacity 1s;

}

.reference .referencetext::after { 

 content: " ";
 position:absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #99ACA8 transparent transparent transparent;

}

.reference .referencetext > a { 

 color: #537B72;
 line-height: 21px;

}

.reference .referencetext > a:hover { 

 color: #E99662;
 text-decoration:underline !important;

}

  1. HQ_page object {
 pointer-events:none;

}

  1. HQ_page object.project-design-icon {
 margin-bottom:30px;
 width:20%;

}


  1. HQ_page p.citation {
 text-align: center; 
 font-size: 16px; 
 margin-top: 15px;

}

  1. HQ_page p.citation-by {
 float: right;
 margin-bottom: 25px;

}


  1. HQ_page .figure-text p {
 font-size: 13px;
 line-height: 1.5em;

}



  1. HQ_page div.svg:hover {
 border: 1px solid #76925E;
 border-radius: 10px;

}

  1. HQ_page div.svg-credits:hover {
 border: 1px solid #E2DCA8;
 border-radius: 10%;

}


  1. HQ_page div.svg-project{
   text-align:center;

}

  1. HQ_page div.svg-project:hover {
   border: 1px solid rgba(0,0,0,0.3);
   border-radius: 5px;
   cursor: pointer;

}


  1. HQ_page object.clickable {
 display: block;
 position: relative;
 z-index: -1;

}





.reference-2 { 

 position: relative;
 display:inline-block;
 opacity:1;
 border-bottom: 1px dotted rgba(0,0,0,0.8);
 z-index: 1;
 margin-right: 2px;
 margin-left: 2px;

}

.reference-2 .referencetext-2 { 

 visibility: hidden;
 font-size:12px;
 width: 60vw;
 background-color: #FFF;
 color:#fff;
 text-align: center;
 padding: 5px 0;
 border: 1px solid #99ACA8;
 border-radius:8px; 
 position: absolute;
 z-index: 1;
 bottom:100%;
 left:50%;
 margin-left: -30vw;
 opacity:0;

}

.reference-2:hover .referencetext-2 { 

 visibility: visible;
 opacity:1;
 transition: opacity 1s;

}

.reference-2.active .referencetext-2 { 

 visibility: visible;
 opacity:1;
 transition: opacity 1s;

}

.reference-2 .referencetext-2::after { 

 content: " ";
 position:absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #99ACA8 transparent transparent transparent;

}