Difference between revisions of "Template:DTU-Denmark/mainCSS"

 
(153 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
 
 
<html>
 
<html>
 +
<style>
 +
 +
.protocolli{
 +
list-style-type:disc!important;
 +
padding: 0px 0px!important;
 +
}
 +
 +
figcaption {
 +
    display: block;
 +
    text-align: center;
 +
    font-size: .9em;
 +
margin-bottom:25px;
 +
}
 +
 +
.footersponsors{margin: 20px;max-width:800px;width:100%;margin-right:auto; margin-left:auto;display: block;
 +
    height:auto;z-index:5;}
 +
.footergrants{
 +
margin: 20px;max-width:450px;width:50%;margin-right:auto; margin-left:auto;display: block;
 +
    height:auto;z-index:5;}
 +
 +
.avatarlink{z-index:5;max-width:100%;}
 +
 +
.descbig{display:block;}
 +
 +
.descmed{display:none;}
 +
 +
.descsmoll{display:none;}
 +
 +
.butn{
 +
color: white;
 +
    background-color: #095C55;
 +
    border-radius: 20px;
 +
    border: none;
 +
    width: 150px;
 +
    display: block;
 +
    margin: 0 auto;
 +
    margin-top: 10px;
 +
    line-height: 25px;}
 +
 +
 +
.row{
 +
line-height: 1.5em;}
 +
 +
.factbox{
 +
  text-align: center;
 +
color: rgba(9, 49, 79, 1);
 +
  padding:25px;
 +
  border-radius: 20px;
 +
background-color:#eee;
 +
 
 +
}
 +
.fact{
 +
  height: 100%;
 +
  line-height: 150%;
 +
  text-align: center;
 +
}
 +
 +
 +
.flex-center {
 +
    align-items: unset !important;}
 +
 +
.propadding{
 +
padding-top: 20px;
 +
 +
  padding-bottom: 40px;}
 +
 +
.collapsible {
 +
  background-color: rgba(9, 49, 79, 1);
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 18px;
 +
  width: 100%;
 +
  border: none;
 +
  text-align: left;
 +
  outline: none;
 +
  font-size: 20px;
 +
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
text-orientation:left;
 +
}
 +
 +
.coactive {
 +
  background-color: rgba(9, 49, 79, 1);
 +
}
 +
 +
.collapsible:hover {
 +
  background-color: #555;
 +
}
 +
 +
.collapsible:after {
 +
  content: '\002B';
 +
  color: white;
 +
  font-weight: bold;
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
 +
.coactive:after {
 +
  content: "\2212";
 +
}
 +
 +
.excontent {
 +
  padding: 0px 25px;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
  background-color: #ffffff;
 +
overflow:auto;
 +
text-align:left;
 +
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
.overlay {
 +
  position: fixed;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  background: rgba(0, 0, 0, 0.7);
 +
  transition: opacity 500ms;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
}
 +
.overlay:target {
 +
  visibility: visible;
 +
  opacity: 1;
 +
}
 +
 +
.popup {
 +
  margin: 70px auto;
 +
    padding: 20px;
 +
    background: #fff;
 +
    border-radius: 5px;
 +
    width: 70%;
 +
    max-height: 400px;
 +
    overflow: auto;
 +
    position: relative;
 +
    transition: all 5s ease-in-out;
 +
}
 +
 +
.popup h2 {
 +
  margin-top: 0;
 +
  color: #333;
 +
  font-family: Tahoma, Arial, sans-serif;
 +
}
 +
.popup .close {
 +
  position: absolute;
 +
  top: 20px;
 +
  right: 30px;
 +
  transition: all 200ms;
 +
  font-size: 30px;
 +
  font-weight: bold;
 +
  text-decoration: none;
 +
  color: #333;
 +
}
 +
.popup .close:hover {
 +
  color: #06D85F;
 +
}
 +
.popup .content {
 +
  max-height: 30%;
 +
  overflow: auto;
 +
}
 +
 +
@media screen and (max-width: 700px){
 +
  .box{
 +
    width: 70%;
 +
  }
 +
  .popup{
 +
    width: 70%;
 +
  }
 +
}
  
  
−
<style>
 
  
  
Line 12: Line 186:
 
    
 
    
 
}
 
}
 +
 +
article {
 +
  -webkit-column-count: 2;
 +
  -moz-column-count: 2;
 +
  column-count: 2;
 +
 +
}
 +
 +
 +
.dontbreakarticle{
 +
display:inline-block;}
 +
 +
 +
.allimages{border-radius:20px;}
 +
 +
.more_link {
 +
    position: absolute;
 +
    display: block;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    text-indent: -9999px;
 +
    z-index: 1000;
 +
}
 +
 +
 +
.grid {
 +
  width: 100%;
 +
  max-width: 180px;
 +
 +
 
 +
}
 +
 +
.grid::after {
 +
  content: "";
 +
  display: block;
 +
  clear: both;
 +
}
 +
 +
.grid-item {
 +
  width: 21.833%;
 +
  padding-bottom: 21.833%;
 +
  overflow: hidden;
 +
  float: left;
 +
  background: #113554;
 +
  transform: rotate(45deg);
 +
  margin: 5.5%;
 +
  margin-top: -9%;
 +
  color:#fff;
 +
  border-radius: 12px;
 +
line-height:0.8em;
 +
}
 +
 +
.grid-item:nth-child(1),
 +
.grid-item:nth-child(2),
 +
.grid-item:nth-child(3) {
 +
  margin-top: 5%;
 +
}
 +
 +
.grid-item:nth-child(5n+4) {
 +
    margin-left: 21.9%;
 +
}
 +
 +
.grid-item:nth-child(5n+6) {
 +
    clear:left;
 +
}
 +
 +
.grid-item:nth-child(5n+6):last-of-type {
 +
  margin-left: 38.25%;
 +
}
 +
 +
.grid-item:hover {
 +
  background: #eee;
 +
  color:#000;
 +
}
 +
 +
.grid-inner {
 +
  box-sizing: border-box;
 +
  position: absolute;
 +
  top:0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  transform: rotate(-45deg);
 +
  text-align: center;
 +
  padding-top: 40%;
 +
  font-size: 1em;
 +
}
 +
 +
 +
.media-list {
 +
 +
padding-left: 0;
 +
list-style: none;
 +
}
 +
 +
 +
 +
.teammobile{
 +
display:none;
 +
}
 +
 +
 +
  
 
body {
 
body {
Line 20: Line 299:
 
padding: 0px 0;
 
padding: 0px 0;
 
background-color: #eee;
 
background-color: #eee;
 +
}
 +
#otherheader{
 +
 +
  padding-top: 150px;
 +
}
 +
 +
.effect{position: absolute;opacity: 0.6;}
 +
 +
#effect1{width: 40%;
 +
   
 +
    right: 5%;
 +
    top: 9%;
 +
 +
}
 +
 +
 +
