Difference between revisions of "Template:Toulouse-INSA-UPS/PERSO-CSS"

 
(180 intermediate revisions by 6 users not shown)
Line 1: Line 1:
−
<html>
+
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
<style class="personnal_css">
+
/*
 +
CSS for the iGEM 2018 Team : Toulouse INSA-UPS
 +
Creator : Yohann CHARREIRE--KIRBACH (Sentiare)
 +
Editors : Sentiare
 +
Last Update : Thu 06/09/18 @ 10:55
 +
                                                                              */
 +
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
 
 +
 
 +
/**//*OVERRIDE DEFAULT CSS*//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* This section is for removing the default iGEM CSS
 +
* It should be complete, but i maybe missed something
 +
*/
  
−
/*OVERRIDE DEFAULT CSS*/
 
 
#HQ_page, #content {
 
#HQ_page, #content {
 
width:100%;
 
width:100%;
Line 9: Line 20:
 
}
 
}
  
−
#top_title {
+
#mw-content-text p:first-child {
−
visibility:hidden;
+
−
height:0;
+
 
margin:0;
 
margin:0;
 
padding:0;
 
padding:0;
 
}
 
}
  
−
/* GENERAL */
+
a#top {
 +
height:0;
 +
}
 +
 
 +
#top_title, #top_title div, #top_title h1 #firstHeading {
 +
visibility:hidden !important;
 +
height:0 !important;
 +
margin:0 !important;
 +
padding:0 !important;
 +
}
 +
 
 +
#globalWrapper {
 +
padding-bottom:0;
 +
        font-size: 100%;
 +
}
 +
 
 +
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul {
 +
margin:0;
 +
}
 +
 
 +
li {
 +
margin-bottom:0;
 +
}
 +
 
 +
/**//*CSS of the iGEM menu *//**//**//**//**//**//**//**//**//**//**//**//*****/
 +
/* The iGEM black menu doesn't match his background spacer
 +
* This CSS just increase his size by 2px to make them both match in height.
 +
*/
 +
#top_menu_14 {
 +
height:18px; /*Now it matches his own spacer height*/
 +
}
 +
 
 +
/**//*IMAGES*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/
 +
/**//*Team Logo*//**/
 +
.img_team_logo {
 +
height:3.5rem;
 +
width:auto;
 +
}
 +
 
 +
.center_img{
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    position: relative;
 +
}
 +
 
 +
.rotate {
 +
position: relative;
 +
z-index: auto;
 +
margin-top: auto;
 +
padding-top:auto;
 +
margin-left: auto;
 +
padding-left:auto;
 +
-webkit-transform: rotate(-90deg);
 +
    -moz-transform: rotate(-90deg);
 +
    -o-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
}
 +
 
 +
/**//*The text of the logo*//**/
 +
a.navbar-brand {
 +
font-size:1.5rem;
 +
}
 +
 
 +
/**//*In Page Documents*//**//**//**//**//**//**//**//**//**//**//**//**//*****/
 +
/* This section is about the different elements around the document reader in our
 +
* page. Remember : NO IFRAME!!!
 +
*/
 +
 
 +
/**//*PDF*//**/
 +
.black-pdf-spacer {
 +
width:100%;
 +
height:1rem;
 +
background-color:#3F3F3F;
 +
 
 +
}
 +
 
 +
/**//* GENERAL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//*****/
 +
/* This section is mainly about title and text padding, margin and size
 +
*/
 
body, html {
 
body, html {
 +
position:relative
 
width:100%;
 
width:100%;
 
height:auto;
 
height:auto;
 
}
 
}
  
−
h1 {
+
#CONTENT h1, .collapse h1 {
−
padding-top:3rem;
+
margin-top:3rem !important;
 +
margin-bottom:0rem !important;
 
}
 
}
  
−
h2 {
+
#CONTENT h2, .collapse h2 {
−
padding-top:2rem;
+
margin-top:0rem !important;
 +
margin-bottom:0rem !important;
 +
padding:0.34rem 0 0.17rem 0;
 
}
 
}
  
