@import "layout.css";

/* === body === */
 body {
     background: url("../images/workflow/workflowbackground.jpg");
     background-attachment: fixed;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
}
/* === links color === */
 a {
     color: #000;
}
/* === main content === */
 #container {
     border: solid 1px #000;
     margin: 0 auto 30px auto;
     max-width: 960px;
     padding: 10px;
}
 .box {
     cursor: pointer;
     margin-bottom: 50px;
     margin-top: 10px;
     border: 3px solid #026e02;
     height: 205px;
     width: auto;
     text-align: center;
     overflow: hidden;
}
/*style click for info at hover*/
 .showText {
     color: #fff;
     margin-top: -100px;
     text-align: center;
}
 .image {
     height: 200px;
     object-fit: cover;
     width: 960px;
}
/*adjusting the image view*/
 .one {
     object-position: center -630px;
}
 .two {
     object-position: center -340px;
}
 .three {
     object-position: center -80px;
}
 .four {
     object-position: center -210px;
}
/*description text*/
 .de {
     color: #000;
     display: none;
     margin-left: 20px;
     margin-top: -30px;
     font-size: 0.9rem;
     font-weight: 400;
     line-height: 1.3;
     padding: 0 4em 1em 4em;
     text-align: left;
}
/* === footer === */
 footer {
     position: relative;
}
/* === svg icons style === */
 .a,.b {
     fill:#000;
     stroke:#000;
     stroke-width: 5px;
}
/* laptop */
 @media only screen and (max-width: 1366px) {
     #container {
         width: 855px;
    }
     .image {
         width: 855px;
    }
     .one {
         object-position: center -500px;
    }
     .two {
         object-position: center -250px;
    }
}
/* tablet */
 @media only screen and (max-width: 865px) {
     #container {
         width: 640px;
    }
     .image {
         width: 640px;
    }
     .one {
         object-position: center -400px;
    }
     .two {
         object-position: center -220px;
    }
     .three {
         object-position: center -30px;
    }
     .four {
         object-position: center -150px;
    }
}
/* tablet */
 @media only screen and (max-width: 672px) {
     #container {
         width: 450px;
    }
     .box {
         height: 120px;
         margin-bottom: 25px;
    }
     .de {
         margin-top: -10px;
    }
     .showText {
         margin-top: -70px;
    }
     .de {
         font-size: 0.8rem;
         line-height: 1.2;
         padding: 0 1em 1em 1em;
    }
     .image {
         height: 120px;
         width: 450px;
    }
     .one {
         object-position: center -280px;
    }
     .two {
         object-position: center -150px;
    }
     .three {
         object-position: center -30px;
    }
     .four {
         object-position: center -100px;
    }
}
/* mobile */
 @media only screen and (max-width: 450px) {
     #container {
         width: 320px;
    }
     .box {
         height: 100px;
    }
     .de {
         font-size: 0.7rem;
    }
     .image {
         height: 100px;
         width: 320px;
         object-position: center;
    }
     .one {
         object-position: center -150px;
    }
     .two {
         object-position: center -120px;
    }
     .three {
         object-position: center -15px;
    }
     .four {
         object-position: center -70px;
    }
}
/* mobile */
 @media only screen and (max-width: 321px) {
     #container {
         width: 280px;
    }
     .image {
         height: 120px;
         width: 280px;
         object-position: center;
    }
     .two {
         object-position: center -90px;
    }
     .three {
         object-position: center 0;
    }
     .four {
         object-position: center -60px;
    }
}