Difference between revisions of "Team:Leiden/css/main css"

Line 15: Line 15:
 
@font-face {
 
@font-face {
 
   font-family: ProjectTitle;
 
   font-family: ProjectTitle;
−
   src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf'); */
−
   /* src: url('../webfonts/copperplatelightssilight.ttf'); */
+
   src: url('../webfonts/copperplatelightssilight.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   font-family: UnderTitle;
 
   font-family: UnderTitle;
−
   src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf'); */
−
   /* src: url('../webfonts/yugothil.ttf'); */
+
   src: url('../webfonts/yugothil.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   font-family: Kopje;
 
   font-family: Kopje;
−
   src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf'); */
−
   /* src: url('../webfonts/Roboto-Medium.ttf'); */
+
   src: url('../webfonts/Roboto-Medium.ttf');
 
   font-weight: bold;
 
   font-weight: bold;
 
}
 
}
Line 34: Line 34:
 
@font-face {
 
@font-face {
 
   font-family: Body;
 
   font-family: Body;
−
   src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf'); */
−
   /* src: url('../webfonts/Roboto-Light.ttf'); */
+
   src: url('../webfonts/Roboto-Light.ttf');
 
}
 
}
  
 
@font-face {
 
@font-face {
 
   font-family: Body;
 
   font-family: Body;
−
   src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf');
+
   /* src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf'); */
−
   /* src: url('../webfonts/Roboto-LightItalic.ttf'); */
+
   src: url('../webfonts/Roboto-LightItalic.ttf');
 
   font-style: italic;
 
   font-style: italic;
 
}
 
}
Line 60: Line 60:
 
   margin: 0;
 
   margin: 0;
 
}
 
}
−
 
−
/* #Global {
 
−
  width: 100%;
 
−
  position: absolute;
 
−
  background-color: var(--whiteish);
 
−
  color: var(--blackish);
 
−
  font-family: Body, sans-serif;
 
−
} */
 
  
 
#globalWrapper {
 
#globalWrapper {
Line 201: Line 193:
 
.smaller {
 
.smaller {
 
   font-size: 0.75em;
 
   font-size: 0.75em;
 +
}
 +
 +
.center {
 +
  text-align: center;
 
}
 
}
  
Line 209: Line 205:
 
