html {
scroll-behavior: smooth;
}
html, body {margin : 0px; padding: 0px; height: 100%; width: 100%; text-align: center;background-color: #d0d0d0;}
section {min-height : 102%; width : 100%; background-color: #d0d0d0;}
a{text-decoration: none;}
li{list-style-type: none;}
@font-face{
font-family: GeosansLight;
src: url('../fonts/GeosansLight.ttf');
}
h1, h2, a {font-family: GeosansLight; color: #858585; font-weight: 500;}
h1 {font-size: 52pt;}
h3 {font-size: 76.611pt; transition: .3s;}
h4 {font-size: 42.574pt; transition: .3s;}
p {font-size: 35pt;}
h4, p {font-family: 'myriad-pro';}
hr {height: 2px;background: #ffffff;border: 0px; margin: -15px 0px 0px 0px;}
#logo, header nav ul li a {transition: all 300ms; -webkit-transition: all 300ms;-moz-transition: all 300ms;-o-transition: all 300ms;}
/*_____________________________________________GENERAL:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px){
section {min-height : 100lvh; width : 100vw; background-color: #d0d0d0; left: 0;}
.startLine {margin: 0;}
}
@media (min-width: 601px){
section {min-height : 102%; width : 100%; background-color: #d0d0d0; left: 0;}
}
@media (min-width: 768px){
section {min-height : 102%; width : 100%; background-color: #d0d0d0; left: 0;}
}
@media (min-width: 992px){
section {min-height : 102%; width : 100%; background-color: #d0d0d0; left: 0;}
}
/*____________________________________________________HEADER___*/
header{
width: 100%;
height: 130px;
background-color: #e3e3e3;
opacity: .93;
position: fixed;
top: 0px;
left: 0px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
z-index: 100;
}
#logoAndNames{
width: 550px;
height: 100%;
float: left;
}
#logoAndNames div{
float: left;
}
header logoAndNames{
height: 100%;
}
#logo{
width: 23%;
height: 100%;
margin: 0px;
float:left;
opacity: .4;
}
#logo img{
width:100%;
}
#logo:hover{
opacity: 1;
}
#logoAndNames names{
height: 100%;
}
#skills{
font-size: 29pt;
}
#logoAndNames #names h1{
margin:0px;
}
header #mainNav{
float: right;
margin: 20px 3% 0px 0px;
}
header #mainNav ul li{
float: left;
margin-right: 40px;
}
header #mainNav ul li a{
font-size: 37pt;
}
#navMenuButton{
transition: 1s;
float: right;
width: 100px;
height: 100px;
margin: 15px -500px 0px 0px;
}
header #navMenu{
position: absolute;
width: 100%;
z-index: 99;
}
header #navMenu ul li{
text-align: right;
float: left;
margin: 0px 1em 20px 0px;
}
header #navMenu nav ul li a{
font-size: 17pt;
}
#navMenuList{
background-color: #fff;
display: flex;
flex-flow: column;
margin: 0px 0px 0px 0px;
}
header .headerLines{
width: 100%;
background: #000000;
margin-top: -10px;
}
.position{
transition: .5s;
width: 0%;
height: 0px;
background: #000000;
margin-top: 2px;
opacity: 0;
}
.active{
transition: .5s;
width: 100%;
height: 1px;
background: #000000;
margin-top: 2px;
opacity: 1.0;
}
.menuOff{
transition: .5s;
opacity: 0;
top: -100vh;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 130px;
}
/*_____________________________________________HEADER:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
header{
width: 100%;
height: 12vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 24%;
height: 100%;
margin: 2% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 76%;
margin-top: 1.5%;
}
#myName{
font-size: 8.4vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 8.4vw;
font-weight: 500;
}
#skills{
font-size: 4.8vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 4.8vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 18%;
height: 18vw;
margin: 1.5% 2% 0px 0px;
}
#names .headerLines{
margin-top: -2%;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 12vh;
}
}
@media (max-height: 600px) and (orientation: landscape){
header{
width: 100%;
height: 12vh;
}
#logoAndNames{
width: 74%;
}
#logoAndNames #logo{
width: 8%;
height: 100%;
margin: -.5% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 30%;
margin-top: -1%;
}
#myName{
font-size: 3.6vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 3.6vw;
font-weight: 500;
}
#skills{
font-size: 1.8vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 1.8vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 5%;
height: 5vw;
margin: .25% 1% 0px 0px;
}
#names .headerLines{
margin-top: -2%;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 12vh;
}
}
@media (min-width: 601px) and (orientation: portrait){
header{
width: 100vw;
height: 12vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 24%;
height: 100%;
margin: -1% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 70%;
margin-top: 1.5%;
}
#myName{
font-size: 8.4vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 8.4vw;
font-weight: 500;
}
#skills{
font-size: 4.8vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 4.8vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 100px;
height: 100px;
margin: .5% 2% 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 12vh;
}
}
@media (min-height: 601px) and (orientation: landscape){
header{
width: 100vw;
height: 12vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 12%;
height: 100%;
margin: -.5% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 37%;
margin-top: 0%;
}
#myName{
font-size: 4.6vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 4.6vw;
font-weight: 500;
}
#skills{
font-size: 2.6vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 2.6vw;
font-weight: 500;
}
#names .headerLines{
margin-top: -2.5%;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 8.5vw;
height: 8.5vw;
margin: 0 1% 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 12vh;
}
}
@media (min-width: 768px) and (orientation: portrait){
header{
width: 100vw;
height: 10vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 11vh;
height: 100%;
margin: -1% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 56%;
margin-top: 0.5%;
}
#myName{
font-size: 7vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 7vw;
font-weight: 500;
}
#skills{
font-size: 3.9vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 3.9vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 8vh;
height: 8vh;
margin: 1vh 1.5vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 10vh;
}
}
@media (min-height: 768px) and (orientation: landscape){
header{
width: 100vw;
height: 10vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 11vh;
height: 100%;
margin: -.75% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 32%;
margin-top: 0%;
}
#myName{
font-size: 3.9vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 3.9vw;
font-weight: 500;
}
#skills{
font-size: 2.2vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 2.2vw;
font-weight: 500;
}
#names .headerLines{
margin-top: -2.5%;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 7vw;
height: 7vw;
margin: .25vh 1vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 10vh;
}
}
@media (min-width: 992px) and (orientation: portrait){
header{
width: 100vw;
height: 8vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 9vh;
height: 100%;
margin: -1% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 44%;
margin-top: 0.5%;
}
#myName{
font-size: 5.4vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 5.4vw;
font-weight: 500;
}
#skills{
font-size: 3vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 3vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 7vh;
height: 7vh;
margin: .5vh .5vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 8vh;
}
}
@media (min-height: 992px) and (orientation: landscape){
header{
width: 100vw;
height: 10vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 11vh;
height: 100%;
margin: -.75% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 32%;
margin-top: 0%;
}
#myName{
font-size: 3.9vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 3.9vw;
font-weight: 500;
}
#skills{
font-size: 2.2vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 2.2vw;
font-weight: 500;
}
#names .headerLines{
margin-top: -2.5%;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 7vw;
height: 7vw;
margin: .25vh 1vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 10vh;
}
}
@media (min-height: 1300px) and (orientation: portrait){
header{
width: 100vw;
height: 8vh;
}
header #logoAndNames{
width: 75%;
height: 100%;
}
#logoAndNames #logo{
width: 9vh;
height: 100%;
margin: -1% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 37%;
margin-top: 0%;
}
#myName{
font-size: 4.4vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 4.4vw;
font-weight: bold;
}
#skills{
font-size: 2.5vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 2.5vw;
font-weight: bold;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 7vh;
height: 7vh;
margin: .5vh 2vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 8vh;
}
}
@media (min-width: 1300px) and (orientation: landscape){
header{
width: 100vw;
height: 80px;
}
#logoAndNames{
width: 350px;
height: 100%;
float: left;
}
#logoAndNames #logo{
width: 23%;
height: 100%;
margin: 0px;
float:left;
}
#logo img{
width:100%;
}
#logo:hover{
opacity: 1;
}
#logoAndNames #names{
width: 77%;
height: 100%;
}
#myName{
font-size: 33pt;
font-weight: 500;
}
#myName:hover{
font-size: 33pt;
font-weight: 500;
color: #000000;
}
#skills{
font-size: 19pt;
font-weight: 500;
}
#skills:hover{
font-size: 19pt;
font-weight: 500;
color: #000000;
}
header #mainNav{
position: relative;
float: right;
height: 100%;
margin: auto 3% auto 0px;
}
header #mainNav ul{
position: relative;
height: 80%;
margin: 2.5% 0 2.5% 0;
}
#navMenuButton{
transition: 1s;
float: right;
width: 100px;
height: 100px;
margin: 15px -500px 0px 0px;
}
header #mainNav ul li a{
font-size: 25pt;
}
header #mainNav ul li a:hover, #myName:hover, #skills:hover{
font-weight: 500;
color: #000000;
}
}
@media (min-height: 1650px) and (orientation: portrait){
header{
width: 100vw;
height: 8vh;
}
#logoAndNames{
width: 75%;
}
#logoAndNames #logo{
width: 9vh;
height: 100%;
margin: -1% 0px 0px 0px;
float:left;
}
#logoAndNames #names{
width: 44%;
margin-top: 0.5%;
}
#myName{
font-size: 4.4vw;
font-weight: 500;
}
#myName:hover{
color: #000000;
font-size: 5.4vw;
font-weight: 500;
}
#skills{
font-size: 3vw;
font-weight: 500;
}
#skills:hover{
color: #000000;
font-size: 3vw;
font-weight: 500;
}
header #mainNav{
position: absolute;
float:left;
margin-left: 100%;
}
#navMenuButton{
transition: 1s;
float: right;
width: 7vh;
height: 7vh;
margin: .5vh .5vh 0 0;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 8vh;
}
}
@media (min-width: 1650px) and (orientation: landscape){
header{
width: 100%;
height: 130px;
background-color: #e3e3e3;
opacity: .93;
position: fixed;
top: 0px;
left: 0px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
z-index: 100;
}
#logoAndNames{
width: 550px;
height: 100%;
float: left;
}
#logoAndNames div{
float: left;
}
header logoAndNames{
height: 100%;
}
#logoAndNames #logo{
width: 23%;
height: 100%;
margin: 0px;
float:left;
}
#logo img{
width:100%;
}
#logo:hover{
opacity: 1;
}
#logoAndNames #names{
width: 77%;
height: 100%;
}
#myName{
font-size: 52pt;
font-weight: 500;
}
#myName:hover{
font-size: 52pt;
font-weight: bold;
}
#skills{
font-size: 29pt;
font-weight: 500;
}
#skills:hover{
font-size: 29pt;
font-weight: bold;
}
#logoAndNames #names h1{
margin:0px;
}
header #mainNav ul li{
float: left;
margin-right: 40px;
}
header #mainNav ul li a{
font-size: 37pt;
}
#navMenuButton{
transition: 1s;
float: right;
width: 100px;
height: 100px;
margin: 15px -500px 0px 0px;
}
header #navMenu{
position: absolute;
width: 100%;
z-index: 99;
}
header #navMenu ul li{
text-align: right;
float: left;
margin: 0px 1em 20px 0px;
}
header #navMenu nav ul li a{
font-size: 17pt;
}
#navMenuList{
background-color: #fff;
display: flex;
flex-flow: column;
margin: 0px 0px 0px 0px;
}
header .headerLines{
width: 100%;
background: #000000;
margin-top: -10px;
}
.position{
transition: .5s;
width: 0%;
height: 0px;
background: #000000;
margin-top: 2px;
opacity: 0;
}
.active{
transition: .5s;
width: 100%;
height: 1px;
background: #000000;
margin-top: 2px;
opacity: 1.0;
}
.menuOff{
transition: .5s;
opacity: 0;
top: -100vh;
}
.menuOn{
transition: .5s;
opacity: 1;
top: 130px;
}
header #mainNav{
position: relative;
float: right;
margin: 10px 3% 0px 0px;
}
#navMenuButton{
transition: 1s;
float: right;
width: 100px;
height: 100px;
margin: 15px -500px 0px 0px;
}
header #mainNav ul li a:hover, #myName:hover, #skills:hover{
font-weight: bold;
color: #858585;
}
}
/*____________________________________________________HOME___*/
#home a{
display: inline-block;
position: relative;
z-index: 2;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 85pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 55pt;
}
.startLine{
height: 0lvh;
background: #000000;
}
#home #homeTitle{
margin: 40em auto 0 auto;
}
#specifics{
font-family: GeosansLight;
font-weight: 500;
}
#homeTitle h3, h4{
font-weight: 500;
margin: 0px;
}
#home #homeVideo{
position: fixed;
float: left;
top: 50lvh;
left: 50vw;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100lvh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
/*_____________________________________________HOME:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
#home{
width: 100vw;
height: 100lvh;
margin: 0;
}
#home #homeTitle{
margin: 45vh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50lvh;
left: 50vw;
transform: translateY(-50lvh) translateX(-50vw);
min-width: 100vw;
min-height: 100lvh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (max-height: 600px) and (orientation: landscape){
#home{
width: 100vw;
height: 108lvh;
margin: 0;
}
#home #homeTitle{
margin: 45vh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50lvh;
left: 50vw;
transform: translateY(-50lvh) translateX(-50vw);
min-width: 100vw;
min-height: 100lvh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-width: 601px) and (orientation: portrait){
#home{
width: 100%;
height: 106lvh;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-height: 601px) and (orientation: landscape){
#home{
width: 100%;
height: 106lvh;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-width: 768px) and (orientation: portrait){
#home{
width: 100%;
height: 102%;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 48pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 30pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 54pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 35pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-height: 768px) and (orientation: landscape){
#home{
width: 100%;
height: 106lvh;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-width: 992px) and (orientation: portrait){
#home{
width: 100%;
height: 102%;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 40pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 21pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 46pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 30pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-height: 992px) and (orientation: landscape){
#home{
width: 100%;
height: 106lvh;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-height: 1300px) and (orientation: portrait){
#home{
width: 100%;
height: 102%;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 40pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 21pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 46pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 30pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-width: 1300px) and (orientation: landscape){
#home{
width: 100%;
height: 106lvh;
}
#home #homeTitle{
margin: 50lvh auto 0 auto;
}
#homeTitle h3{
font-size: 38pt;
margin-bottom: 10px;
}
#homeTitle h4{
font-size: 20pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 44pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 25pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-height: 1650px) and (orientation: portrait){
#home{
width: 100%;
height: 102%;
}
#home #homeTitle{
margin: 40em auto 0 auto;
}
#homeTitle h3{
font-size: 76.611pt;
}
#homeTitle h4{
font-size: 42.574pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 85pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 55pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
@media (min-width: 1650px) and (orientation: landscape){
#home{
width: 100%;
height: 102%;
}
#home #homeTitle{
margin: 40em auto 0 auto;
}
#homeTitle h3{
font-size: 76.611pt;
}
#homeTitle h4{
font-size: 42.574pt;
}
#home a:hover h3{
transition: .5s;
color: #fff;
font-size: 85pt;
}
#home a:hover h4{
transition: .5s;
color: #fff;
font-size: 55pt;
}
#homeVideo{
position: fixed;
float: left;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
min-width: 100vw;
min-height: 100vh;
width: auto;
height: auto;
overflow: hidden;
z-index: 1;
}
}
/*____________________________________________________ABOUT___*/
#about{
position: relative;
z-index: 2;
}
#about p{
text-align: left;
color: #858585;
margin: 1em 0px;
}
#about h3{
font-family: GeosansLight;
color: #858585;
font-weight: 500;
text-align: left;
margin: 0px;
}
#aboutContainer{
width: 100%;
margin: 20em auto 0 auto;
display: flex;
justify-content: center;
}
#aboutContainer #avatar{
width: 40%;
margin-top:-5%;
margin-right: 2em;
}
#avatar img{
position: relative;
width: 100%;
}
#portraitOrange{
z-index: 75;
margin-top: -100%;
}
#portraitRed{
z-index: 74;
opacity: .32;
}
#aboutContainer #aboutText{
width: 32%;
margin-left: 2em;
}
/*_____________________________________________ABOUT:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
#about{
width: 100%;
}
#about p{
font-size: 5vw;
margin: 0;
margin-top: 20px;
}
#about h3{
font-size: 7vw;
margin-bottom: 5px;
}
#aboutContainer hr{
margin-top: -5px;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 28%;
}
#aboutContainer #avatar{
width: 100%;
margin: 0 auto 0 auto;
margin-left: -10vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
}
@media (max-height: 600px) and (orientation: landscape){
#about{
width: 100%;
}
#about p{
font-size: 2.5vw;
margin: 0;
margin-top: 20px;
}
#about h3{
font-size: 4vw;
margin-bottom: 5px;
}
#aboutContainer hr{
margin-top: -5px;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 12.5%;
}
#aboutContainer #avatar{
width: 30%;
margin: 0 0 0 0;
margin-left: 0vw;
}
#aboutContainer #aboutText{
width: 45%;
margin: 0 0 0 0;
margin-left: 5%;
}
}
@media (min-width: 601px) and (orientation: portrait){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 30%;
}
#aboutContainer #avatar{
width: 70%;
margin: 0 auto 0 auto;
margin-left: 10vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
#about h3{
font-size: 7vw;
margin-bottom: 5px;
}
#about p{
font-size: 3vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-height: 601px) and (orientation: landscape){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 20%;
}
#aboutContainer #avatar{
width: 40%;
margin: 0 auto 0 auto;
}
#aboutContainer #aboutText{
width: 40%;
margin: auto;
margin-top: 12lvh;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-width: 768px) and (orientation: portrait){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 18lvh;
}
#aboutContainer #avatar{
width: 70%;
margin: 0 auto 0 auto;
margin-left: 10vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
#about h3{
font-size: 7vw;
margin-bottom: 5px;
}
#about p{
font-size: 3vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-height: 768px) and (orientation: landscape){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 20%;
}
#aboutContainer #avatar{
width: 40%;
margin: 0 auto 0 auto;
}
#aboutContainer #aboutText{
width: 40%;
margin: auto;
margin-top: 12lvh;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-width: 992px) and (orientation: portrait){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 18lvh;
}
#aboutContainer #avatar{
width: 60%;
margin: 0 auto 0 auto;
margin-left: 15vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2.32vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-height: 992px) and (orientation: landscape){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 16%;
}
#aboutContainer #avatar{
width: 40%;
margin: 0 auto 0 auto;
}
#aboutContainer #aboutText{
width: 40%;
margin: 0 12vw 0 0;
margin-top: 12lvh;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-height: 1300px) and (orientation: portrait){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 18lvh;
}
#aboutContainer #avatar{
width: 60%;
margin: 0 auto 0 auto;
margin-left: 15vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2.32vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-width: 1300px) and (orientation: landscape){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 20svh;
}
#aboutContainer #avatar{
width: 40%;
margin: 0 auto 0 auto;
}
#aboutContainer #aboutText{
width: 37%;
margin: 0 12vw 0 0;
margin-top: 12vh;
}
#about h3{
font-size: 3vw;
margin-bottom: 5px;
}
#about p{
font-size: 1.5vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-height: 1650px) and (orientation: portrait){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: block;
margin-top: 18lvh;
}
#aboutContainer #avatar{
width: 60%;
margin: 0 auto 0 auto;
margin-left: 15vw;
}
#aboutContainer #aboutText{
width: 80%;
margin: 0 auto 0 auto;
}
#about h3{
font-size: 5vw;
margin-bottom: 5px;
}
#about p{
font-size: 2.32vw;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
@media (min-width: 1650px) and (orientation: landscape){
#about{
width: 100%;
}
#aboutContainer{
width: 100%;
display: flex;
justify-content: center;
margin-top: 25svh;
}
#aboutContainer #avatar{
width: 30%;
margin: 0 auto 0 auto;
}
#aboutContainer #aboutText{
width: 32%;
margin: 0 18vw 0 0;
margin-top: 12vh;
}
#about h3{
font-size: 4vh;
margin-bottom: 5px;
}
#about p{
font-size: 2.5vh;
margin: 0px;
margin-top: 20px;
}
#aboutContainer hr{
margin-top: -5px;
}
}
/*____________________________________________________PROJECTS___*/
#projects{
position: relative;
min-height: 0;
z-index: 2;
padding-bottom: 10em;
}
#projectsHeadline{
font-family: GeosansLight;
color: #858585;
font-weight: 500;
}
#projectsContainer{
width: 48%;
margin: 10em auto 0px auto;
}
#projectsSelection {
margin-top: 4em;
width: 100%;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: .75vw;
column-gap: .01vw;
}
#projectsContainer li{
/*flex-grow: 1;*/
width: 23.5vw;
height: 23.5vw;
}
#projectsSelection li img{
width: 100%;
height: 100%;
filter: brightness(26%);
object-fit: cover;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-400%);
-moz-transform: translate(-50%,-400%); -ms-transform: translate(-50%,-400%); -o-transform: translate(-50%,-400%); -webkit-transform: translate(-50%,-400%);
}
#projectsSelection .thumbTitle h3{
text-align: center;
font-weight: 500;
margin: 0px;
}
#projectsSelection .thumbTitle h4{
text-align: center;
margin: 0px;
font-family: GeosansLight;
font-weight: 500;
}
#projectsSelection a{
display: block;
color: #858585;
width: 100%;
height: 100%;
}
#projectsSelection a:hover{
color: #ffffff;
}
/*_____________________________________________PROJECTS:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 7vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 100%;
height: 80vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-370%);
-moz-transform: translate(-50%,-370%); -ms-transform: translate(-50%,-370%); -o-transform: translate(-50%,-370%); -webkit-transform: translate(-50%,-370%);
}
#projectsSelection ul li a #pr07Custom{
transform: translate(-50%,-440%);
-moz-transform: translate(-50%,-440%); -ms-transform: translate(-50%,-440%); -o-transform: translate(-50%,-440%); -webkit-transform: translate(-50%,-440%);
}
#projectsSelection ul li a #pr08Custom{
transform: translate(-50%,-440%);
-moz-transform: translate(-50%,-440%); -ms-transform: translate(-50%,-440%); -o-transform: translate(-50%,-440%); -webkit-transform: translate(-50%,-440%);
}
#projectsSelection .thumbTitle h3{
font-size: 14vw;
}
#projectsSelection .thumbTitle h4{
font-size: 8vw;
}
#projectsSelection #pr07ThumbTitle{
font-size: 10vw;
}
#projectsSelection #pr08ThumbTitle{
font-size: 10vw;
}
}
@media (max-height: 600px) and (orientation: landscape){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 4vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-width: 601px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 7vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 100%;
height: 80vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-370%);
-moz-transform: translate(-50%,-370%); -ms-transform: translate(-50%,-370%); -o-transform: translate(-50%,-370%); -webkit-transform: translate(-50%,-370%);
}
#projectsSelection .thumbTitle h3{
font-size: 14vw;
}
#projectsSelection .thumbTitle h4{
font-size: 8vw;
}
#pr07ThumbTitle{
font-size: 14vw;
}
#pr08ThumbTitle{
font-size: 14vw;
}
}
@media (min-height: 601px) and (orientation: landscape){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-width: 768px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 7vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-height: 768px) and (orientation: landscape){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 24vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-width: 992px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 16vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-height: 992px) and (orientation: landscape){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 17vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-height: 1300px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 16vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#projectsSelection .thumbTitle hr{
height: 1px;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-width: 1300px) and (orientation: landscape){
#projectsContainer{
width: 60%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: .75vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 3vw;
text-align: left;
margin-top: 17vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 30vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-600%);
-moz-transform: translate(-50%,-600%); -ms-transform: translate(-50%,-600%); -o-transform: translate(-50%,-600%); -webkit-transform: translate(-50%,-600%);
}
#projectsSelection .thumbTitle h3{
font-size: 3vw;
}
#projectsSelection .thumbTitle h4{
font-size: 1.8vw;
}
#projectsSelection .thumbTitle hr{
height: 1px;
}
#pr07ThumbTitle{
font-size: 3vw;
}
#pr08ThumbTitle{
font-size: 3vw;
}
}
@media (min-height: 1650px) and (orientation: portrait){
#projectsContainer{
width: 80%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: 1vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 5vw;
text-align: left;
margin-top: 16vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 40vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-470%);
-moz-transform: translate(-50%,-470%); -ms-transform: translate(-50%,-470%); -o-transform: translate(-50%,-470%); -webkit-transform: translate(-50%,-500%);
}
#projectsSelection .thumbTitle h3{
font-size: 5vw;
}
#projectsSelection .thumbTitle h4{
font-size: 3vw;
}
#pr07ThumbTitle{
font-size: 5vw;
}
#pr08ThumbTitle{
font-size: 5vw;
}
}
@media (min-width: 1650px) and (orientation: landscape){
#projectsContainer{
width: 60%;
margin: 0 auto 0 auto;
}
#projectsContainer hr{
margin-top: -5px;
}
#projectsSelection ul{
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
align-content: space-between;
justify-content: space-between;
row-gap: .75vw;
column-gap: .01vw;
}
#projectsHeadline{
font-size: 4vh;
text-align: left;
margin-top: 17vh;
margin-bottom: 5px;
}
#projectsSelection{
margin-top: 25px;
}
#projectsSelection ul li{
width: 49.5%;
height: 30vw;
}
#projectsSelection ul li a .thumbTitle{
width: fit-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-615%);
-moz-transform: translate(-50%,-615%); -ms-transform: translate(-50%,-615%); -o-transform: translate(-50%,-615%); -webkit-transform: translate(-50%,-615%);
}
#projectsSelection .thumbTitle h3{
font-size: 3vw;
}
#projectsSelection .thumbTitle h4{
font-size: 1.75vw;
}
#pr07ThumbTitle{
font-size: 3vw;
}
#pr08ThumbTitle{
font-size: 3vw;
}
}
/*____________________________________________________CONTACT___*/
#contact{
position: relative;
z-index: 2;
}
#mailAndSocial{
width: 100%;
height: 100%;
margin: 25em auto 10em auto;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: center;
}
#mailAndSocial #mailContact{
width: 50%;
height: 100%;
text-align: right;
float: right;
/*flex-grow: 1;*/
}
#mailAndSocial #socialContact{
width: 50%;
height: 100%;
text-align: left;
float: left;
/*flex-grow: 1;*/
}
#mailContent, #socialContent{
margin-right: 1%;
margin-left: 1%;
}
#mailAndSocial h3{
font-family: GeosansLight;
color: #858585;
font-weight: 500;
margin: 0px;
}
#mailContact, #socialContact{
transition: .3s;
background-color: #d0d0d0;
}
#mailContact:hover, #socialContact:hover{
transition: .3s;
background-color: #000000;
}
#mailContact hr{
float:right;
}
.contactLine{
width: 60%;
}
form input{
width: 60%;
margin: 2em 0 0 0;
border: 0;
padding: 0;
}
textarea{
width: 60%;
height: 5vw;
min-height: 7em;
margin: 2em 0 0 0;
resize: vertical;
border: 0;
padding: 0;
}
#messageBox{
position: relative;
}
#messageBox .button{
width: 5em;
margin: 0px;
position: absolute;
right: 10px;
bottom: 12px;
}
#socialContact ul{
padding: 0px;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 30px;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 80px;
height: 80px;
}
/*_____________________________________________CONTACT:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
#mailAndSocial{
width: 80%;
height: 100%;
margin: 14vh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 7vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContent{
margin: 0 0 5vh 0;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 7vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 40px;
height: 40px;
}
}
@media (max-height: 600px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 4vw;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top:24vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 4vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 40px;
height: 40px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
@media (min-width: 601px) and (orientation: portrait){
#mailAndSocial{
width: 80%;
height: 100%;
margin: 24vh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 7vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContent{
margin: 0 0 5vh 0;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 7vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
margin-top: 8px;
width: 40px;
height: 40px;
}
}
@media (min-height: 601px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 5vw;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top:30vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 4vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 40px;
height: 40px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
@media (min-width: 768px) and (orientation: portrait){
#mailAndSocial{
width: 80%;
height: 100%;
margin: 24vh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 7vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 30%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
margin-bottom: 2.4lvh;
}
#mailContent{
margin: 0 0 5vh 0;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 7vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
margin-top: 10px;
width: 50px;
height: 50px;
}
}
@media (min-height: 768px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 5vw;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top:30vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 4vw;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 50px;
height: 50px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
@media (min-width: 992px) and (orientation: portrait){
#mailAndSocial{
width: 100%;
height: 100lvh;
margin: -1lvh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 7vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 49.5lvh;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 52lvh;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
margin-bottom: 2.4lvh;
}
#mailContent{
position: relative;
width: 80vw;
height: 50vh;
top: 25lvh;
margin: 0 auto 0 auto;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContent{
width: 80vw;
height: 50vh;
margin: 0 auto 0 auto;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 5vw;
margin-top: 6px;
}
#socialContact img{
position: relative;
margin-right: 2%;
margin-top: 10px;
width: 60px;
height: 60px;
}
}
@media (min-height: 992px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 5vw;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top:30vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 15px;
}
#socialContact h4{
font-size: 4vw;
margin-top: -6px;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 60px;
height: 60px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
@media (min-height: 1300px) and (orientation: portrait){
#mailAndSocial{
width: 100%;
height: 100lvh;
margin: -1lvh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 5vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 49.5lvh;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 52lvh;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
margin-bottom: 2.4lvh;
}
#mailContent{
position: relative;
width: 80vw;
height: 50vh;
top: 25lvh;
margin: 0 auto 0 auto;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContent{
width: 80vw;
height: 50vh;
margin: 0 auto 0 auto;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 5vw;
margin-top: 6px;
}
#socialContact img{
position: relative;
margin-right: 2%;
margin-top: 10px;
width: 60px;
height: 60px;
}
}
@media (min-width: 1300px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 3vw;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top:30vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 15px;
}
#socialContact h4{
font-size: 3vw;
margin-top: -3px;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 50px;
height: 50px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
@media (min-height: 1650px) and (orientation: portrait){
#mailAndSocial{
width: 100%;
height: 100lvh;
margin: -1lvh auto 0 auto;
display: block;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 5vw;
}
#mailAndSocial #mailContact{
width: 100%;
height: 49.5lvh;
text-align: left;
float: left;
}
#mailAndSocial #socialContact{
width: 100%;
height: 52lvh;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
margin-bottom: 2.4lvh;
}
#mailContent{
position: relative;
width: 80vw;
height: 50vh;
top: 25lvh;
margin: 0 auto 0 auto;
}
form input{
width: 100%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#socialContent{
width: 80vw;
height: 50vh;
margin: 0 auto 0 auto;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#socialContact h4{
font-size: 5vw;
margin-top: 6px;
}
#socialContact img{
position: relative;
margin-right: 2%;
margin-top: 10px;
width: 60px;
height: 60px;
}
}
@media (min-width: 1650px) and (orientation: landscape){
#mailAndSocial{
width: 100%;
height: 104vh;
margin: 0 auto 0 auto;
display: flex;
justify-content: center;
}
#mailAndSocial hr{
width: 100%;
margin-top: 0px;
}
#socialContact ul{
margin-bottom: 10vh;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-bottom: 10px;
}
#mailAndSocial h3{
font-size: 4vh;
}
#mailAndSocial #mailContact{
width: 50%;
text-align: right;
float: left;
}
#mailAndSocial #socialContact{
width: 50%;
text-align: left;
float: left;
}
#mailContact hr{
float:left;
}
#mailContact #mailContent{
float: right;
width: 80%;
}
#mailContact, #socialContact{
height: 100lvh;
}
#mailContent, #socialContent{
margin-top: 45vh;
}
form input{
width: 98%;
font-size: 16px;
margin: 5px 0 0 0;
border: 0;
border-radius: 0;
padding: 0;
}
textarea{
width: 100%;
height: 5vw;
min-height: 7em;
font-size: 16px;
margin: 5px 0 0 0;
resize: vertical;
border: 0;
border-radius: 0;
padding: 0;
}
#mailContent form input, #mailContent #messageBox{
margin-right: 2%;
}
#mailContent, #socialContent{
margin-right: 0;
margin-left: 0;
}
#socialContact ul li a{
display: flex;
flex-flow: row;
margin-left: 2%;
margin-bottom: 15px;
}
#socialContact h4{
font-size: 1.5vw;
margin-top: -1px;
}
#socialContact img{
position: relative;
margin-right: 2%;
width: 50px;
height: 50px;
}
#socialMedia .contactLine{
width: 80%;
}
#socialContent h3{
margin-left: 2%;
}
#mailContent h3{
margin-right: 2%;
}
}
/*____________________________________________________IMPRESSUM___*/
#impressum{
z-index: 85;
width: 100vw;
height: 100vh;
position: fixed;
}
#impressumPage input{
float: right;
width: 1.5vw;
height: 1.5vw;
margin: 1vw 1vw 0 0;
}
#impressum #impressumPage{
text-align: left;
width: 70%;
height: 80%;
background-color: #fff;
margin: 6.5% auto 0px auto;
overflow: scroll;
overflow-x: hidden;
}
#impressumPage::-webkit-scrollbar {
display: none;
}
#impressumPage{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#impressum h3{
font-family: GeosansLight;
color: #000;
font-weight: 500;
margin: 0px;
}
#impressum #lawReference{
font-size: 20pt;
}
#impressum hr{
background: #858585;
}
.impressumContent{
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
.titles{
text-align: left;
font-family: GeosansLight;
font-weight: 500;
margin-left: 5%;
}
.texts {
text-align: left;
font-family: 'myriad-pro';
font-weight: 500;
margin:10px 0px 40px 5%;
font-size: 20pt;
}
.answers{
text-align: right;
font-family: 'myriad-pro';
font-weight: 500;
margin-right: 5%;
}
.off{
transition: 1s;
bottom: 150lvh;
opacity: 0;
}
.on{
transition: 1s;
bottom: 0lvh;
opacity: 1;
}
/*_____________________________________________IMPRESSUM:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
#impressum #impressumPage{
margin: 25lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (max-height: 600px) and (orientation: landscape){
#impressum #impressumPage{
margin: 25lvh auto 0px auto;
}
#impressum h3{
font-size: 5vw;
}
#impressum #lawReference{
font-size: 2vw;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vw;
}
.titles{
font-size: 2vw;
}
.answers{
font-size: 2vw;
}
.texts{
font-size: 2vw;
}
#impressumPage input{
width: 3vw;
height: 3vw;
margin: 1vw 1vw 0 0;
}
}
@media (min-width: 601px) and (orientation: portrait){
#impressum #impressumPage{
margin: 20lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (min-height: 601px) and (orientation: landscape){
#impressum #impressumPage{
margin: 20lvh auto 0px auto;
}
#impressum h3{
font-size: 5vw;
}
#impressum #lawReference{
font-size: 2vw;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vw;
}
.titles{
font-size: 2vw;
}
.answers{
font-size: 2vw;
}
.texts{
font-size: 2vw;
}
#impressumPage input{
width: 3vw;
height: 3vw;
margin: 1vw 1vw 0 0;
}
}
@media (min-width: 768px) and (orientation: portrait){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (min-height: 768px) and (orientation: landscape){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vw;
}
#impressum #lawReference{
font-size: 2vw;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vw;
}
.titles{
font-size: 2vw;
}
.answers{
font-size: 2vw;
}
.texts{
font-size: 2vw;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vw;
height: 3vw;
margin: 1vw 1vw 0 0;
}
}
@media (min-width: 992px) and (orientation: portrait){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (min-height: 992px) and (orientation: landscape){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vw;
}
#impressum #lawReference{
font-size: 2vw;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vw;
}
.titles{
font-size: 2vw;
}
.answers{
font-size: 2vw;
}
.texts{
font-size: 2vw;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vw;
height: 3vw;
margin: 1vw 1vw 0 0;
}
}
@media (min-height: 1300px) and (orientation: portrait){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (min-width: 1300px) and (orientation: landscape){
#impressum #impressumPage{
width: 79%;
margin: 15lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vh 1vh 0 0;
}
}
@media (min-height: 1650px) and (orientation: portrait){
#impressum #impressumPage{
width: 79%;
margin: 17lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 3vh;
height: 3vh;
margin: 1vw 1vw 0 0;
}
}
@media (min-width: 1650px) and (orientation: landscape){
#impressum #impressumPage{
width: 55%;
margin: 15lvh auto 0px auto;
}
#impressum h3{
font-size: 5vh;
}
#impressum #lawReference{
font-size: 2vh;
}
#impressum hr{
margin: 5px 0 0 0;
}
#impressumPage h4{
font-size: 4vh;
}
.titles{
font-size: 2vh;
}
.answers{
font-size: 2vh;
}
.texts{
font-size: 2vh;
margin:10px 5px 40px 15%;
}
#impressumPage input{
width: 2vh;
height: 2vh;
margin: 1vh 1vh 0 0;
}
}
/*____________________________________________________FOOTER___*/
footer{
width: 5vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 2vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
position: relative;
z-index: 85;
}
footer nav li img{
width: 100%;
height: 100%;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 2px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 2.5vw;
height: 2.5vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
filter: brightness(100%);
}
.sliderBig{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 250%;
margin-bottom: 250%;
filter: brightness(200%);
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
/*_____________________________________________FOOTER:_RESPONSIVE_BREAKPOINTS___*/
/*_____________600px, 601px, 768px, 992px; 1200px;_____________*/
@media (max-width: 600px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 7vw;
height: 7vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 10vw;
height: 10vw;
transition: .5s;
margin-top: 250%;
margin-bottom: 250%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (max-height: 600px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 2.5vw;
height: 2.5vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 3.5vw;
height: 3.5vw;
transition: .5s;
margin-top: 50%;
margin-bottom: 50%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-width: 601px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 6vw;
height: 6vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 9vw;
height: 9vw;
transition: .5s;
margin-top: 250%;
margin-bottom: 250%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-height: 601px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 7vw;
height: 7vw;
transition: .5s;
margin-top: 50%;
margin-bottom: 50%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-width: 768px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 6vw;
height: 6vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 9vw;
height: 9vw;
transition: .5s;
margin-top: 150%;
margin-bottom: 150%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-height: 768px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 7vw;
height: 7vw;
transition: .5s;
margin-top: 50%;
margin-bottom: 50%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-width: 992px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 6vw;
height: 6vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 9vw;
height: 9vw;
transition: .5s;
margin-top: 150%;
margin-bottom: 150%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-height: 992px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 7vw;
height: 7vw;
transition: .5s;
margin-top: 50%;
margin-bottom: 50%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-height: 1300px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 6vw;
height: 6vw;
transition: .5s;
margin-top: 110%;
margin-bottom: 110%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-width: 1300px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 3vw;
height: 3vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 5vw;
height: 5vw;
transition: .5s;
margin-top: 50%;
margin-bottom: 50%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-height: 1650px) and (orientation: portrait){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: 1.5vw;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 4vw;
height: 4vw;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 6vw;
height: 6vw;
transition: .5s;
margin-top: 60%;
margin-bottom: 60%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}
@media (min-width: 1650px) and (orientation: landscape){
footer{
width: 7vw;
height: 76lvh;
position: fixed;
float: left;
top: 12lvh;
left: -2vh;
z-index: 100;
}
footer nav{
position: relative;
height: 50lvh;
top: 13lvh;
}
footer nav ul{
height: 100%;
margin: 0;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
footer nav ul li{
text-align: center;
z-index: 85;
}
#slider #sliderLine{
position: absolute;
margin: auto 50% auto 50%;
width: 1px;
height: 95%;
top: 2.5%;
opacity: .8;
z-index: 80;
}
.sliderSmall{
width: 3vh;
height: 3vh;
transition: .5s;
margin-top: 0%;
margin-bottom: 0%;
}
.sliderBig{
width: 5vh;
height: 5vh;
transition: .5s;
margin-top: 70%;
margin-bottom: 70%;
}
#firstSliderPoint{
margin-top: 0px;
}
#lastSliderPoint{
margin-bottom: 0px;
}
}