@import url('https://fonts.googleapis.com/css?family=Raleway:100,400&display=swap');

body{
    margin: 0;
    font-family: 'Raleway', sans-serif;
}
header{
    display:flex;
    flex-direction: row;
    position: sticky; 
    top:0;
    align-items: center;
    justify-content: space-around;
    height: 10vh;
    border-bottom: 1px solid rgb(196, 196, 196);
    background-color: #fff;
    
}
header ul li{
    list-style-type: none;
    display: inline;
    padding: 1vw;
}
header a{
    font-size: 1.5vw;
    text-decoration: none;
    color: rgb(137, 137, 137);
    

}
header ul li a{
    text-decoration: none;
    color: #000;
    font-size: .8vw;
}
.page1{
    background-image: url("https://colorlib.com/shapely/wp-content/uploads/sites/12/2016/03/photo-1443527216320-7e744084f5a7-1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 90vh;
    display: flex;
    justify-content:center;
    flex-direction: column;
    align-items: center;
}
.page1 h1{
    font-size: 4vw;
    color: #fff;
    margin-bottom: 2vh;
}
.page1 p{
    color:#8c979e;
    font-size: 1.1vw;
}
button{
    width: 12vw;
    height: 6vh;
    font-size: .9vw;
}
.button-white{
    border: 2px solid #fff;
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
  
}
.button-white:hover{
    border: 2px solid #fff;
    background-color: #fff;
    color: #000;
}
.button-violet{
    border: 2px solid #745cf9;
    background-color: #745cf9;
    color: #fff;
}
.button-violet:hover{
    border: 2px solid rgba(115, 92, 249, 0.897);
    background-color: rgba(115, 92, 249, 0.877);
    color: #fff;
}

.pageSeo{
    width: 100vw;
    height: 75vh;
    display: flex;
    flex-direction: row;
    margin-bottom: 5vh;
    margin-top: 5vh;
}
.portofolio-page {
    width: 100vw;
    height: 75vh;
    display: flex;
    flex-direction: row;
    margin-top: 5vh;

}
.portofolio-page{
    background-color: rgb(230, 230, 230);
}
.pageSeo article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5vw;
}
.portofolio-page article  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5vw;

}

.pageSeo article:nth-of-type(1),
.portofolio-page article:nth-of-type(2){
    
    margin-left: 5vw;
}
.pageSeo article:nth-of-type(1) img ,
.portofolio-page article:nth-of-type(2) img{
    width: 45vw;
}
.pageSeo article:nth-of-type(2) h1 ,
.portofolio-page article:nth-of-type(1) h1
{
    font-size: 3vw;
    color: rgb(13,15,21);
    width: 40vw;
    margin-top: 0;
}
.pageSeo article:nth-of-type(2) p ,
.portofolio-page article:nth-of-type(1) p
{
    font-size: 1vw;
    color: rgb(167, 176, 182);
    margin-top: 0;
    margin-bottom: 6vh;

}
.smallParallax{
    background-image: url("https://colorlib.com/shapely/wp-content/uploads/sites/12/2016/12/photo-1452723312111-3a7d0db0e024.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 60vh;
    display:flex;
    justify-content: center;
    align-items:center;
    flex-direction:column;
}
.smallParallax h1
{
    font-size: 3vw;
    color: #fff;
    margin-bottom: 2vh;
}
.smallParallax p 
{
    color: rgba(255, 255, 255, 0.89);
    font-size: 1vw;
    margin: 0;
    
}
.smallParallax p:nth-of-type(2)
{
    margin-bottom: 2vh;
}    
.buttonvioletP {

    border: 2px solid #745cf9;
    background-color: #745cf9;
    color: #fff;
    margin-left: 10vw;
    margin-top:2vw; 
}   
.buttonvioletP:hover{
    border: 2px solid rgba(115, 92, 249, 0.897);
    background-color: rgba(115, 92, 249, 0.877);
    color: #fff;
}


.limitlessOptions{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 0;
  
}
.limitlessOptions h1{
    margin-top: 10vh;
    font-size: 1.5vw;
    color: #0e1015;
    margin-bottom: 2vh;
    margin-left: 22vw;
}

.limitlessOptions p{
   
    
    color: rgb(185, 185, 185);
    font-size: .8vw;
    margin-left: 14vw;
}

    

.buttondownload{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.buttondownload{
    border: 2px solid #745cf9;
    background-color: #745cf9;
    color: #fff;
    margin-left: 22vw;
   
}

.buttondownload:hover{
    border: 2px solid rgba(115, 92, 249, 0.897);
    background-color: rgba(115, 92, 249, 0.877);
    color: #fff;
}
.limitlessOptions img{
    margin-top: 10vh;
    width: 60vw;
    margin-bottom: -0.5%;
}
.ourLatestProjects{
    background-color: #000;
    height: 30vh;
    
    
}
.ourLatestProjects {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    
}
.ourLatestProjects h1{
    color: #fff;
    font-size: 2vw;
    
}
.ourLatestProjects  p{
    color: #fff;
    font-size: 1vw;
    margin-bottom: 5vh:
}

.bildgallery{
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: center;
    align-items: center;
    
    
}
.bildgallery div{
    position: relative;
    margin: 0;
    display: flex;  
  
}
.bildgallery div img {
    width:100%;
}
.overlay{
position:  absolute;
background-color: rgba(0, 0, 0, 0.4);
top:100%;
left:0;
right:0;
bottom: 0;
transition: all 1s ease;
overflow: hidden;
margin: 0;
display: flex;
justify-content: center;
align-items:center;


}
.overlay h2{
    font-size: 1.2vw;
    color: #fff;
    

}
div:hover .overlay{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}