.circles {
 
.circles {
 
   background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
 
   background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
 +
  /* url('https://static.igem.org/mediawiki/2018/f/f2/T--Leiden--circles1200px.png')  */
 
   background-position: 50% 50%;
 
   background-position: 50% 50%;
 
   background-size: cover;
 
   background-size: cover;
Line 626: Line 623:
 
.container-text.sponsorPossibility {
 
.container-text.sponsorPossibility {
 
   text-align: center;
 
   text-align: center;
 +
}
 +
 +
/***********************************************************************************************************************************************************/
 +
 +
/* Teampage */
 +
 +
header.white-out {
 +
  position: relative;
 +
  display: block;
 +
}
 +
 +
header.white-out::after {
 +
  position: absolute;
 +
  content: '';
 +
  display: block;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  background: rgba(255, 255, 255, .5);
 +
}
 +
 +
.headerpic {
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
 +
.team {
 +
  content: url("https://static.igem.org/mediawiki/2018/d/d0/T--Leiden--group_cropped_wide.jpg");
 +
}
 +
 +
div.flexbox {
 +
  display: flex;
 +
  flex-flow: row wrap;
 +
  justify-content: space-evenly;
 +
  align-items: center;
 +
  align-content: center;
 +
}
 +
 +
.TeamMemberBox {
 +
  margin: 50px 25px;
 +
  display: grid;
 +
  justify-items: center;
 +
  grid-template-columns: 1fr;
 +
}
 +
 +
.PicBox {
 +
  position: relative;
 +
  width: 200px;
 +
  height: 200px;
 +
}
 +
 +
img.MemberPic {
 +
  height: auto;
 +
  width: 110%;
 +
  margin-left: -5px;
 +
  margin-top: -25px;
 +
}
 +
 +
.circularPortrait {
 +
  width: 200px;
 +
  height: 200px;
 +
  overflow: hidden;
 +
  position: relative;
 +
  border-radius: 50%;
 +
  border: 25px solid;
 +
}
 +
 +
div.iconBox {
 +
  display: block;
 +
  position: absolute;
 +
  border: solid 30px;
 +
  border-radius: 50%;
 +
}
 +
 +
div.iconBox>i {
 +
  color: var(--blackish);
 +
  font-size: 30px;
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 48%;
 +
  transform: translate(-50%, -50%);
 +
}
 +
 +
.MemberDescription {
 +
  color: var(--blackish);
 +
  width: 250px;
 +
}
 +
 +
h2.MemberName, p.MemberFunction {
 +
  text-align: center;
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
 +
p.MemberFunction {
 +
  font-size: 1.3em;
 +
}
 +
 +
.underlined {
 +
  display: block;
 +
  width: max-content;
 +
  margin: auto;
 +
  border-bottom: var(--main) solid 5px;
 +
}
 +
 +
/* Change colors of each circle/member */
 +
 +
.TeamMemberBox:nth-child(8n+1) {
 +
  color: var(--main);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+2) {
 +
  color: var(--accent4);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+3) {
 +
  color: var(--accent1);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+4) {
 +
  color: var(--accent2);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+5) {
 +
  color: var(--accent4);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+6) {
 +
  color: var(--main);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+7) {
 +
  color: var(--accent2);
 +
}
 +
 +
.TeamMemberBox:nth-child(8n+8) {
 +
  color: var(--accent1);
 +
}
 +
 +
/* Change order of text-picture */
 +
 +
.TeamMemberBox:nth-child(2n+1) .PicBox {
 +
  grid-row: 1;
 +
}
 +
 +
.TeamMemberBox:nth-child(2n+2) .PicBox {
 +
  grid-row: 2;
 +
}
 +
 +
.TeamMemberBox:nth-child(2n+1) .MemberDescription {
 +
  grid-row: 2;
 +
}
 +
 +
.TeamMemberBox:nth-child(2n+2) .MemberDescription {
 +
  grid-row: 1;
 +
}
 +
 +
/* Change config of icon */
 +
 +
.TeamMemberBox:nth-child(4n+1) div.iconBox {
 +
  right: -25px;
 +
  bottom: 0px;
 +
}
 +
 +
.TeamMemberBox:nth-child(4n+2) div.iconBox {
 +
  top: 0px;
 +
  left: -25px;
 +
}
 +
 +
.TeamMemberBox:nth-child(4n+3) div.iconBox {
 +
  bottom: 0px;
 +
  left: -25px;
 +
}
 +
 +
.TeamMemberBox:nth-child(4n+4) div.iconBox {
 +
  top: 0px;
 +
  right: -25px;
 +
}
 +
 +
/* add some padding to the MemberDescription to align to the bottom/top */
 +
 +
.TeamMemberBox:nth-child(2n+1) .MemberDescription {
 +
  align-self: start;
 +
  padding-top: 20px;
 +
}
 +
 +
.TeamMemberBox:nth-child(2n+2) .MemberDescription {
 +
  align-self: end;
 +
  padding-bottom: 20px;
 
}
 
}
  
Line 638: Line 825:
 
     font-size: calc(100vw * 0.0058 + 12.5292px);
 
     font-size: calc(100vw * 0.0058 + 12.5292px);
 
   }
 
   }
−
}
 
−
 
−
@media (max-width: 425px) {
 
 
   .container {
 
   .container {
 
     width: 100%;
 
     width: 100%;
 
     padding: 0 20px;
 
     padding: 0 20px;
 
   }
 
   }
 +
}
 +
 +
@media (max-width: 425px) {
 
   body, #body {
 
   body, #body {
 
     font-size: 15px;
 
     font-size: 15px;
Line 730: Line 917:
 
   }
 
   }
 
   .circle {
 
   .circle {
−
     display: none;
+
     display: block;
 
   }
 
   }
 
}
 
}
Line 776: Line 963:
 
     box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
 
     box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
 
     z-index: 99;
 
     z-index: 99;
−
  }
 
−
  .circle {
 
−
    display: block;
 
 
   }
 
   }
 
}
 
}
Line 793: Line 977:
 
   img.sponsorLogo {
 
   img.sponsorLogo {
 
     width: 60vw;
 
     width: 60vw;
−
   }}
+
   }
 +
}
 +
 
 +