−
h3 {
+
#CONTENT h3, .collapse h3{
−
padding-top:2rem;
+
margin-top:1rem !important;
 +
margin-bottom:0rem !important;
 
}
 
}
  
Line 38: Line 132:
 
}
 
}
  
−
/* Anchors */
+
#MENU {
−
a.footer {
+
top:18px;
−
text-decoration:underline;
+
font-size:1rem;
 
}
 
}
  
−
a.footer:link, a.footer:visited {
+
a.dropdown-item {
−
color:#f8f9fa;
+
color:black !important;
 
}
 
}
  
−
a.footer:hover, a.footer:active {
+
p { /*General*/
−
color:#d8d9da;
+
font-size:1rem !important;  
 
}
 
}
  
−
/* BANNER */
+
h3 {
 +
font-size:1.5rem;
 +
}
 +
 
 +
h4 {
 +
font-size:1.25rem;
 +
}
 +
 
 +
h5, h6 {
 +
font-size:1rem;
 +
}
 +
 
 +
.list {
 +
position: relative;
 +
margin-top: -15px;
 +
padding-top: 1px;
 +
    margin-bottom: 20px;
 +
padding-bottom: 1px;
 +
      }
 +
 
 +
div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content  { /*Timeline font*/
 +
font-size:1rem;
 +
}
 +
 
 +
#DISCLAIMER p { /*FOOTER font*/
 +
font-size:0.7rem;
 +
}
 +
 
 +
/**//*columns*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/
 +
 
 +
.bicolumn {
 +
    -webkit-column-count:2;
 +
    -moz-column-count: 2;
 +
    column-count: 2;
 +
}
 +
 
 +
.tricolumn {
 +
 
 +
    -webkit-columns:3;
 +
    -moz-columns: 3;
 +
    columns: 3;
 +
}
 +
 
 +
.quadricolumn {
 +
    -webkit-columns:4;
 +
    -moz-columns: 4;
 +
    columns: 4;
 +
}
 +
 
 +
div.imgtxtcenter {
 +
    min-height: 800px;
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    background-color:yellow;
 +
 +
}
 +
 
 +
/**//* BANNER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* #BANNER refers to the picture on the top of the page.
 +
* It uses media queries.
 +
*/
 +
 
 
.img_banner {
 
.img_banner {
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
−
filter:grayscale(100%);
 
 
width:100%;
 
width:100%;
 
height:auto;
 
height:auto;
Line 70: Line 223:
 
@media screen and (min-width:100px) and (max-width:576px) {
 
@media screen and (min-width:100px) and (max-width:576px) {
 
#BANNER {
 
#BANNER {
−
height:40px;
+
height:70px;
 
}
 
}
 
}
 
}
Line 76: Line 229:
 
@media screen and (min-width:577px) and (max-width:768px) {
 
@media screen and (min-width:577px) and (max-width:768px) {
 
#BANNER {
 
#BANNER {
−
height:80px;
+
height:140px;
 
}
 
}
 
}
 
}
Line 82: Line 235:
 
@media screen and (min-width:769px) and (max-width:992px) {
 
@media screen and (min-width:769px) and (max-width:992px) {
 
#BANNER {
 
#BANNER {
−
height:110px;
+
height:150px;
 
}
 
}
 
}
 
}
Line 88: Line 241:
 
@media screen and (min-width:993px) and (max-width:1200px) {
 
@media screen and (min-width:993px) and (max-width:1200px) {
 
#BANNER {
 
#BANNER {
−
height:140px;
+
height:190px;
 
}
 
}
 
}
 
}
Line 94: Line 247:
 
@media screen and (min-width:1201px) {
 
@media screen and (min-width:1201px) {
 
#BANNER {
 
#BANNER {
−
height:170px;
+
height:230px;
 
}
 
}
 
}
 
}
  
−
 
+
/**//* HR BANNERS *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
−
 
+
/* Is it a banner, is it a hr ? No it's a picture which acts like a hr.
−
/* HR BANNERS */
+
*/
−
img.hr_img {
+
−
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
+
−
filter:grayscale(100%);
+
−
width:100%;
+
−
}
+
−
 
+
 