.buttonholder{position: absolute; padding-top:125px; right: 10px;}
 +
.ownbutton{
 +
background-color: Transparent;background-repeat:no-repeat;
 +
    border: none;
 +
    cursor:pointer;
 +
    overflow: hidden; 
 +
padding-right:20px;
 +
 +
}
 +
.buttonimagefront{width:60px;}
 +
#effect2{width: 12%;
 +
    left: 5%;
 +
    top: 17%;
 +
 +
}
 +
 +
 +
.effect4{width: 12%;
 +
    left: 5%;
 +
    top: 400px;
 +
 +
}
 +
 +
.effect5{width: 8%;
 +
    right: 3%;
 +
    top: 600px;
 +
transform: scaleX(-1);
 +
 +
}
 +
 +
#effect3{width: 25%;
 +
    right: 40%;
 +
    top: -2.4%;
 +
    -webkit-transform: scaleY(-1);
 +
}
 +
 +
 +
.effect5{width: 9%;
 +
    right: 3%;
 +
    top: 670px;
 +
transform: scaleX(-1);
 +
 +
}
 +
 +
.spaceh{width: 85%;
 +
    margin-left: auto;
 +
    margin-right: auto;}
 +
 +
#biobrickh{
 +
border-radius: 20px;
 +
max-width: 100%;
 +
    max-height: 100%;
 
}
 
}
  