/**************** teampage *********************/
 +
 
 +
@media (max-width:768px) {
 +
  .team {
 +
    content: url("https://static.igem.org/mediawiki/2018/0/04/T--Leiden--group_cropped_square.jpg")
 +
  }
 +
  .TeamMemberBox:nth-child(2n+2) .PicBox {
 +
    grid-row: 1;
 +
  }
 +
  .TeamMemberBox:nth-child(2n+2) .MemberDescription {
 +
    grid-row: 2;
 +
  }
 +
  .TeamMemberBox:nth-child(2n+1) .MemberDescription {
 +
    align-self: start;
 +
    padding-top: 15px;
 +
  }
 +
  .TeamMemberBox:nth-child(2n+2) .MemberDescription {
 +
    align-self: start;
 +
    padding-top: 15px;
 +
  }
 +
  .TeamMemberBox {
 +
    margin: 30px 0;
 +
    height: auto;
 +
  }
 +
}

Revision as of 10:21, 30 July 2018

root {
 --whiteish: #F7F7F7;
 --blackish: #111;
 --main: #FFB375;
 --main_darker: #FFA666;
 --accent1: #456990;
 --accent2: #49BEAA;
 --accent3: #49DCB1;
 --background: #D3D1BE;
 --accent4: #B2B09B;

}

/* Font things */

@font-face { 

 font-family: ProjectTitle;
 /* src: url('https://static.igem.org/mediawiki/2018/b/b7/T--Leiden--copperplatelightssilight.ttf'); */
 src: url('../webfonts/copperplatelightssilight.ttf');

}

@font-face { 

 font-family: UnderTitle;
 /* src: url('https://static.igem.org/mediawiki/2018/d/d6/T--Leiden--YuGothicLight.ttf'); */
 src: url('../webfonts/yugothil.ttf');

}

@font-face { 

 font-family: Kopje;
 /* src: url('https://static.igem.org/mediawiki/2018/c/ca/T--Leiden--Roboto-Medium.ttf'); */
 src: url('../webfonts/Roboto-Medium.ttf');
 font-weight: bold;

}

@font-face { 

 font-family: Body;
 /* src: url('https://static.igem.org/mediawiki/2018/0/0d/T--Leiden--Roboto-Light.ttf'); */
 src: url('../webfonts/Roboto-Light.ttf');

}

@font-face { 

 font-family: Body;
 /* src: url('https://static.igem.org/mediawiki/2018/b/bb/T--Leiden--Roboto-LightItalic.ttf'); */
 src: url('../webfonts/Roboto-LightItalic.ttf');
 font-style: italic;

}

/* Correct iGEM shit... */

  1. Global p, p {
 padding: 0;
 padding-bottom: 5px;
 margin: 0px;
 line-height: 1.4;
 position: relative;
 z-index: 1;

}

  1. Global p.meta {
 padding: 0;
 margin: 0;

}

  1. globalWrapper {
 font-size: 100%;
 padding: 0;

}

  1. top_menu_under, #top_menu_14, #top_menu_inside {
 -webkit-box-sizing: content-box;
 box-sizing: content-box;

}

  1. top_menu_under {
 height: 0px;

}

a[href ^="https://"] { 

 padding: 0;

}

  1. top_menu_inside ul a, #top_menu_inside ul li.has_submenu {
 line-height: 1.5em;

}

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

/* Global styles */

sup { 

 font-size: 60%;

}

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

 font-family: Kopje, sans-serif;
 margin: 0;
 padding: 0;
 padding-top: 15px;
 border: none;
 font-weight: bold;
 overflow: visible;

}

h1.SectionTitle { 

 font-size: 3em;

}

h1 { 

 font-size: 2em;

}

h2 { 

 font-size: 1.5em;

}

h3 { 

 font-size: 1.17em;

}

h4 { 

 font-size: 1.12em;

}

h5 { 

 font-size: .83em;

}

h6 { 

 font-size: .75em;

}

.submenu div { 

 line-height: 1.5em;

}

body, #body { 

 /* target body and the alternative body tag in iGEM terms (see Javascript-script) */
 width: 100%;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 padding: 0;
 margin: 0;
 line-height: normal;
 position: absolute;
 top: 9px;
 background-color: var(--whiteish);
 font-size: 17px;
 color: var(--blackish);
 font-family: Body, sans-serif;
 overflow-x: hidden;

}