div.hr_img {
 
div.hr_img {
 +
width:100%;
 
height:5rem;
 
height:5rem;
 
overflow:hidden;
 
overflow:hidden;
 
}
 
}
  
−
/* HR */
+
img.hr_img {
 +
width:100%;
 +
}
 +
 
 +
/**//* HR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* I love hr. So here's their very own section
 +
*/
 
h1~hr {
 
h1~hr {
−
padding-bottom:2rem;
+
margin-top:0rem;
 +
margin-bottom:3rem;
 
}
 
}
  
 
h2~hr {
 
h2~hr {
−
padding-bottom:1.33rem;
+
margin-top:0rem;
 +
margin-bottom:2rem;
 
}
 
}
  
 
h3~hr {
 
h3~hr {
−
padding-bottom:1.33rem;
+
margin-top:0rem;
 +
margin-bottom:1rem;
 
}
 
}
  
Line 130: Line 287:
 
}
 
}
  
−
/* NAV ICONS */
+
hr {
 +
padding:0;
 +
}
 +
 
 +
/**//*NAV ICONS*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//*****/
 +
/* Everything related with the ugly little nav icons on the left of the screen
 +
*/
 
a.ico {
 
a.ico {
 
padding:0.5rem 0.5rem;
 
padding:0.5rem 0.5rem;
Line 140: Line 303:
 
}
 
}
  
−
.nav-left-col {
+
#NAV_ICON_BAR ul li img.ico:hover {
−
display:block;
+
-webkit-filter : opacity(60%);
−
width:16.666667%;
+
filter : opacity(60%);  
−
max-width:16.666667%;
+
}
 +
 
 +
#NAV_ICON_BAR ul li img.ico.filter-alpha-50:hover {
 +
-webkit-filter : opacity(50%);
 +
filter : opacity(50%);
 +
}
 +
 
 +
#NAV_ICON_BAR {
 +
bottom:1rem;
 
}
 
}
  
−
/* FOOTER */
+
/**//* FOOTER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* Everything that is only in the footer and has CSS is in this section
 +
*/
 
#FOOTER_CONTENT {
 
#FOOTER_CONTENT {
 
margin:1.6rem
 
margin:1.6rem
 
}
 
}
  
−
/* GENERAL CSS */
+
/**//* Anchors *//**/
 +
a.footer {
 +
text-decoration:underline;
 +
}
 +
 
 +
a.footer:link, a.footer:visited {
 +
color:#f8f9fa;
 +
}
 +
 
 +
a.footer:hover, a.footer:active {
 +
color:#d8d9da;
 +
}
 +
 
 +
/**//* SPONSORS *//**/
 +
p.sponsor {
 +
margin-bottom:0;
 +
}
 +
 
 +
/**//* CAROUSEL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/
 +
/* The carousel should soon be removed, remove this section too.
 +
*/
 +
#PLACEHOLDER {
 +
overflow:hidden;
 +
z-index:1000;
 +
position:relative;
 +
width:100%;
 +
height:100vh;
 +
}
 +
 
 +
/**//*"EXTENDED" BOOTSTRAP*//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
/* Just some classes that Bootstrap doesn't have but looks like they are bootstrap
 +
* classes.
 +
*/
 +
.corner-bottom {
 +
border-bottom-left-radius : 0 !important;
 +
border-bottom-right-radius : 0 !important;
 +
}
 +
 
 +
@media screen and (min-width:993px) {
 +
.corner-lg-bottom {
 +
border-bottom-left-radius : 0 !important;
 +
border-bottom-right-radius : 0 !important;
 +
}
 +
}
 +
 
 +
.corner-top {
 +
border-top-left-radius : 0 !important;
 +
border-top-right-radius : 0 !important;
 +
}
 +
 
 +
@media screen and (min-width:993px) {
 +
.corner-lg-top {
 +
border-top-left-radius : 0 !important;
 +
border-top-right-radius : 0 !important;
 +
}
 +
}
 +
 
 +
.corner-left {
 +
border-top-left-radius : 0 !important;
 +
border-bottom-left-radius : 0 !important;
 +
}
 +
 
 +
.corner-right {
 +
border-top-right-radius : 0 !important;
 +
border-bottom-right-radius : 0 !important;
 +
}
 +
 
 +
