@font-face {
    font-family: Swis;
    font-style: normal;
    src: url('../fonts/Swis.ttf') format('truetype');
}

#back-top{
    display:none !important;
}

.SingleTech{
    background-color:#515151;
    padding: 11% 0  7%;
}

.tech-container{
    width:1200px;
    margin:0 auto;
    height:670px;
    box-shadow:0 0 20px 10px #0000005e;
    position:relative;
}

.Image1{
    width:43%; 
    position:absolute;
    top:-11%;
    left:53%;
}

.image2{
    width:12%; 
    position:absolute;
    top:20%;
    left:39%;
}

.image3{
    width:11%; 
    position:absolute;
    bottom:8%;
    left:9%;
}

.content{
    color:white;
    width:42%;
    margin:8% 0 0 10%;
}

.content p{
    font-family:Ebrima;
    line-height:1.3;
}

.content h3{
    font-family:Myrid-light;
    font-size:250%;
    color:yellow;
    margin-bottom:15px;
}

.font{
    font-family:Swis;
    font-size:135%;
}


@media only screen and (max-width:1400px){
    .tech-container{
        width:1000px;
    }
    

    
    
    .Image1{
      top:-4%;
      width:46%;
    }
}

@media only screen and (max-width:1200px){
    .tech-container{
        width:800px;
    }
    
    .content{
        width:46%;
        margin:6% 0 0 9%;
    }
    
    
.Image1{
    width:48%; 
    top:-5%;
    left:59%;
}

.image3{
    left:7.5%;
}
    
    .content h3{
        font-size:150%;
    }
    
    .tech-container{
        height:550px;
    }
    
    .SingleTech{
        padding:12% 0 9%;
    }
}

@media only screen and (max-width:991px){

}

@media only screen and (max-width:927px){
    .tech-container{
        height:600px;
        width:600px;
    }
    
    .content{
        width:75%;
        margin:9% 0 0 9%;
    }
    
    .content h3{
        font-size:209%;
    }
    
    .firstParagraph{
        width:72%;
    }
    
    .Image1{
        top:2%;
        left:67%;
        width:38%;
    }

    
    .image3{
        width:17%; 
        bottom:6%;
    }
    
    .SingleTech{
        padding:12% 0 11%;
    }
}

@media only screen and (max-width:700px){
    .tech-container{
        height:900px;
        width:450px;
    }
    
    .firstParagraph{
        width:100%;
    }
    
    .content{
        margin:11% 0 0 12%;
    }
    
    .Image1{
        top:58%;
        width:50%;
        left:30%;
    }
    
    .image3{
        width:21%; 
        bottom:5%;
        left:12.5%;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}

@media only screen and (max-width:490px){
    .tech-container{
        height:100%;
        width:90%;
    }
    
    .content{
        margin:10% 0 6% 10%;
        width:80%;
    }
    
    .content h3{
        font-size:181%;
    }
    
    .Image1{
        top:unset;
        width:63%;
        position:relative;
        bottom:5%;
        left:23%;
    }
    
    
    .image3{
        width:89px; 
        bottom:2%;
        right:unset;
        left:9%;
    }
    
    .SingleTech{
        padding:110px 0 100px;
    }
}


@media only screen and (max-width:400px){
    
    .SingleTech{
        padding:100px 0 100px;
    }
}