li, ul { 

 margin: 0;
 line-height: normal;
 list-style-type: none;
 list-style-image: none;
 display: block;

}

  • {
 padding: 0;
 margin: 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-decoration: none;
 line-height: normal;

}

.container { 

 width: 80%;
 margin: auto;

}

.container-text { 

 width: 80%;
 max-width: 800px;
 margin: auto;
 padding: 60px 0 40px 0;

}

a, a:active, a:visited, a:hover { 

 color: inherit;
 text-decoration: none;

}

.hidden { 

 display: none;

}

/* References */

.smaller { 

 font-size: 0.75em;

}

.center { 

 text-align: center;

}

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

/* Homepage */

.circles { 

 background: url('https://static.igem.org/mediawiki/2018/3/3a/T--Leiden--circles1200pxplus.png') no-repeat;
 /* url('https://static.igem.org/mediawiki/2018/f/f2/T--Leiden--circles1200px.png')  */
 background-position: 50% 50%;
 background-size: cover;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 min-height: calc(70vh - 10px);
 position: relative;
 top: 0;
 z-index: 3;

}

div#headercontent { 

 position: absolute;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 height: -webkit-max-content;
 height: -moz-max-content;
 height: max-content;
 width: 100%;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);

}

div.logo { 

 background: url('https://static.igem.org/mediawiki/2018/c/c8/T--Leiden--LogoLeidenV1.png');
 height: calc(0.9 * 50vw);
 max-height: 300px;
 width: 50%;
 margin: auto;
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center bottom;

}

div#Fsos { 

 color: var(--blackish);
 font-size: 50px;
 font-family: ProjectTitle;
 display: block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-top: 20px;
 background: rgba(222, 217, 208, 0.7);
 -webkit-box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 border-radius: 50px;

}

div#UnderTitle { 

 color: var(--blackish);
 font-size: 21.62px;
 font-family: UnderTitle;
 display: block;
 width: -webkit-max-content;
 width: -moz-max-content;
 width: max-content;
 margin: auto;
 text-align: center;
 padding-left: 2px;
 background: rgba(222, 217, 208, 0.7);
 -webkit-box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 box-shadow: 0 0 20px 5px rgba(222, 217, 208, 1);
 border-radius: 20px;

}

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

/* Eventpage */

.title { 

 display: block;
 grid-column: 1 / span 2;
 border-bottom: 3px solid var(--main);

}

.cardtitle { 

 font-family: Kopje;
 display: inline-block;

}

.date { 

 font-family: Body;
 font-size: 1.95em;
 display: inline-block;
 width: 165px;
 margin-right: 30px;

}

.cardtext { 

 font-family: Body;
 -ms-flex-line-pack: center;
 align-content: center;

}

.cardtextfull { 

 grid-column: 1 / span 2;

}

.card { 

 opacity: 0;
 width: 85%;
 background: white;
 padding: 40px 40px 80px 40px;
 margin: 20px auto;
 display: grid;
 grid-gap: 20px;
 -webkit-box-shadow: 4px 0px 16px -3px rgba(0, 0, 0, 0.5);
 box-shadow: 4px 0px 16px -3px rgba(0, 0, 0, 0.5);
 border-radius: 10px;
 position: relative;
 z-index: 1;

}

.card.links { 

 grid-template-columns: 250px 1fr;

}

.card.rechts { 

 grid-template-columns: 1fr 250px;

}

.images { 

 width: 100%;
 display: grid;
 grid-gap: 10px;
 -ms-flex-line-pack: center;
 align-content: center;

}

.card .images img { 

 width: 100%;
 border: solid 2px var(--main);
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 position: relative;

}

img.scrolldown { 

 position: fixed;
 bottom: 10px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 width: 100px;
 height: auto;

}

.circle { 

 border-radius: 50%;
 display: block;
 position: absolute;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;

}

.circle.small { 

 height: 50px;
 width: 50px;

}

.circle.normal { 

 height: 100px;
 width: 100px;

}

.circle.large { 

 height: 150px;
 width: 150px;

}

.circle.orange { 

 color: var(--main);
 background-color: var(--main);

}