.corner-all {
 +
border-top-right-radius : 0 !important;
 +
border-bottom-right-radius : 0 !important;
 +
border-top-left-radius : 0 !important;
 +
border-bottom-left-radius : 0 !important;
 +
}
 +
 
 +
.picture-of-someone {
 +
height:18rem !important;
 +
width:18rem !important;
 +
}
 +
 
 +
.card-of-picture {
 +
width:18rem !important;
 +
}
 +
 
 
.sticky-bottom {
 
.sticky-bottom {
 
     position: -webkit-sticky; /* For compatibility */
 
     position: -webkit-sticky; /* For compatibility */
Line 158: Line 413:
 
}
 
}
  
−
/* SPONSORS */
+
.nav-left-col {
−
p.sponsor {
+
display:block;
−
margin-bottom:0;
+
width:16.666667%;
 +
max-width:16.666667%;
 
}
 
}
  
−
/* CAROUSEL */
+
/**//*Filters*//**/
−
.car_img {
+
.filter-gray {
 
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 
filter:grayscale(100%);
 
filter:grayscale(100%);
−
height:100%;
 
−
width:100%;
 
 
}
 
}
  
−
@media screen and (min-width:100px) and (max-width:576px) {
+
.filter-gray-0 {
−
#PLACEHOLDER {
+
-webkit-filter: grayscale(0%) !important; /* Safari 6.0-9.0 */
−
height:60px;
+
filter:grayscale(0%) !important;
−
}
+
 
}
 
}
  
−
@media screen and (min-width:577px) and (max-width:768px) {
+
.filter-gray-25 {
−
#PLACEHOLDER {
+
-webkit-filter: grayscale(25%); /* Safari 6.0-9.0 */
−
height:324px;
+
filter:grayscale(25%);
−
}
+
 
}
 
}
  
−
@media screen and (min-width:769px) and (max-width:992px) {
+
.filter-gray-50 {
−
#PLACEHOLDER {
+
-webkit-filter: grayscale(50%); /* Safari 6.0-9.0 */
−
height:432px;
+
filter:grayscale(50%);
−
}
+
 
}
 
}
  
−
@media screen and (min-width:993px) and (max-width:1200px) {
+
.filter-gray-75 {
−
#PLACEHOLDER {
+
-webkit-filter: grayscale(75%); /* Safari 6.0-9.0 */
−
height:558px;
+
filter:grayscale(75%);
−
}
+
 
}
 
}
  
−
@media screen and (min-width:1201px) {
+
.filter-gray-90 {
−
#PLACEHOLDER {
+
-webkit-filter: grayscale(90%); /* Safari 6.0-9.0 */
−
height:675px;
+
filter:grayscale(90%);
−
}
+
 
}
 
}
  
−
#PLACEHOLDER {
+
.filter-gray-95 {
−
overflow:hidden;
+
-webkit-filter: grayscale(95%); /* Safari 6.0-9.0 */
−
z-index:1000;
+
filter:grayscale(95%);
−
position:relative;
+
 
}
 
}
  
−
</style>
+
.filter-gray-100 {
−
</html>
+
-webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */
 +
filter:grayscale(100%);
 +
}
 +
 
 +
.filter-reverse {
 +
-webkit-filter: invert(100%); /* Safari 6.0-9.0 */
 +
filter: invert(100%);
 +
}
 +
 
 +
.filter-invert {
 +
-webkit-filter: invert(100%); /* Safari 6.0-9.0 */
 +
filter: invert(100%);
 +
}
 +
 
 +
.filter-alpha-0 {
 +
-webkit-filter : opacity(100%) !important; /* Safari 6.0-9.0 */
 +
filter : opacity(100%) !important;
 +
}
 +
 
 +
.filter-alpha-25 {
 +
-webkit-filter : opacity(75%); /* Safari 6.0-9.0 */
 +
filter : opacity(75%);
 +
}
 +
 
 +
.filter-alpha-50 {
 +
-webkit-filter : opacity(50%); /* Safari 6.0-9.0 */
 +
filter : opacity(50%);
 +
}
 +
 
 +