Line 25: Line 372:
  
 
section.header_con{
 
section.header_con{
−
   background: linear-gradient(to right, rgba(9, 49, 79, .94), rgba(9, 49, 79, 1)), url('https://static.igem.org/mediawiki/2019/1/1f/T--DTU-Denmark--vectorim.png');
+
   background: radial-gradient( #09314F, #09314F, rgba(9, 49, 79, .94)), url(https://static.igem.org/mediawiki/2019/1/1f/T--DTU-Denmark--vectorim.png);
−
+
font-size:127%;
 
   padding-bottom: 150px;
 
   padding-bottom: 150px;
 
   padding-top: 50px;
 
   padding-top: 50px;
Line 34: Line 381:
 
background-size:cover;
 
background-size:cover;
 
}
 
}
 +
 +
  
 
section.grey_con{
 
section.grey_con{
 
   background: #eee;
 
   background: #eee;
−
   padding-bottom: 150px;
+
   padding-bottom: 75px;
 
   padding-top: 50px;
 
   padding-top: 50px;
 
   color: rgba(9, 49, 79, .95);
 
   color: rgba(9, 49, 79, .95);
 
}
 
}
 +
 +
  
 
a {
 
a {
Line 78: Line 429:
 
margin: 5px;
 
margin: 5px;
 
border-radius: 10px;
 
border-radius: 10px;
 +
z-index:7;
 
}
 
}
 
.member-details img {
 
.member-details img {
Line 102: Line 454:
 
text-align: center;
 
text-align: center;
 
}
 
}
 +
#globalWrapper{
 +
padding-bottom:0px;
 +
 +
}
 +
 +
  
 
.member-info h3,
 
.member-info h3,
Line 157: Line 515:
 
.member-details:hover .member-info p {
 
.member-details:hover .member-info p {
 
bottom: 0;
 
bottom: 0;
 +
}
 +
 +
.team-heading{padding-right: 15px;padding-left: 15px;
 +
  width:100%;
 +
    color:#fffff0;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
font-size:150%;}
 +
 +
.team-heading h2 {
 +
text-transform: uppercase;
 +
font-size: 22px;
 +
font-weight: 700;
 +
margin-bottom: 15px;
 +
font-size:120%;
 
}
 
}
  
 
/* Team overview */
 
/* Team overview */
 
.team-overview {
 
.team-overview {
−
padding-right: 15px;
+
 
 
   width:80%;
 
   width:80%;
−
     color:#ffffd0;
+
     color:#fffff0;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
font-size: 1.4em;
 
}
 
}
 
.team-overview h2 {
 
.team-overview h2 {
Line 169: Line 545:
 
font-size: 22px;
 
font-size: 22px;
 
font-weight: 700;
 
font-weight: 700;
−
margin-bottom: 5px;
+
margin-bottom: 15px;
 +
font-size:120%;
 
}
 
}
  
Line 177: Line 554:
 
}
 
}
  
−
.team-overview > a:before {
+
 
−
content: '';
+
−
width: 10px;
+
−
height: 2px;
+
−
position: relative;
+
−
top: -3px;
+
−
margin-right: 5px;
+
−
background-color: #ccc;
+
−
display: inline-block;
+
−
}
+
  
 
#outside {
 
#outside {
Line 221: Line 589:
  
 
/* RESPONSIVE */
 
/* RESPONSIVE */
−
@media only screen and (max-width : 992px) {
+
@media only screen and (max-width : 991px) {
 
.sm-no-flex {
 
.sm-no-flex {
 
display: block;
 
display: block;
 
}
 
}
 
.sm-no-float {
 
.sm-no-float {
−
float: none !important;
+
float: center !important;
 
}
 
}
 
.sm-text-center {
 
.sm-text-center {
 
text-align: center;
 
text-align: center;
 
}
 
}
 +
 +
.descbig{display:none}
 +
.descmed{display:block}
 +
.descsmoll{display:none;}
 +
 +
.topimg{
 +
    display: contents;
 +
}
 
}
 
}
  
Line 252: Line 628:
 
padding: 15px;
 