.circle.accent1 { 

 color: var(--accent1);
 background-color: var(--accent1);

}

.circle.accent2 { 

 color: var(--accent2);
 background-color: var(--accent2);

}

.circle.accent3 { 

 color: var(--accent3);
 background-color: var(--accent3);

}

.circle.accent4 { 

 color: var(--accent4);
 background-color: var(--accent4);

}

.circle.accent5 { 

 color: var(--accent5);
 background-color: var(--accent5);

}

.circle.thick { 

 border: 30px solid;
 background-color: transparent;

}

.circle.thin { 

 border: 15px solid;
 background-color: transparent;

}

.circle.circle1 { 

 top: 320px;
 right: -60px;

}

.circle.circle2 { 

 top: 600px;
 right: 170px;

}

.circle.circle3 { 

 top: 150px;
 right: 50px;

}

.circle.circle4 { 

 top: 900px;
 right: 50px;

}

.circle.circle5 { 

 top: 650px;
 right: 150px;

}

.circle.circle6 { 

 top: 820px;
 left: -40px;

}

.circle.circle7 { 

 top: 300px;
 left: 50px;

}

.circle.circle8 { 

 top: 750px;
 left: 150px;

}

.circle.circle9 { 

 top: 850px;
 left: 250px;

}

.circle.circle10 { 

 top: 370px;
 left: 120px;

}

.visible:nth-child(1) { 

 margin-top: 100px;
 max-width: 950px;
 -webkit-animation: fly-from-bottom-left 0.8s forwards ease-out;
 animation: fly-from-bottom-left 0.8s forwards ease-out;

}

.visible:nth-child(3n+4) { 

 max-width: 950px;
 -webkit-animation: fly-from-bottom-left 0.9s forwards ease-out;
 animation: fly-from-bottom-left 0.9s forwards ease-out;

}

.visible:nth-child(3n+2) { 

 max-width: 1000px;
 -webkit-animation: fly-from-bottom-right 0.85s forwards ease-out;
 animation: fly-from-bottom-right 0.85s forwards ease-out;

}

.visible:nth-child(3n+0) { 

 max-width: 900px;
 -webkit-animation: fly-from-top-right 0.9s forwards ease-out;
 animation: fly-from-top-right 0.9s forwards ease-out;

}

@-webkit-keyframes fly-from-bottom-left { 

 0% {
   -webkit-transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   opacity: 1;
 }
 100% {
   -webkit-transform: rotate(4deg) translateY(-25px) scale(1);
   transform: rotate(4deg) translateY(-25px) scale(1);
   opacity: 1;
 }

}

@keyframes fly-from-bottom-left { 

 0% {
   -webkit-transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   transform: translate(-100vw, 100vh) rotate(-20deg) scale(3);
   opacity: 1;
 }
 100% {
   -webkit-transform: rotate(4deg) translateY(-25px) scale(1);
   transform: rotate(4deg) translateY(-25px) scale(1);
   opacity: 1;
 }

}

@-webkit-keyframes fly-from-bottom-right { 

 0% {
   -webkit-transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   opacity: 1;
 }
 100% {
   -webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
   transform: rotate(-2deg) translateY(-30px) scale(1);
   opacity: 1;
 }

}

@keyframes fly-from-bottom-right { 

 0% {
   -webkit-transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   transform: translate(100vw, 100vh) rotate(20deg) scale(3);
   opacity: 1;
 }
 100% {
   -webkit-transform: rotate(-2deg) translateY(-30px) scale(1);
   transform: rotate(-2deg) translateY(-30px) scale(1);
   opacity: 1;
 }

}

@-webkit-keyframes fly-from-top-right { 

 0% {
   -webkit-transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   opacity: 1;
   -webkit-filter: blur(10px);
   filter: blur(10px);
 }
 100% {
   -webkit-transform: rotate(0deg) translateY(-50px) scale(1);
   transform: rotate(0deg) translateY(-50px) scale(1);
   opacity: 1;
   -webkit-filter: blur(0);
   filter: blur(0);
 }

}