.filter-alpha-75 {
 +
-webkit-filter : opacity(25%); /* Safari 6.0-9.0 */
 +
filter : opacity(25%);
 +
}
 +
 
 +
.filter-alpha-100 {
 +
-webkit-filter : opacity(0%); /* Safari 6.0-9.0 */
 +
filter : opacity(0%);
 +
}
 +
 
 +
.filter-alpha {
 +
-webkit-filter : opacity(50%); /* Safari 6.0-9.0 */
 +
filter : opacity(50%);
 +
}
 +
 
 +
/**//*Colors*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/
 +
/* As everyone requests it, wants it, NEEDS IT for some reasons, here's some colors.
 +
* They may change in the futur tho.
 +
*/
 +
 
 +
/**//*Backgrounds*//**/
 +
.bg-aqua {
 +
background-color:#00FCFC !important;
 +
}
 +
 
 +
.bg-neon-blue {
 +
background-color:#0056FE !important;
 +
}
 +
 
 +
.bg-neon-green {
 +
background-color:#00996D !important;
 +
}
 +
 
 +
.bg-lime {
 +
background-color:#79FD00 !important;
 +
}
 +
 
 +
.bg-neon-yellow {
 +
background-color:#E1E166 !important;
 +
}
 +
 
 +
.bg-neon-orange {
 +
background-color:#FFB400 !important;
 +
}
 +
 
 +
.bg-neon-red {
 +
background-color:#EA1B00 !important;
 +
}
 +
 
 +
.bg-neon-purple {
 +
background-color:#960096 !important;
 +
}
 +
 
 +
.bg-neon-pink {
 +
background-color:#FF1160 !important;
 +
}
 +
 
 +
.bg-neon-white {
 +
background-color:#C7C7FD !important;
 +
}
 +
 
 +
/**//*Fonts*//**/
 +
/* I don't like the idee of colorfull text as it's not easy to read.
 +
* But just in case someone crave for it, I have made this.
 +
*/
 +
.font-aqua {
 +
color:#00FCFC;
 +
}
 +
 
 +
.font-neon-blue {
 +
color:#0056FE;
 +
}
 +
 
 +
.font-neon-green {
 +
color:#00996D;
 +
}
 +
 
 +
.font-lime {
 +
color:#79FD00;
 +
}
 +
 
 +
.font-neon-yellow {
 +
color:#E1E166;
 +
}
 +
 
 +
.font-neon-orange {
 +
color:#FFB400;
 +
}
 +
 
 +
.font-neon-red {
 +
color:#EA1B00;
 +
}
 +
 
 +
.font-neon-purple {
 +
color:#960096;
 +
}
 +
 
 +
.font-neon-pink {
 +
color:#FF1160;
 +
}
 +
 
 +
.font-neon-white {
 +
color:#C7C7FD;
 +
}
 +
 
 +
/**//*Parallax*//**/
 +
/* That's more cooler than the usual scroll
 +
* (I know there's a mistake with "more cooler")
 +
*/
 +
 
 +
 
 +
.parallax {
 +
background-attachment:fixed;
 +
background-position: top center;
 +
    background-repeat: no-repeat;
 +
    background-size: contain;
 +
}
 +
 
 +
/*
 +
.parallax {
 +
background-attachment:fixed;
 +
 +
    background-repeat: no-repeat;
 +
    background-size: contain;
 +
}
 +
*/
 +
 
 +
/**//*Tab*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//***/
 +
/* Adjust the color of the active tab
 +
*/
 +
 
 +
a.btn.nav-link.active, a.btn.nav-link:hover:not(.disabled), a.btn.nav-link:hover:not(:disabled) {
 +
background-color: #EC2E0F !important;
 +
border-color:  #343A40 !important;
 +
}
 +
 
 +
/**//*Anchor bar*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/
 +
/* CSS About the gray bar that I don't like.
 +
*/
 +
 
 +
nav#ANCHOR_BAR div div.navbar-nav a.nav-link {
 +
padding-top:0.1rem;
 +
padding-bottom:0.1rem;
 +
}
 +
 
 +
 
 +
