@font-face {
    font-family: "Ruda-Bold";
    src: url("Ruda-Bold.ttf") format("truetype");
    font-style:normal;
}

@font-face {
    font-family: "CirrusCumulus";
    src: url("CirrusCumulus.otf") format("opentype");
    font-style:normal;
}

::selection {
    background-color: #FFD9D9;
}
::-moz-selection {
    background-color: #FFD9D9;
}
::-o-selection {
    background-color: #FFD9D9;
}
::-ms-selection {
    background-color: #FFD9D9;
}
::-webkit-selection {
    background-color: #FFD9D9;
}

.col2 {width: 20%}
.col3 {width: 35%}
.col4 {width: 45%}
.col5 {width: 55%}
.col6 {width: 65%;}
.col8 {width: 80%}
.col10 {width: 100%}


html {
	-ms-overflow-style:-ms-autohiding-scrollbar;
	scrollbar-width: none;
	height: 100vh;
    width: 100vw;
    font-size: 16pt;
}
body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  font-family: "Ruda-Bold";
  margin: 0px;
  color: #000;
}

* {box-sizing: border-box;}

a:hover {
	color: #000000;
}
a{
    color: #000000;
	text-decoration: none;
	cursor: cell;
}
p{
    color: #000000;
}

button.title, a.title {
    color: #F00;
	border: none;
	background: transparent;
	font-size: 1rem;
	font-family: "Ruda-Bold";
	text-align: left;
	cursor: help;
    margin: 0rem 0rem 0rem 0.5rem;
}
button.title:hover, a.title:hover {
    text-decoration: none;	
    color:  #FFD9D9;
    text-shadow: 1px 1px red;
}
nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 3;
    }