@keyframes fly-from-top-right { 

 0% {
   -webkit-transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   transform: translate(100vw, -100vh) rotate(45deg) scale(3);
   opacity: 1;
   -webkit-filter: blur(10px);
   filter: blur(10px);
 }
 100% {
   -webkit-transform: rotate(0deg) translateY(-50px) scale(1);
   transform: rotate(0deg) translateY(-50px) scale(1);
   opacity: 1;
   -webkit-filter: blur(0);
   filter: blur(0);
 }

}

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

/* Sponsorpage */

.SponsorFlexBox { 

 padding: 50px 0;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: space-evenly;
 -ms-flex-pack: space-evenly;
 justify-content: space-evenly;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -ms-flex-line-pack: center;
 align-content: center;

}

img.sponsorLogo { 

 width: 300px;
 height: auto;
 /* margin: 20px; */

}

a.sponsor { 

 display: block;
 margin: 10px;
 padding: 10px;

}

.container-text.sponsorPossibility { 

 text-align: center;

}

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

/* Teampage */

header.white-out { 

 position: relative;
 display: block;

}

header.white-out::after { 

 position: absolute;
 content: ;
 display: block;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, .5);

}

.headerpic { 

 width: 100%;
 height: auto;

}

.team { 

 content: url("T--Leiden--group_cropped_wide.jpg");

}

div.flexbox { 

 display: flex;
 flex-flow: row wrap;
 justify-content: space-evenly;
 align-items: center;
 align-content: center;

}

.TeamMemberBox { 

 margin: 50px 25px;
 display: grid;
 justify-items: center;
 grid-template-columns: 1fr;

}

.PicBox { 

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

}

img.MemberPic { 

 height: auto;
 width: 110%;
 margin-left: -5px;
 margin-top: -25px;

}

.circularPortrait { 

 width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
 border-radius: 50%;
 border: 25px solid;

}

div.iconBox { 

 display: block;
 position: absolute;
 border: solid 30px;
 border-radius: 50%;

}

div.iconBox>i { 

 color: var(--blackish);
 font-size: 30px;
 position: absolute;
 top: 49%;
 left: 48%;
 transform: translate(-50%, -50%);

}

.MemberDescription { 

 color: var(--blackish);
 width: 250px;

}

h2.MemberName, p.MemberFunction { 

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

}

p.MemberFunction { 

 font-size: 1.3em;

}

.underlined { 

 display: block;
 width: max-content;
 margin: auto;
 border-bottom: var(--main) solid 5px;

}

/* Change colors of each circle/member */

.TeamMemberBox:nth-child(8n+1) { 

 color: var(--main);

}

.TeamMemberBox:nth-child(8n+2) { 

 color: var(--accent4);

}

.TeamMemberBox:nth-child(8n+3) { 

 color: var(--accent1);

}

.TeamMemberBox:nth-child(8n+4) { 

 color: var(--accent2);

}

.TeamMemberBox:nth-child(8n+5) { 

 color: var(--accent4);

}

.TeamMemberBox:nth-child(8n+6) { 

 color: var(--main);

}

.TeamMemberBox:nth-child(8n+7) { 

 color: var(--accent2);

}

.TeamMemberBox:nth-child(8n+8) { 

 color: var(--accent1);

}

/* Change order of text-picture */

.TeamMemberBox:nth-child(2n+1) .PicBox { 

 grid-row: 1;

}

.TeamMemberBox:nth-child(2n+2) .PicBox { 

 grid-row: 2;

}

.TeamMemberBox:nth-child(2n+1) .MemberDescription { 

 grid-row: 2;

}

.TeamMemberBox:nth-child(2n+2) .MemberDescription { 

 grid-row: 1;

}

/* Change config of icon */

.TeamMemberBox:nth-child(4n+1) div.iconBox { 

 right: -25px;
 bottom: 0px;

}

.TeamMemberBox:nth-child(4n+2) div.iconBox { 

 top: 0px;
 left: -25px;

}

.TeamMemberBox:nth-child(4n+3) div.iconBox { 

 bottom: 0px;
 left: -25px;

}

.TeamMemberBox:nth-child(4n+4) div.iconBox { 

 top: 0px;
 right: -25px;

}

/* add some padding to the MemberDescription to align to the bottom/top */

.TeamMemberBox:nth-child(2n+1) .MemberDescription { 

 align-self: start;
 padding-top: 20px;

}

.TeamMemberBox:nth-child(2n+2) .MemberDescription { 

 align-self: end;
 padding-bottom: 20px;

}

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

