*{
    margin: 0;
    padding: 0;
}

.container,.title{
    background-image: url(pexels-trace-hudson-2529973.jpg);
    background-attachment: scroll;
    background-position: right top;
    background-size: cover;
    height: 1000%;
    width: 100%;
    justify-content: center;
    display: flex;
    overflow: hidden;
}
.title{
    text-align: center;
    text-shadow: 20px;
    font-size: 4em;
    font-weight: 400;
    font-style: oblique;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.slider {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 30s linear infinite;
    margin-left: 5%;
    margin-top: 5%;
    
}
@keyframes rotate {
    0% {
        transform : perspective(1000px) rotateY(0deg)

    }

    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
    
    
}

.slider span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i)*45deg)) translateZ(350px);
    margin-top: 80%;
    margin-right: 50px;
}
.slider span img 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    transition: 2s;


}
.slider span:hover img{
transform: translateY(-50px) scale(1.2);

}
.container .videocontainer{
    margin-top: 50%;
    margin-right: 0%;
    
}
footer{
    display:flex;
    justify-self: flex-end;
    align-items: center;
    flex-direction: column;
    background:#111; 
    height: auto;
    position: relative;
    width: 86.8%;
    padding: 50px 100px;
    justify-content: space-between;
    flex-wrap: wrap;

}
footer .footercontainer 
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
footer .footercontainer .sec
{
  margin-right: 30px;

}
footer .footercontainer .sec.aboutus 
{
    width: 100%;
    margin-left: -35%;

}
footer .footercontainer h2 
{
    position: relative;
    color: #fff;
    font-weight: 500;
    margin-bottom: 15px;
    

}
footer .footercontainer h2:before 
{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #f00;

}
footer .footercontainer .sec.aboutus p{
    color: #999;

}
.quicklinks ul li a
{
    color: #999;
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
    
}
.quicklinks ul li a:hover
{
    color: #fff;
    
}
/*responsive website*/ 

@media screen and (max-width: 1060px){
    #primary { width: 67%; }
    #secondary {width: 30%; margin-left: 3%;}

}

@media screen and (max-width: 768px){
  #primary { width: 100%; }
  #secondary {width: 100%; margin-left: 0;border:none;}

}
img {
  max-width: 100%; height: auto;
}

@media ( min-device-width:600px)
{
  img[ data-src-600px] 
  {
    content: attr(data-src-600px, url );
  }
}

@media (min-device-width:800px)
{
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

html{ font-size: 100%;}

@media (min-width:640px) {body {font-size: 1rem;} }
@media (min-width:960px) { body{font-size: 1.2rem;} }