padding: 15px;
 
}
 
}
−
+
.team-overview {
 +
padding-right: 0px;
 +
 
 +
font-size: 1.0em;
 +
}
 +
}
 +
 
 +
@media only screen and (max-width : 450px) {
 +
.descbig{display:none}
 +
.descmed{display:none}
 +
.descsmoll{display:block;}
 +
 
 
}
 
}
  
Line 259: Line 646:
 
width: 47%;
 
width: 47%;
 
}
 
}
 +
 
}
 
}
  
Line 275: Line 663:
 
section.darkblue_con{
 
section.darkblue_con{
 
   background: rgba(9, 49, 79, 1);
 
   background: rgba(9, 49, 79, 1);
−
   padding-bottom: 50px;
+
   padding-bottom: 75px;
 
   padding-top: 50px;
 
   padding-top: 50px;
 
   color: #eee;
 
   color: #eee;
Line 287: Line 675:
 
.image1 {
 
.image1 {
 
   position: absolute;
 
   position: absolute;
−
   top: 8%;
+
   top: 70%;
 
   left: 5%;
 
   left: 5%;
  
Line 293: Line 681:
 
.image2 {
 
.image2 {
 
   position: absolute;
 
   position: absolute;
−
   top: 7%;
+
   top: 105%;
 
   left: 28%;
 
   left: 28%;
  
Line 299: Line 687:
 
.image3 {
 
.image3 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 25%;
−
   left: 85%;
+
   right:0px;
  
 
}
 
}
 
.image4 {
 
.image4 {
 
   position: absolute;
 
   position: absolute;
−
   top: 6%;
+
   top: 75%;
 
   left: 12%;
 
   left: 12%;
  
Line 312: Line 700:
 
.image5 {
 
.image5 {
 
   position: absolute;
 
   position: absolute;
−
   top: 7.3%;
+
   top: 115%;
 
   left: 71%;
 
   left: 71%;
  
Line 319: Line 707:
 
.image6 {
 
.image6 {
 
   position: absolute;
 
   position: absolute;
−
   top: 9.2%;
+
   top: 85%;
−
   left: 81%;
+
   right: 5px;
  
 
}
 
}
Line 327: Line 715:
 
   position: absolute;
 
   position: absolute;
 
   top: 8%;
 
   top: 8%;
−
   left: 88%;
+
   right: 97px;
  
 
}
 
}
Line 333: Line 721:
 
.image8 {
 
.image8 {
 
   position: absolute;
 
   position: absolute;
−
   top: 8%;
+
   top: 106%;
 
   left: 13%;
 
   left: 13%;
  
Line 340: Line 728:
 
.image9 {
 
.image9 {
 
   position: absolute;
 
   position: absolute;
−
   top: 2.3%;
+
   top: 120%;
−
   left: 90%;
+
   right: 5px;
  
 
}
 
}
Line 347: Line 735:
 
.image10 {
 
.image10 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 6%;
−
   left: 21%;
+
   left: 23%;
  
 
}
 
}
Line 357: Line 745:
 
.image11 {
 
.image11 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.3%;
+
   bottom: -80px;
 
   left: 10%;
 
   left: 10%;
 +
  
 
}
 
}
Line 364: Line 753:
 
.image12 {
 
.image12 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.6%;
+
   top: 50%;
 
   left: 84%;
 
   left: 84%;
  
Line 371: Line 760:
 
.image13 {
 
.image13 {
 
   position: absolute;
 
   position: absolute;
−
   top: 12.5%;
+
   top: 90%;
 
   left: 75%;
 
   left: 75%;
  
Line 380: Line 769:
  
 
.scaleit{
 
.scaleit{
−
   width: 17%;
+
   max-height: 25vh;
 
   height: auto;
 
   height: auto;
 
}
 
}
  
 
.scaleit1{
 
.scaleit1{
−
   width: 7%;
+
   max-height: 27vh;
 
   height: auto;
 
   height: auto;
 
}
 
}
  
−
.scaleit2{
+
 
−
  width: 12%;
+
 
−
  height: auto;
+
 
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 
}
 
}
  
−
.scaleit3{
+
/* Modal Content (image) */
−
  width: 5%;
+
.modal-content {
−
  height: auto;
+
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 1400px;
 
}
 
}
  
−
.scaleit4{
+
/* Caption of Modal Image */
−
  width: 10%;
+
#caption {
−
  height: auto;
+
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 
}
 
}
  
−
.scaleit5{
+
/* Add Animation */
−
   width: 6%;
+
.modal-content, #caption {     
−
  height: auto;
+
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 
}
 
}
  
−
.scaleit6{
+
@-webkit-keyframes zoom {
−
  width: 15%;
+
    from {-webkit-transform:scale(0)}
−
  height: auto;
+
    to {-webkit-transform:scale(2)}
 
}
 
}
  
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
  
−
@media only screen and (max-width: 1353px) {
+
/* The Close Button */
−
.image10 {
+
.close {
−
  position: absolute;
+
    position: absolute;
−
  top: 1%;
+
    top: 75px;
−
  left: 21%;
+
    right: 35px;
−
margin-left:12%;
+
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
}
  
 +
.close:hover,
 +
.close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 
}
 
}
 +
 +
/* 100% Image Width on Smaller Screens */
 +
@media only screen and (max-width: 700px){
 +
    .modal-content {
 +
        width: 100%;
 +
    }
 
}
 
}
  
−
@media only screen and (min-width: 1289px) {
+
.teambig{
−
    .scaleit{
+
display:block;
−
    width: 218px;
+
}
−
    height: auto;
+
 
−
  }
+
 
 +
 
 +
 
 +
@media only screen and (min-width: 1830px) {
 +
 
 
    
 
    
−
  .scaleit1{
+
.image1 {
−
    width: 90px;
+
−
    height: auto;
+
−
  }
+
−
  .scaleit2{
+
−
    width: 155px;
+
−
    height: auto;
+
−
  }
+
−
  .scaleit5{
+
−
    width: 77px;
+
−
    height: auto;
+
−
  }
+
−
  .scaleit4{
+
−
    width: 129px;
+
−
    height: auto;
+
−
  }
+
−
  .scaleit6{
+
−
    width: 194px;
+
−
    height: auto;
+
−
  }
+
−
 
+
−
.image1 {
+
 
   position: absolute;
 
   position: absolute;
−
   top: 8%;
+
   top: 76%;
 
   left: 5%;
 
   left: 5%;
  
Line 460: Line 878:
 
.image2 {
 
.image2 {
 
   position: absolute;
 
   position: absolute;
−
   top: 7%;
+
   top: 105%;
 
   left: 28%;
 
   left: 28%;
  
Line 466: Line 884:
 
.image3 {
 
.image3 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 25%;
−
   left: 85%;
+
   right:0px;
 +
 
  
 
}
 
}
 
.image4 {
 
.image4 {
 
   position: absolute;
 
   position: absolute;
−
   top: 6%;
+
   top: 75%;
 
   left: 12%;
 
   left: 12%;
  
Line 479: Line 898:
 
.image5 {
 
.image5 {
 
   position: absolute;
 
   position: absolute;
−
   top: 7.3%;
+
   top: 115%;
 
   left: 71%;
 
   left: 71%;
  
Line 486: Line 905:
 
.image6 {
 
.image6 {
 
   position: absolute;
 
   position: absolute;
−
   top: 9.2%;
+
   top: 85%;
−
   left: 81%;
+
   right: 5px;
  
 
}
 
}
Line 494: Line 913:
 
   position: absolute;
 
   position: absolute;
 
   top: 8%;
 
   top: 8%;
−
   left: 88%;
+
   right: 97px;
  
 
}
 
}
Line 500: Line 919:
 
.image8 {
 
.image8 {
 
   position: absolute;
 
   position: absolute;
−
   top: 8%;
+
   top: 106%;
 
   left: 13%;
 
   left: 13%;
  
Line 507: Line 926:
 
.image9 {
 
.image9 {
 
   position: absolute;
 
   position: absolute;
−
   top: 2.3%;
+
   top: 120%;
−
   left: 90%;
+
   right: 5px;
  
 
}
 
}
−
 
 
.image10 {
 
.image10 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 6%;
−
   left: 21%;
+
   left: 23%;
 +
margin-left:5%;
  
 
}
 
}
Line 524: Line 943:
 
.image11 {
 
.image11 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.3%;
+
   bottom: 50px;
 
   left: 10%;
 
   left: 10%;
  
Line 531: Line 950:
 
.image12 {
 
.image12 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.6%;
+
   top: 50%;
 
   left: 84%;
 
   left: 84%;
  
Line 538: Line 957:
 
.image13 {
 
.image13 {
 
   position: absolute;
 
   position: absolute;
−
   top: 12.5%;
+
   top: 90%;
 
   left: 75%;
 
   left: 75%;
  
 
}
 
}
 +
 +
 +
 +
  
  
Line 547: Line 970:
  
  
−
@media only screen and (max-width: 1353px) {
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
@media only screen and (min-width: 1289px) {
 +
    .scaleit{
 +
  max-height: 25vh;
 +
  height: auto;
 +
}
 +
 
 +
.scaleit1{
 +
  max-height: 27vh;
 +
    height: auto;
 +
  }
 
    
 
    
−
+
.image1 {
 +
  position: absolute;
 +
  top: 76%;
 +
  left: 5%;
  
−
.image10 {
+
}
 +
.image2 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 105%;
−
   left: 21%;
+
   left: 28%;
−
margin-left:5%;
+
  
 +
}
 +
.image3 {
 +
  position: absolute;
 +
  top: 25%;
 +
  right:0px;
 +
 +
 +
}
 +
.image4 {
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 12%;
 +
 +
}
 +
 +
.image5 {
 +
  position: absolute;
 +
  top: 115%;
 +
  left: 71%;
 +
 +
}
 +
 +
.image6 {
 +
  position: absolute;
 +
  top: 85%;
 +
  right: 5px;
 +
 +
}
 +
 +
.image7 {
 +
  position: absolute;
 +
  top: 8%;
 +
  right: 97px;
 +
 +
}
 +
 +
.image8 {
 +
  position: absolute;
 +
  top: 106%;
 +
  left: 13%;
 +
 +
}
 +
 +
.image9 {
 +
  position: absolute;
 +
  top: 120%;
 +
  right: 5px;
 +
 +
}
 +
 +
.image10 {
 +
  position: absolute;
 +
  top: 6%;
 +
  left: 23%;
 +
margin-left:12%;
 
}
 
}
  
Line 564: Line 1,063:
 
.image11 {
 
.image11 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.3%;
+
   bottom: -80px;
 
   left: 10%;
 
   left: 10%;
  
Line 571: Line 1,070:
 
.image12 {
 
.image12 {
 
   position: absolute;
 
   position: absolute;
−
   top: 13.6%;
+
   top: 50%;
 
   left: 84%;
 
   left: 84%;
  
Line 578: Line 1,077:
 
.image13 {
 
.image13 {
 
   position: absolute;
 
   position: absolute;
−
   top: 12.5%;
+
   top: 90%;
 
   left: 75%;
 
   left: 75%;
  
 
}
 
}
  
−
 
+
 
 
}
 
}
  
  
 +
@media only screen and (max-width: 1753px) {
 +
.image10 {
 +
  position: absolute;
 +
  top: 6%;
 +
  left: 23%;
 +
margin-left:5%;
  
−
@media only screen and (min-width: 1353px) {
+
}
−
 
+
}
−
    
+
 
−
  .image1 {
+
 
 +
 
 +
 
 +
 
 +
@media only screen and (max-width: 1200px) {
 +
   .scaleit{max-height:18vh}
 +
 
 +
.scaleit1{max-height:19vh}
 +
 
 +
.image1 {
 
   position: absolute;
 
   position: absolute;
−
   top: 66%;
+
   top: 95%;
 
   left: 5%;
 
   left: 5%;
  
Line 599: Line 1,113:
 
.image2 {
 
.image2 {
 
   position: absolute;
 
   position: absolute;
−
   top: 69%;
+
   top: 105%;
 
   left: 28%;
 
   left: 28%;
  
Line 605: Line 1,119:
 
.image3 {
 
.image3 {
 
   position: absolute;
 
   position: absolute;
−
   top: 4%;
+
   top: 25%;
−
  left: 85%;
+
  right:0px;
  
 
}
 
}
 
.image4 {
 
.image4 {
 
   position: absolute;
 
   position: absolute;
−
   top: 50%;
+
   top: 94%;
 
   left: 12%;
 
   left: 12%;
  
Line 618: Line 1,132:
 
.image5 {
 
.image5 {
 
   position: absolute;
 
   position: absolute;
−
   top: 64%;
+
   top: 115%;
 
   left: 71%;
 
   left: 71%;
  
Line 625: Line 1,139:
 
.image6 {
 
.image6 {
 
   position: absolute;
 
   position: absolute;
−
   top: 83%;
+
   top: 85%;
−
   left: 81%;
+
   right: 5px;
  
 
}
 
}
Line 632: Line 1,146:
 
.image7 {
 
.image7 {
 
   position: absolute;
 
   position: absolute;
−
   top: 73%;
+
   top: 8%;
−
   left: 88%;
+
   right: 97px;
  
 
}
 
}
Line 639: Line 1,153:
 
.image8 {
 
.image8 {
 
   position: absolute;
 
   position: absolute;
−
   top: 68%;
+
   top: 106%;
 
   left: 13%;
 
   left: 13%;
  
Line 646: Line 1,160:
 
.image9 {
 
.image9 {
 
   position: absolute;
 
   position: absolute;
−
   top: 19%;
+
   top: 120%;
−
   left: 90%;
+
   right: 5px;
  
 
}
 
}
Line 653: Line 1,167:
 
.image10 {
 
.image10 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 6%;
−
   left: 21%;
+
   left: 23%;
−
margin-left:5%;
+
margin-left:0%;
−
 
+
 
}
 
}
  
−
 
+
 
−
 
+
 
−
  .image11 {
+
 
 +
.image11 {
 
   position: absolute;
 
   position: absolute;
−
   top: 119%;
+
   bottom: -160px;
 
   left: 10%;
 
   left: 10%;
  
Line 670: Line 1,184:
 
.image12 {
 
.image12 {
 
   position: absolute;
 
   position: absolute;
−
   top: 110%;
+
   top: 50%;
 
   left: 84%;
 
   left: 84%;
  
Line 677: Line 1,191:
 
.image13 {
 
.image13 {
 
   position: absolute;
 
   position: absolute;
−
   top: 121%;
+
   top: 90%;
 
   left: 75%;
 
   left: 75%;
  
 
}
 
}
 +
 +
 
}
 
}
  
−
@media only screen and (max-width: 986px) {
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
@media only screen and (max-width: 991px) {
 
    
 
    
−
 
+
.scaleit{max-height:18vh}
−
  .image1 {
+
 
 +
.scaleit1{max-height:19vh}
 +
 
 +
.image1 {
 
   position: absolute;
 
   position: absolute;
−
   top: 16%;
+
   top: 76%;
 
   left: 5%;
 
   left: 5%;
  
Line 694: Line 1,237:
 
.image2 {
 
.image2 {
 
   position: absolute;
 
   position: absolute;
−
   top: 12%;
+
   top: 105%;
−
   left: 68%;
+
   left: 91%;
  
 
}
 
}
 
.image3 {
 
.image3 {
 
   position: absolute;
 
   position: absolute;
−
   top: 4%;
+
   top: 25%;
−
  left: 85%;
+
  right:0px;
 +
 
  
 
}
 
}
Line 707: Line 1,251:
 
   position: absolute;
 
   position: absolute;
 
   top: 60%;
 
   top: 60%;
−
   left: 5%;
+
   left: 10%;
  
 
}
 
}
Line 713: Line 1,257:
 
.image5 {
 
.image5 {
 
   position: absolute;
 
   position: absolute;
−
   top: 67%;
+
   top: 115%;
 
   left: 71%;
 
   left: 71%;
  
Line 720: Line 1,264:
 
.image6 {
 
.image6 {
 
   position: absolute;
 
   position: absolute;
−
   top: 83%;
+
   top: 85%;
−
   left: 81%;
+
   right: 5px;
  
 
}
 
}
Line 727: Line 1,271:
 
.image7 {
 
.image7 {
 
   position: absolute;
 
   position: absolute;
−
   top: 73%;
+
   top: 8%;
−
  left: 88%;
+
right: 97px;
  
 
}
 
}
Line 734: Line 1,278:
 
.image8 {
 
.image8 {
 
   position: absolute;
 
   position: absolute;
−
   top: 74%;
+
   top: 106%;
−
   left: 10%;
+
   left: 13%;
  
 
}
 
}
Line 741: Line 1,285:
 
.image9 {
 
.image9 {
 
   position: absolute;
 
   position: absolute;
−
   top: 19%;
+
   top: 120%;
−
   left: 90%;
+
   right: 5px;
  
 
}
 
}
Line 748: Line 1,292:
 
.image10 {
 
.image10 {
 
   position: absolute;
 
   position: absolute;
−
   top: 1%;
+
   top: 110%;
−
   left: 10%;
+
   left: 0%;
−
 
+
margin-left:0%;
 
}
 
}
  
−
 
+
 
−
 
+
 
−
  .image11 {
+
 
 +
.image11 {
 
   position: absolute;
 
   position: absolute;
−
   top: 119%;
+
   bottom: -90px;
−
   left: 10%;
+
   left: 5px;
  
 
}
 
}
Line 764: Line 1,309:
 
.image12 {
 
.image12 {
 
   position: absolute;
 
   position: absolute;
−
   top: 110%;
+
   top: 50%;
 
   left: 84%;
 
   left: 84%;
  
Line 771: Line 1,316:
 
.image13 {
 
.image13 {
 
   position: absolute;
 
   position: absolute;
−
   top: 121%;
+
   top: 30%;
 
   left: 75%;
 
   left: 75%;
  
 
}
 
}
 +
 
    
 
    
 
   section.header_con{
 
   section.header_con{
Line 786: Line 1,332:
 
     margin-bottom: 50px;
 
     margin-bottom: 50px;
 
   }
 
   }
 +
 +
.spaceh{width: 95%;
 +
    margin-left: auto;
 +
    margin-right: auto;}
 +
 +
 
}
 
}
 +
 +
 +
 +
@media only screen and (max-width: 888px) {
 +
 +
.image8 {
 +
    position: absolute;
 +
    top: 106%;
 +
    left: 13%;
 +
}
 +
 +
}
 +
 +
@media only screen and (max-width: 727px) {
 +
 +
 +
 +
.image1 {
 +
    position: absolute;
 +
    top: 76%;
 +
    left: 5%;
 +
}
 +
 +
.image8 {
 +
    position: absolute;
 +
    top: 106%;
 +
    left: 18%;
 +
}
 +
 +
}
 +
 +
@media only screen and (max-width: 700px) {
 +
.image11 {
 +
 +
  position: absolute;
 +
  bottom: -80px;
 +
  left: 1%;
 +
 +
}
 +
 +
.image12 {
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 84%;
 +
 +
}
 +
 +
.image13 {
 +
  position: absolute;
 +
  top: 30%;
 +
  left: 75%;
 +
 +
}
 +
 +
}
 +
 +
 +
 +
  
 
@media only screen and (max-width: 600px) {
 
@media only screen and (max-width: 600px) {
−
    
+
   .teammobile{
 +
display:block;
 +
 
 +
}
 +
 
 +
article {
 +
  -webkit-column-count: 1;
 +
  -moz-column-count: 1;
 +
  column-count: 1;
 +
}
 +
 
 +
.col-xs-3 {
 +
    width: 100%;
 +
}
 +
.teambig{
 +
display:none;
 +
}
 +
 
 +
.col-xs-9{width:100%}
 +
 
 +
 
 
   .team-overview h2{
 
   .team-overview h2{
 
     padding-top:0px;
 
     padding-top:0px;
Line 861: Line 1,492:
  
  
−
</style>
 
  
 +
 +
 +
 +
 +
 +
</style>
 
</html>
 
</html>

Latest revision as of 21:57, 13 December 2019