/* Responsiveness*/

/* Global */

@media (max-width: 768px) { 

 body, #body {
   font-size: calc(100vw * 0.0058 + 12.5292px);
 }
 .container {
   width: 100%;
   padding: 0 20px;
 }

}

@media (max-width: 425px) { 

 body, #body {
   font-size: 15px;
 }

}

@media (max-width: 700px) { 

 div#Fsos {
   font-size: calc(100vw * 0.0667 + 3.3px);
   width: 90%;
   margin: auto;
 }
 div#UnderTitle {
   font-size: calc(100vw * 0.0288 + 1.437px);
   width: 90%;
   margin: auto;
   padding: 0;
 }

}

/* Homepage */

@media (max-width: 470px) { 

 div#Fsos {
   font-size: 35px;
   width: 95%;
   margin: auto;
 }
 div#UnderTitle {
   font-size: 15px;
   width: 95%;
   margin: auto;
   padding: 0;
 }

}

/* Eventpage */

@media (max-width:768px) { 

 .card {
   width: 95%;
 }
 .card:first-child {
   margin-top: 20px;
 }
 .card:nth-child(3n+1) {
   -webkit-transform: rotate(0) translateY(0);
   transform: rotate(0) translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }
 .card:nth-child(3n+2) {
   -webkit-transform: rotate(0) translateY(0);
   transform: rotate(0) translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }
 .card:nth-child(3n+0) {
   -webkit-transform: translateY(0);
   transform: translateY(0);
   grid-template-columns: 1fr;
   opacity: 1;
   -webkit-animation: none;
   animation: none;
 }
 .cardtextfull {
   grid-column: 1;
 }
 .title {
   grid-column: 1;
   grid-row: 1;
 }
 .images {
   grid-row: 3;
 }
 .images.special {
   grid-row: 4;
 }
 .cardcontent {
   grid-row: 2;
 }
 .circle {
   display: block;
 }

}

@media (min-width:769px) { 

 .card.links:nth-child(3n+1) img:hover {
   -webkit-transform: scale(1.7) rotate(-4deg) translateX(100px);
   transform: scale(1.7) rotate(-4deg) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .card.links:nth-child(3n+2) img:hover {
   -webkit-transform: scale(1.7) rotate(2deg) translateX(100px);
   transform: scale(1.7) rotate(2deg) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .card.links:nth-child(3n+0) img:hover {
   -webkit-transform: scale(1.7) translateX(100px);
   transform: scale(1.7) translateX(100px);
   -webkit-box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: -100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .card.rechts:nth-child(3n+1) img:hover {
   -webkit-transform: scale(1.7) rotate(-4deg) translateX(-100px);
   transform: scale(1.7) rotate(-4deg) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .card.rechts:nth-child(3n+2) img:hover {
   -webkit-transform: scale(1.7) rotate(2deg) translateX(-100px);
   transform: scale(1.7) rotate(2deg) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }
 .card.rechts:nth-child(3n+0) img:hover {
   -webkit-transform: scale(1.7) translateX(-100px);
   transform: scale(1.7) translateX(-100px);
   -webkit-box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   box-shadow: 100px 0 20px -55px rgba(0, 0, 0, 0.2);
   z-index: 99;
 }

}

/**************** sponsorpage *********************/

@media (max-width:849px) { 

 .SponsorFlexBox {
   padding: 20px 0;
 }
 a.sponsor {
   margin: 20px 10px;
 }
 img.sponsorLogo {
   width: 60vw;
 }

}

/**************** teampage *********************/

@media (max-width:768px) { 

 .team {
   content: url("T--Leiden--group_cropped_square.jpg")
 }
 .TeamMemberBox:nth-child(2n+2) .PicBox {
   grid-row: 1;
 }
 .TeamMemberBox:nth-child(2n+2) .MemberDescription {
   grid-row: 2;
 }
 .TeamMemberBox:nth-child(2n+1) .MemberDescription {
   align-self: start;
   padding-top: 15px;
 }
 .TeamMemberBox:nth-child(2n+2) .MemberDescription {
   align-self: start;
   padding-top: 15px;
 }
 .TeamMemberBox {
   margin: 30px 0;
   height: auto;
 }

}