nav .back { 
    padding: 1rem;
    display: flex;
    margin-left: auto;
    background: #FFD9D9;
    width: max-content;
    border-radius: 0rem 0rem 0rem 2rem; 
}
nav .footerLinks{
    display: none;
}
.about button {
	border: none;
	background: transparent;
	text-shadow: 1px 0px 2px #FF0000;
	font-size: 1rem;
	font-family: "Ruda-Bold";
	font-size: 2.8vmax;
	line-height: 3.6vmax;
	cursor: alias;
	-webkit-animation: color-change 3s ease-in-out infinite;
    -moz-animation: color-change 3s ease-in-out infinite;
    -o-animation: color-change 3s ease-in-out infinite;
    -ms-animation: color-change 3s ease-in-out infinite;
    animation: color-change 3s ease-in-out infinite;
}
    @-webkit-keyframes color-change {
        0% { color: #FFFFFF; }
        50% { color: #FFD9D9; }
        100% { color: #FFFFFF; }
    }
    @-moz-keyframes color-change {
        0% { color: #FFFFFF; }
        50% { color: #FFD9D9; }
        100% { color: #FFFFFF; }
    }
    @-o-keyframes color-change {
        0% { color:  #FFFFFF; }
        50% { color: #FFD9D9; }
        100% { color: #FFFFFF; }
    }
    @keyframes color-change {
        0% { color: #FFFFFF; }
        50% { color: #FFD9D9; }
        100% { color: #FFFFFF; }
	}
.about button:hover {
    color: #FF0000;
    text-shadow: none;
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation:  none;
    -ms-animation: none;
    animation: none;
}
img {
	width: 100%;
}
figure {
    margin: 0rem;
}

.colAudioSkew { 
    transform: skewY(10deg);
    margin: 10rem 0rem 10rem 0rem !important;
}

audio{
	width: 100%;
    background: transparent;
    filter: hue-rotate(0deg) saturate(100) contrast(100%);
    /*filter: contrast(100%) invert(100%);*/
}

audio::-webkit-media-controls-panel {
  background: transparent;
}
#controls button {
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Ruda-Bold";
    font-size: 1rem;
    cursor: alias;
    text-transform: uppercase;
    margin: 1rem 0rem 1rem 0rem;
    padding: 0rem;
    text-align: left;
    -webkit-animation: playbutton 8s infinite;
    -moz-animation: playbutton 8s infinite;
    -o-animation: playbutton 8s infinite;
    -ms-animation: playbutton 8s infinite;
    animation: playbutton 8s infinite;
} 
#controls button:hover {
    text-decoration: none;
    color: #FFD9D9;
    text-shadow: 1px 0px 2px #000000;
    margin: 1rem 0rem 1rem 0rem;
    -webkit-animation: none;
    -moz-animation:  none;
    -o-animation:  none;
    -ms-animation:  none;
    animation:  none;
} 
    @-webkit-keyframes playbutton {
        0% { color: #000; text-shadow: none;}
        90% { color: #000; text-shadow: none; }
        100% {  color: #FFD9D9; text-shadow: 1px 0px 0.5px #000000; }
    }
    @-moz-keyframes playbutton {
        0% { color: #000; text-shadow: none;}
        90% { color: #000; text-shadow: none; }
        100% {  color: #FFD9D9; text-shadow: 1px 0px 0.5px #000000; }
    }
    @-o-keyframes playbutton {
        0% { color: #000; text-shadow: none;}
        90% { color: #000; text-shadow: none; }
        100% {  color: #FFD9D9; text-shadow: 1px 0px 0.5px #000000; }
    }
    @keyframes playbutton {
        0% { color: #000; text-shadow: none;}
        90% { color: #000; text-shadow: none; }
        100% {  color: #FFD9D9; text-shadow: 1px 0px 0.5px #000000; }
    }
#progress {
   border: 0.12rem solid #000000;
    margin: 1rem 0rem 1rem 0rem;
}
#bar {
   height: 1rem;
   background-color: #000000;
   width: 0;
}
figcaption{
	margin: 1rem 0rem 2rem 0rem;
}
main{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: scroll;
	height: 100%;
	padding: 0rem 1rem 0rem 1rem;
	z-index: 2;
}
.starwrap {
      position: fixed;
      top: 0;
      right: 0;
      margin: 10%;
}
#star  {
    height: 300px;
    width: 300px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
#star:before,
#star:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('orangedot.png');
  background-color: transparent !important;
  height: 300px;
  width: 300px;
  background-size: cover;
}
#star:before {
  /* transform: rotate(30deg);
   box-shadow: 1px 1px 10px red; */
}
#star:after {
  /* transform: rotate(60deg); */
}
#star a {
    position: relative;
    color: #FFD9D9  !important;
    text-shadow: 1px 1px 1px #000 !important;
    z-index: 100;
}
#star a:hover {
    position: relative;
    text-shadow: 1px 1px 1px #FF0000 !important;
    cursor: alias;
}
.RECon{
	transform: skewY(-20deg);
}
.AudioCollectif a{
    color: #000;
}
.AudioCollectif p{
    margin: 10rem 1rem 2rem 1rem;
    transform: skewY(20deg);
    color: #F00;
    font-size: 1.6rem;
}
.FemTech{
    margin: 2rem 0rem 0rem 0rem;
    transform: skewY(20deg);
}
.FemTech p{
    margin: 1rem 0rem 0rem 0rem;
    transform: skew(-50deg);
    text-align: center;
    height: 2rem;
}
.FemTech p:hover{
    transform: skew(0deg);
}
.FemTech a{
    color: #F00;
    font-size: 0.75rem;
}

.PermanentExihibit{
    margin: 3rem 0rem 0rem 0rem;
	transform: skewY(20deg);
}
.PermanentExihibit p{
    transform: skew(-50deg);
    text-align: center;
    height: 2rem;
}
.PermanentExihibit p:hover{
    transform: skew(0deg);
    letter-spacing: 0.6rem;
}
.PermanentExihibit a{
    color: #F00;
    font-size: 2rem;
}
.PermanentExihibit a:hover{
}
.PermanentExihibit img{
    filter: grayscale(1);
}
.PermanentExihibit:hover img {
    filter: grayscale(0);
    z-index: 4;
}
.FeaturedArtist{
	transform: skewY(-20deg);
	/*height: 35vh;*/
    padding: 2rem 0rem 2.6rem 0rem;
}
.WORGanize {
	transform: skewY(20deg);
    /*height: 35vh;*/
    padding: 0rem 0rem 2.8rem 0rem !important;   
}
.FeaturedArtist a {	
    color: #000;
    -webkit-animation: shadowingL 20s ease-in-out infinite;
    -moz-animation: shadowingL 20s ease-in-out  infinite;
    -o-animation: shadowingL 20s ease-in-out  infinite;
    -ms-animation: shadowingL 20s ease-in-out  infinite;
    animation: shadowingL 20s ease-in-out  infinite;

}
.FeaturedArtist a:hover {
    color: #000;
    text-decoration: none;
    -webkit-animation: none;
    animation: none;

}
    @-webkit-keyframes shadowingL {
        0% { text-shadow: 0px 0px 0px #000; }
        70% { text-shadow: -8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0px #000; }
    }
    @-moz-keyframes shadowingL {
        0% { text-shadow: 0px 0px 0px #000; }
        70% { text-shadow: -8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0px #000; }
    }
    @-o-keyframes shadowingL {
        0% { text-shadow: 0px 0px 0px #000; }
        70% { text-shadow: -8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0px #000; }
    }
    @keyframes shadowingL {
        0% { text-shadow: 0px 0px 0px #000; }
        70% { text-shadow: -8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0px #000; }
    } 
.WORGanize a {
    color: #000;
	-webkit-animation: shadowingR 8s ease-in-out  infinite;
    -moz-animation: shadowingR 8s ease-in-out  infinite;
    -o-animation: shadowingR 8s ease-in-out  infinite;
    -ms-animation: shadowingR 8s ease-in-out  infinite;
    animation: shadowingR 8s ease-in-out  infinite;
}
.WORGanize a:hover {
    color: #000;
    text-decoration: none;
	-webkit-animation: none;
	animation: none;
}
    @-webkit-keyframes shadowingR {
        0% { text-shadow: 0px 0px 0px #000; }
        30% { text-shadow: 8px -8px 0.5px #000; }
        60% { text-shadow: 8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0.5px #000; }
    }
    @-moz-keyframes shadowingR {
        0% { text-shadow: 0px 0px 0px #000; }
        30% { text-shadow: 8px -8px 0.5px #000; }
        60% { text-shadow: 8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0.5px #000; }
    }
    @-o-keyframes shadowingR {
        0% { text-shadow: 0px 0px 0px #000; }
        30% { text-shadow: 8px -8px 0.5px #000; }
        60% { text-shadow: 8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0.5px #000; }
    }
    @keyframes shadowingR {
        0% { text-shadow: 0px 0px 0px #000; }
        30% { text-shadow: 8px -8px 0.5px #000; }
        60% { text-shadow: 8px -8px 0.5px #000; }
        100% { text-shadow: 0px 0px 0.5px #000; }
    }

.WORGanize p:last-child {
     padding: 0rem 0rem 4rem 0rem !important;   
}
.FemTech-Video{
    margin: 5rem 0rem 0rem 0rem;
    padding: 0rem 5rem 0rem 0rem;
}
.FemTech-Video video{
    padding: 1rem 0rem 1rem 0rem;
    width: 100%;
}
.FemTech-Video a{
    font-size: 0.75rem;
}
.FemTech-Video a:hover{
    color: #F00;
    font-size: 0.75rem;
}
#extract main{
    height: auto !important;
}
.Extract:first-child {
  box-shadow: 20px 0px 100px #FFD9D9;  
}
.Extract{
  padding: 2rem 0rem 2.5rem 0rem; 
  box-shadow: inset 100px 0px 10px #FFD9D9;  
}
.Extract .radio{
  padding: 0rem 0rem 0rem 10rem; 
}
.LandBK {
    padding: 1rem 10% 1rem 10%;
}
.LandBKIntro {
    padding: 0% 20% 10rem 20%;
}
.LandBKIntro .title {
    text-align: center;
}
.LandBK a, .Extract a, .Extract a:visited{
 text-decoration: underline !important;
 text-decoration-color: #F00 !important;
}
.LandBK a:hover, .Extract a:hover{
 color: #FFD9D9;
}
.ExtractInterview {
    box-shadow: -20px 20px 10px #FFD9D9 !important;
    margin: 2rem;     
}
.ExtractIntro, .ExtractIntro:first-child {
    box-shadow: none;
}
.Twifeed{
	transform: skewY(-20deg);
	filter: grayscale(1);
	height: 30vh;
    opacity: 0.6;
    background: transparent;
    filter: hue-rotate(143deg) saturate(40) contrast(100%);
}

.Twifeed:hover{
    filter: grayscale(1);
    opacity: 1;
}
iframe html.SandboxRoot #twitter-widget-0 div.timeline-Widget{
    background-color: transparent !important;
}
footer{
	position: fixed;
	bottom: 0;
    left: 0;
	padding: 1rem 1rem 0rem 1rem;
	/*width: max-content;*/
    width: 100%;
}
.footerLinks {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
    margin: 1.2rem 0rem 2rem 0rem;
}

.tilebottom , .socialcontact {
    z-index: 3;
}

.credits {
    font-size: 0.7rem;
    color:  #FFD9D9;
    text-shadow: 1px 1px red;
    margin: 1rem 1rem 1rem 1rem;
}
.menubottom{
    display: none;
}
a.back{
  color: #F00;   
}
a.sitemap {
    color: #FFD9D9 !important;
    -webkit-animation: shadow 20s  infinite;
    -moz-animation: shadow 20s  infinite;
    -o-animation: shadow 20s   infinite;
    -ms-animation: shadow 20s infinite;
    animation: shadow 20s  infinite;
}
a.newsletter {
    color:  #F00 !important;
}
a.newsletter:hover {
    color: #FFD9D9 !important;
    text-shadow: 0px 0px 2px #F00;
}
a.twitter {
    color: #FFD9D9 !important;
    -webkit-animation: shadow 6s ease-in-out  infinite;
    -moz-animation: shadow 6s ease-in-out  infinite;
    -o-animation: shadow 6s ease-in-out  infinite;
    -ms-animation: shadow 6s ease-in-out  infinite;
    animation: shadow 6s ease-in-out  infinite;
}
a.social {
    color: #FFD9D9 !important;
	-webkit-animation: shadow 12s ease-in-out  infinite;
    -moz-animation: shadow 12s ease-in-out  infinite;
    -o-animation: shadow 12s ease-in-out  infinite;
    -ms-animation: shadow 12s ease-in-out  infinite;
    animation: shadow 12s ease-in-out  infinite;
}
a.contact, a.back:hover {
    color: #FFD9D9 !important;
	-webkit-animation: shadow 8s ease-in-out  infinite;
    -moz-animation: shadow 8s ease-in-out  infinite;
    -o-animation: shadow 8s ease-in-out  infinite;
    -ms-animation: shadow 8s ease-in-out  infinite;
    animation: shadow 8s ease-in-out  infinite;
}
a.contact:hover, a.social:hover, a.twitter:hover, a.sitemap:hover {
    text-decoration: none;
    color: #F00 !important;
	-webkit-animation: none;
	animation: none;
}

    @-webkit-keyframes shadow {
        0% { text-shadow: 0px 0px 3px #F00; }
        50% { text-shadow: 0px 0px 0px #F00; }
        100% { text-shadow: 0px 0px 3px #F00; }
    }
    @-moz-keyframes shadow {
        0% { text-shadow: 0px 0px 3px #F00; }
        50% { text-shadow: 0px 0px 0px #F00; }
        100% { text-shadow: 0px 0px 3px #F00; }
    }
    @-o-keyframes shadow {
        0% { text-shadow: 0px 0px 3px #F00; }
        50% { text-shadow: 0px 0px 0px #F00; }
        100% { text-shadow: 0px 0px 3px #F00; }
    }
    @keyframes shadow {
        0% { text-shadow: 0px 0px 3px #F00; }
        50% { text-shadow: 0px 0px 0px #F00; }
        100% { text-shadow: 0px 0px 3px #F00; }
    }

/* SITEMAP */
.sitemap-allcategories {
    padding: 2rem 0rem 2rem 0rem; 
    margin: 0% 0% 0% 20%;
    max-height: 65vh;
    overflow: auto;
    box-shadow: 20px 10px 2rem #dacece;
    border-radius: 19% 15% 18% 16% / 9% 10% 10% 20%;
    -webkit-border-radius: 19% 15% 18% 16% / 9% 10% 10% 20%;
}
a.category {
    margin:  2rem 0rem 2rem 0rem;
    text-transform: uppercase;
    font-size: 10pt;
    line-height: 2rem;
}
.sitemap-allcategories a:hover{
    margin: 2rem 0rem 0rem 0rem; 
    background-color: #FFD9D9; 
}
.arrow{
    justify-content: end;
    display: flex;
    width: 100%;
    padding: 0rem 1rem 0rem 0rem;
}

a#scrolldown:hover, a#scrollup:hover{
    margin: 0rem !important;
}

/* ABOUT */
.about {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: initial; 
}
.about p {
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 2rem 0rem 2rem;
    font-size: 5vmin;
    line-height: 6.6vmin; 
    color: #FF0000;
}
.about  a {
    color: #FFD9D9;
    text-shadow: 1px 1px 4px #F00;
}
.about  a:hover {
    color:  #F00;
    text-shadow: 1px 1px 4px #FFD9D9;
    cursor: alias;
}
.flow {
    opacity: 0.2;
    background-color: #FFD9D9;
    height: auto;
    animation: slow 30s ease-in-out 2; 
    -webkit-animation: slow 30s ease-in-out 2; 
    cursor: pointer;
}
.flow:hover {
    animation: none; 
    -webkit-animation: none; 
    opacity: 1;
    background-color: #FFD9D9;
    cursor: pointer;
}
@keyframes slow {
0% {
	transform: scale(1);
    }
50% {
	transform: scale(5);
    }	
100% {
	transform: scale(1);
    }
}


/*verbindunggif project page*/

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 20s linear alternate infinite;
    stroke-width:4;
    stroke-dasharray: 100;
    stroke: #000;
    }

@keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.otherfont > *{
    font-family: CirrusCumulus !important;
 }

.otherfont  > .col-audio {
    z-index: 999;
    margin: 10% 0%;
}

.otherfont  .FeaturedArtist p a {
    text-decoration: none !important;
    -webkit-animation: none !important;
    animation: none !important;

}

.otherfont > .col3 video {
    margin: 5% 0%;
    border-radius: 2rem 0rem 2rem 2rem;
 }

.drag {
    position: absolute;
}
.verbindunggif {
    max-width: 200px;
    margin: 2%;
    border-radius: 6rem;
}
.dragvisuals {
    width: 100%; 
}
.dragvisuals img:nth-of-type(1n), img:nth-of-type(4n) {
    margin-left: 20%;
}
.dragvisuals img:nth-of-type(2n),  img:nth-of-type(3n) {
     margin-left:  50%;
}

img.verbindunggif::after {
content: 'drag me';
}

/*small devices CSS*/


@media screen and (min-width:10px) and (max-width: 670px) { 
body{
    height: 100%;
}
.col2 {
	width: 100%;
	}
.col3 {
    width: 100%
    }
.col4 {
    width: 100%
    }
.col5 {
	width: 100%;
	padding: 4rem 0rem 1rem 0rem ;
	}
.col6 {
    width: 100%;
    }
.col8 {
    width: 100%
    }
main{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	overflow: scroll;
	padding: 0rem 1rem 1rem 1rem;
	z-index: 2;
    }
.tilebottom{
    z-index: 3;
    display: none;
    }
nav .back {
    font-size: 0.6rem;
    margin-bottom: 1rem; 
}
nav .footerLinks{
    display: initial;
}
button.title, a.title  {
    font-size: 0.8rem;
    text-align: center;
    margin: auto;
    display: inherit;
}
.FeaturedArtist{
    height: auto;
    margin: 0rem 0rem 4rem 0rem;
    }   
.WORGanize{
    height: auto;
    margin: 8rem 0rem 0rem 0rem;
}
.PermanentExihibit img{
    margin-top: 4rem;
}
.PermanentExihibit p:hover{
    transform: skew(0deg);
    letter-spacing: 0rem;
}
.RECon{
    margin: 5rem 0rem 1rem 0rem;
}
.FemTech{
    margin: 5rem 0rem 15rem 0rem;
    transform: skewY(20deg);
}
.FemTech-X{
    margin: 5rem 0rem 0rem 0rem;
    transform: skewY(20deg);
}
.FemTech p {
    margin: 5rem 0rem 5rem 0rem;
    transform: skew(0deg);
    text-align: center;
}
.FemTech a {
    color: #F00;
    margin: 0rem 0rem 0rem 5rem;
    font-size: 1rem;
}
.AudioCollectif p{
    margin: 5rem 1rem 2rem 1rem;
    transform: skewY(20deg);
    color: #F00;
    font-size: 1.6rem;
}
.FemTech-Video{
    padding: 0rem 0rem 0rem 0rem;
    width: 100%;
}
.Extract{
  padding: 5rem 0rem 0rem 0rem; 
  width: 100%;
}
.Extract .radio{
  padding: 0rem 0rem 0rem 0rem !important; 
}
.radio audio.inactive{
    display: none;
}
.Extract .title {
  padding: 5rem 0rem 0rem 0rem; 
}
.LandBKIntro {
   padding: 0.5rem 0rem 0rem 0rem;    
}
.LandBK {
   padding: 5rem 0rem 0rem 0rem;    
}
.sitemap-allcategories {
    margin: 5rem 0rem 0rem 0rem; 
}
footer{
    position: relative;
    bottom: 0px;
    padding: 1rem;
    width: 100%;
    z-index: 3;
}

.about p {
    padding: 1rem 2rem 1rem 2rem; 
    }
.otherfont > .col3 video {
    margin: 0% 0%;
 }
 .colAudioSkew { 
    transform: skewY(10deg);
    margin: 10rem 0rem 0rem 0rem !important;
}

}


@media screen and (min-width:10px) and (max-width: 670px) and (orientation: landscape) { 
main{
    padding: 3rem 1rem 3rem 1rem;
    } 
.col2 {
    width: 100%;
    }
.col3 {
    width: 100%
}
.col4 {
    width: 100%;
    }
.col5 {
    width: 100%;
    }
.col6 {
    width: 100%;
    }
.col8 {
    width: 100%
    }
.RECon{
    margin: 0rem 0rem 1rem 0rem;
    }
.PermanentExihibit img{
    margin-top: 4rem;
}
.FeaturedArtist{
    height: auto;
    padding: 0rem;
    margin: 0rem 0rem 4rem 0rem;
    }   
.WORGanize{
    height: auto;
    padding: 0rem;
    margin: 12rem 0rem 0rem 0rem;
    }
.FemTech{
    margin: 5rem 0rem 5rem 0rem;
    transform: skewY(20deg);
}
.FemTech p{
    margin: 6rem 0rem 6rem 0rem;
    transform: skew(0deg);
    text-align: center;
    }
.FemTech a{
    color: #F00;
    margin: 0rem 0rem 0rem 5rem;
    font-size: 1rem;
    }
.AudioCollectif p{
    margin: 5rem 1rem 2rem 1rem;
    transform: skewY(20deg);
    color: #F00;
    font-size: 1.6rem;
}
.sitemap-allcategories {
    margin: 5rem 0rem 0rem 0rem; 
}

.otherfont > .col3 video {
    margin: 0% 0%;
 }
 
}
/* media query for flow responsive */
@media screen and (min-width:10px) and (max-width: 1400px) { 
.flow {
    height: auto;
    }
}
@media screen and (min-width:1400px) {
.about {
    bottom: 0;
    }
}