/* *** Change cursor to pointer when hovering over an img-thumbnail for the HP page *** */
 +
.img-thumbnail {
 +
    cursor:pointer;
 +
}

Latest revision as of 13:13, 16 October 2018

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* CSS for the iGEM 2018 Team : Toulouse INSA-UPS Creator : Yohann CHARREIRE--KIRBACH (Sentiare) Editors : Sentiare Last Update : Thu 06/09/18 @ 10:55 

                                                                             */

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


/**//*OVERRIDE DEFAULT CSS*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* This section is for removing the default iGEM CSS 

* It should be complete, but i maybe missed something
*/
  1. HQ_page, #content {

width:100%; padding:0; margin:0; }

  1. mw-content-text p:first-child {

margin:0; padding:0; }

a#top { height:0; }

  1. top_title, #top_title div, #top_title h1 #firstHeading {

visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; }

  1. globalWrapper {

padding-bottom:0; 

       font-size: 100%;

}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin:0; }

li { margin-bottom:0; }

/**//*CSS of the iGEM menu *//**//**//**//**//**//**//**//**//**//**//**//*****/ /* The iGEM black menu doesn't match his background spacer 

* This CSS just increase his size by 2px to make them both match in height.
*/
  1. top_menu_14 {

height:18px; /*Now it matches his own spacer height*/ }

/**//*IMAGES*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/ /**//*Team Logo*//**/ .img_team_logo { height:3.5rem; width:auto; }

.center_img{ 

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

}

.rotate { position: relative; z-index: auto; margin-top: auto; padding-top:auto; margin-left: auto; padding-left:auto; -webkit-transform: rotate(-90deg); 

   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);

}

/**//*The text of the logo*//**/ a.navbar-brand { font-size:1.5rem; }

/**//*In Page Documents*//**//**//**//**//**//**//**//**//**//**//**//**//*****/ /* This section is about the different elements around the document reader in our 

* page. Remember : NO IFRAME!!!
*/

/**//*PDF*//**/ .black-pdf-spacer { width:100%; height:1rem; background-color:#3F3F3F;

}

/**//* GENERAL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//*****/ /* This section is mainly about title and text padding, margin and size 

*/

body, html { position:relative width:100%; height:auto; }

  1. CONTENT h1, .collapse h1 {

margin-top:3rem !important; margin-bottom:0rem !important; }

  1. CONTENT h2, .collapse h2 {

margin-top:0rem !important; margin-bottom:0rem !important; padding:0.34rem 0 0.17rem 0; }

  1. CONTENT h3, .collapse h3{

margin-top:1rem !important; margin-bottom:0rem !important; }

.heavy { 

   font-weight: 600;

}

  1. MENU {

top:18px; font-size:1rem; }

a.dropdown-item { color:black !important; }

p { /*General*/ font-size:1rem !important; }

h3 { font-size:1.5rem; }

h4 { font-size:1.25rem; }

h5, h6 { font-size:1rem; }

.list { position: relative; margin-top: -15px; padding-top: 1px; 

   margin-bottom: 20px;

padding-bottom: 1px; 

     }

div.cd-timeline__content p, div.cd-timeline__content a, div.cd-timeline__content span, div.cd-timeline__content { /*Timeline font*/ font-size:1rem; }

  1. DISCLAIMER p { /*FOOTER font*/

font-size:0.7rem; }

/**//*columns*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/

.bicolumn { 

   -webkit-column-count:2;
   -moz-column-count: 2;
   column-count: 2;

}

.tricolumn { 

   -webkit-columns:3; 
   -moz-columns: 3; 
   columns: 3;

}

.quadricolumn { 

   -webkit-columns:4;
   -moz-columns: 4;
   columns: 4;

}

div.imgtxtcenter { 

   min-height: 800px;
   display: table-cell;
   vertical-align: middle;
   background-color:yellow;

}

/**//* BANNER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* #BANNER refers to the picture on the top of the page. 

* It uses media queries.
*/

.img_banner { width:100%; height:auto; margin:0; padding:0; z-index:1000; }

  1. BANNER {

margin:0; padding:0; overflow: hidden; }

@media screen and (min-width:100px) and (max-width:576px) { #BANNER { height:70px; } }

@media screen and (min-width:577px) and (max-width:768px) { #BANNER { height:140px; } }

@media screen and (min-width:769px) and (max-width:992px) { #BANNER { height:150px; } }

@media screen and (min-width:993px) and (max-width:1200px) { #BANNER { height:190px; } }

@media screen and (min-width:1201px) { #BANNER { height:230px; } }

/**//* HR BANNERS *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Is it a banner, is it a hr ? No it's a picture which acts like a hr. 

*/

div.hr_img { width:100%; height:5rem; overflow:hidden; }

img.hr_img { width:100%; }

/**//* HR *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* I love hr. So here's their very own section 

*/

h1~hr { margin-top:0rem; margin-bottom:3rem; }

h2~hr { margin-top:0rem; margin-bottom:2rem; }

h3~hr { margin-top:0rem; margin-bottom:1rem; }

a.dropdown-item~hr { margin-bottom:0.5rem; margin-top:0.5rem; }

hr { padding:0; }

/**//*NAV ICONS*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//*****/ /* Everything related with the ugly little nav icons on the left of the screen 

*/

a.ico { padding:0.5rem 0.5rem; }

img.ico { max-width:3rem; height:auto; }

  1. NAV_ICON_BAR ul li img.ico:hover {

-webkit-filter : opacity(60%); filter : opacity(60%); }

  1. NAV_ICON_BAR ul li img.ico.filter-alpha-50:hover {

-webkit-filter : opacity(50%); filter : opacity(50%); }

  1. NAV_ICON_BAR {

bottom:1rem; }

/**//* FOOTER *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Everything that is only in the footer and has CSS is in this section 

*/
  1. FOOTER_CONTENT {

margin:1.6rem }

/**//* Anchors *//**/ a.footer { text-decoration:underline; }

a.footer:link, a.footer:visited { color:#f8f9fa; }

a.footer:hover, a.footer:active { color:#d8d9da; }

/**//* SPONSORS *//**/ p.sponsor { margin-bottom:0; }

/**//* CAROUSEL *//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/ /* The carousel should soon be removed, remove this section too. 

*/
  1. PLACEHOLDER {

overflow:hidden; z-index:1000; position:relative; width:100%; height:100vh; }

/**//*"EXTENDED" BOOTSTRAP*//**//**//**//**//**//**//**//**//**//**//**//**//**/ /* Just some classes that Bootstrap doesn't have but looks like they are bootstrap 

* classes.
*/

.corner-bottom { border-bottom-left-radius : 0 !important; border-bottom-right-radius : 0 !important; }

@media screen and (min-width:993px) { .corner-lg-bottom { border-bottom-left-radius : 0 !important; border-bottom-right-radius : 0 !important; } }

.corner-top { border-top-left-radius : 0 !important; border-top-right-radius : 0 !important; }

@media screen and (min-width:993px) { .corner-lg-top { border-top-left-radius : 0 !important; border-top-right-radius : 0 !important; } }

.corner-left { border-top-left-radius : 0 !important; border-bottom-left-radius : 0 !important; }

.corner-right { border-top-right-radius : 0 !important; border-bottom-right-radius : 0 !important; }

.corner-all { border-top-right-radius : 0 !important; border-bottom-right-radius : 0 !important; border-top-left-radius : 0 !important; border-bottom-left-radius : 0 !important; }

.picture-of-someone { height:18rem !important; width:18rem !important; }

.card-of-picture { width:18rem !important; }

.sticky-bottom { 

   position: -webkit-sticky; /* For compatibility */
   position: sticky;
   bottom: 0;

}

.nav-left-col { display:block; width:16.666667%; max-width:16.666667%; }

/**//*Filters*//**/ .filter-gray { -webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */ filter:grayscale(100%); }

.filter-gray-0 { -webkit-filter: grayscale(0%) !important; /* Safari 6.0-9.0 */ filter:grayscale(0%) !important; }

.filter-gray-25 { -webkit-filter: grayscale(25%); /* Safari 6.0-9.0 */ filter:grayscale(25%); }

.filter-gray-50 { -webkit-filter: grayscale(50%); /* Safari 6.0-9.0 */ filter:grayscale(50%); }

.filter-gray-75 { -webkit-filter: grayscale(75%); /* Safari 6.0-9.0 */ filter:grayscale(75%); }

.filter-gray-90 { -webkit-filter: grayscale(90%); /* Safari 6.0-9.0 */ filter:grayscale(90%); }

.filter-gray-95 { -webkit-filter: grayscale(95%); /* Safari 6.0-9.0 */ filter:grayscale(95%); }

.filter-gray-100 { -webkit-filter: grayscale(100%); /* Safari 6.0-9.0 */ filter:grayscale(100%); }

.filter-reverse { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-invert { -webkit-filter: invert(100%); /* Safari 6.0-9.0 */ filter: invert(100%); }

.filter-alpha-0 { -webkit-filter : opacity(100%) !important; /* Safari 6.0-9.0 */ filter : opacity(100%) !important; }

.filter-alpha-25 { -webkit-filter : opacity(75%); /* Safari 6.0-9.0 */ filter : opacity(75%); }

.filter-alpha-50 { -webkit-filter : opacity(50%); /* Safari 6.0-9.0 */ filter : opacity(50%); }

.filter-alpha-75 { -webkit-filter : opacity(25%); /* Safari 6.0-9.0 */ filter : opacity(25%); }

.filter-alpha-100 { -webkit-filter : opacity(0%); /* Safari 6.0-9.0 */ filter : opacity(0%); }

.filter-alpha { -webkit-filter : opacity(50%); /* Safari 6.0-9.0 */ filter : opacity(50%); }

/**//*Colors*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/ /* As everyone requests it, wants it, NEEDS IT for some reasons, here's some colors. 

* They may change in the futur tho.
*/

/**//*Backgrounds*//**/ .bg-aqua { background-color:#00FCFC !important; }

.bg-neon-blue { background-color:#0056FE !important; }

.bg-neon-green { background-color:#00996D !important; }

.bg-lime { background-color:#79FD00 !important; }

.bg-neon-yellow { background-color:#E1E166 !important; }

.bg-neon-orange { background-color:#FFB400 !important; }

.bg-neon-red { background-color:#EA1B00 !important; }

.bg-neon-purple { background-color:#960096 !important; }

.bg-neon-pink { background-color:#FF1160 !important; }

.bg-neon-white { background-color:#C7C7FD !important; }

/**//*Fonts*//**/ /* I don't like the idee of colorfull text as it's not easy to read. 

* But just in case someone crave for it, I have made this.
*/

.font-aqua { color:#00FCFC; }

.font-neon-blue { color:#0056FE; }

.font-neon-green { color:#00996D; }

.font-lime { color:#79FD00; }

.font-neon-yellow { color:#E1E166; }

.font-neon-orange { color:#FFB400; }

.font-neon-red { color:#EA1B00; }

.font-neon-purple { color:#960096; }

.font-neon-pink { color:#FF1160; }

.font-neon-white { color:#C7C7FD; }

/**//*Parallax*//**/ /* That's more cooler than the usual scroll 

* (I know there's a mistake with "more cooler")
*/


.parallax { background-attachment:fixed; background-position: top center; 

   background-repeat: no-repeat;
   background-size: contain;

}

/* .parallax { background-attachment:fixed; 

   background-repeat: no-repeat;
   background-size: contain;

}

  • /

/**//*Tab*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//***/ /* Adjust the color of the active tab 

*/

a.btn.nav-link.active, a.btn.nav-link:hover:not(.disabled), a.btn.nav-link:hover:not(:disabled) { background-color: #EC2E0F !important; border-color: #343A40 !important; }

/**//*Anchor bar*//**//**//**//**//**//**//**//**//**//**//**//**//**//**//****/ /* CSS About the gray bar that I don't like. 

*/

nav#ANCHOR_BAR div div.navbar-nav a.nav-link { padding-top:0.1rem; padding-bottom:0.1rem; }


/* *** Change cursor to pointer when hovering over an img-thumbnail for the HP page *** */ .img-thumbnail { 

   cursor:pointer;

}