#textWrapper{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:auto;
    background-color:white;
}
.textContainer{
    position:absolute;
    left:0px;
    width:100%;

    background-color:white;
    background-repeat: no-repeat;
        overflow-y:hidden;

}   
    li{
        font-family: 'Raleway', sans-serif;
        font-weight:400;
        line-height: 2;
        font-size:12pt;
    }
     h1{
        font-family: 'Raleway', sans-serif;
        font-weight:600;
        font-size:20pt;
    }
    p{
        font-family: 'Raleway', sans-serif;
        font-weight:400;
        line-height: 2;
        font-size:12pt;

    }


#footer{
    position:relative;
/*    display:inline-block;*/
    left:0px;
    width:100%;
    height:100px;
    background-color:black;
/*    z-index:0;*/
}
#footer p{
    position:relative;
    top:10%;
    left:50%;
/*    display:inline-block;*/
    text-align:left;
    color:white;
}
/*animations*/

.inactiveText{
    position:absolute;
    left:-60%;
    transition: all 0.8s;
    -moz-transition:all 0.8s;  
    -webkit-transition:all 0.8s;
    -o-transition:all 0.8s;
}
.activeText{
    position:absolute;
    left:0%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.inactiveDesign{
    position:absolute;
    left:-60%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.activeDesign{
    position:absolute;
    left:0%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}


/*desktop*/
/*design*/
#design{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/design.jpg);
}

#designTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri2design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*project dev*/
#projectdev{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/projectdevelopment2.jpg);
}

#projectdevTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri1design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*procurement dev*/
#procurement{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/2new.jpg);
    z-index: -1;
}

#procurementTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri3design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*logistics dev*/
#logistics{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/1new.jpg);
    z-index: -1;
}

#logisticsTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri4design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*installation*/
#installation{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/installation1.jpg);
    z-index: -1;
}

#installationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri5design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*fabrication*/
#fabrication{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/Fabrication1.jpg);
    z-index: -1;
}

#fabricationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 150px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri6design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}


/*contact*/
#contact{
    background-position: 3% 35%;
    background-size: 55% auto;
    background-image:url(_images/rpgclientlogos.png);
    z-index: -1;
    border: solid 1px lightgray;
}

#contactTextSubContainer{
    position:absolute;

    text-align: left;
    color:black;
    z-index:10;
        top:25%;
    left:55%;
    width:40%;
    height:60%;
    padding: 30px 50px 50px 50px;

}

#tri7design{

        top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}





/*medium flag*/



@media only screen and (max-width:1336px){
/*    medium*/
    li{
        font-family: 'Raleway', sans-serif;
        font-weight:400;
        line-height: 2;
        font-size:10pt;
    }
     h1{
        font-family: 'Raleway', sans-serif;
        font-weight:600;
        font-size:15pt;
    }
    p{
        font-family: 'Raleway', sans-serif;
        font-weight:400;
        line-height: 2;
        font-size:10pt;
    }
.inactiveText{
    position:absolute;
    left:-60%;
    transition: all 0.8s;
    -moz-transition:all 0.8s;  
    -webkit-transition:all 0.8s;
    -o-transition:all 0.8s;
}
.activeText{
    position:absolute;
    left:0%;
    padding: 2px;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.inactiveDesign{
    position:absolute;
    left:-60%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.activeDesign{
    position:absolute;
    left:0%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}


/*medium*/
/*design*/
#design{
    background-position: 0px 0px;
    background-size: 120%;
    background-image:url(images/design.jpg);
}

#designTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri2design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*project dev*/
#projectdev{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/projectdevelopment2.jpg);
}

#projectdevTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri1design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*procurement dev*/
#procurement{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/2new.jpg);
    z-index: -1;
}

#procurementTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri3design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*logistics dev*/
#logistics{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/1new.jpg);
    z-index: -1;
}

#logisticsTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri4design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*installation*/
#installation{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/installation1.jpg);
    z-index: -1;
}

#installationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri5design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*fabrication*/
#fabrication{
    background-position: 0px -50px;
    background-size: cover;
    background-image:url(images/Fabrication1.jpg);
    z-index: -1;
}

#fabricationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:0%;
    width:20%;
    height:100%;
    padding: 120px 50px 50px 50px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri6design{
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*contact*/
#contact{
    background-position: 3% 10%;
    background-size: 55% auto;
    background-image:url(_images/rpgclientlogos.png);
    z-index: -1;
    border: solid 1px lightgray;
}
#contactTextSubContainer{
    position:absolute;

    text-align: left;
    color:black;
    z-index:10;
    top:15%;
    left:55%;
    width:40%;
    height:60%;
    padding: 30px 50px 50px 50px;

}

#tri7design{

        top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

}



/*small flag*/



@media only screen and (max-width:930px){
/*    small*/

     h1{
        font-family: 'Raleway', sans-serif;
        font-weight:600;
        font-size:12pt;
    }
    p{
        font-family: 'Raleway', sans-serif;
        font-weight:400;
        line-height: 2;
        font-size:9pt;
    }
    li{
        font-family: 'Raleway', sans-serif;
        font-weight:400;

        font-size:9pt;
    }
.inactiveText{
    position:absolute;
    left:-60%;
    transition: all 0.8s;
    -moz-transition:all 0.8s;  
    -webkit-transition:all 0.8s;
    -o-transition:all 0.8s;
}
.activeText{
    position:absolute;
    left:2%;
    padding: 2px;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.inactiveDesign{
    position:absolute;
    left:-60%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}
.activeDesign{
    position:absolute;
    left:1%;
    width:5%;
    transition: all 0.85s;
    -moz-transition:all 0.85s;  
    -webkit-transition:all 0.85s;
    -o-transition:all 0.85s;
}


/*mobile*/
/*design*/
#design{
    background-position: 0px 0px;
    background-size: cover;
    background-image:url(images/design.jpg);
}

#designTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:13%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 17px 12px 17px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri2design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*project dev*/
#projectdev{
    background-position: 0px 0px;
    background-size: cover;
    background-image:url(images/projectdevelopment2.jpg);
}

#projectdevTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:13%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 17px 12px 17px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri1design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*procurement dev*/
#procurement{
    background-position: 0px 0px;
    background-size: cover;
    background-image:url(images/2new.jpg);
    z-index: -1;
}

#procurementTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:15%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 20px 20px 20px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri3design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*logistics dev*/
#logistics{
    background-position: 0px 0px;
    background-size: cover;
    background-image:url(images/1new.jpg);
    z-index: -1;
}

#logisticsTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:15%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 20px 20px 20px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri4design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*installation*/
#installation{
    background-position: center 0px;
    background-size: cover;
    background-image:url(images/installation1.jpg);
    z-index: -1;
}

#installationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:15%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 20px 20px 20px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri5design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}
/*fabrication*/
#fabrication{
    background-position: center 0px;
    background-size: cover;
    background-image:url(images/Fabrication1.jpg);
    z-index: -1;
}

#fabricationTextSubContainer{
    position:absolute;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    top:15%;
    width:calc(100% - 45px);
    height:auto;
    padding: 5px 20px 20px 20px;
    text-align: left;
    color:black;
    z-index:10;
}

#tri6design{
    top:0%;
    left:0%;
    width:98%;
    height:100%;
    z-index:0;
    overflow:hidden;
}

/*contact*/
#contact{
    background-image:none;
    background-position: 50% 10%;
    background-size: 80% auto;
    z-index: -1;
    border: solid 1px lightgray;
}

/*#contactTextSubContainer{
    position:absolute;
    top:00%;
    width:90%;
    height:100%;
    line-height: 0.8;
    text-align: left;
    color:black;
    z-index:10;
}

#tri7design{
    top:31%;
    left:5%;
    width:90%;
    height:30%;
    border: solid 2px grey;
    background-color: rgba(255,255,255,1);
    z-index:0;
    overflow: scroll;
}*/
#contactTextSubContainer{
    position:absolute;

    text-align: left;
    color:black;
    z-index:10;
    top:20%;
    left:0px;
    width:90%;
    height:30%;
    padding: 20px 20px 20px 20px;

}

#tri7design{

    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:0;
    
}
    .mobileLogos{

        position:absolute;
        height:30%;
        width:90%;
        left:5%;
        opacity:1;
        z-index:10;
    }
    #smallLogo1{
        
        top:0px;
        /*background-image:url(_images/small1.png);*/
        background-size:auto 100%;
        background-position: top center;
        background-repeat: no-repeat;

    }
    #smallLogo2{

        top:100%;
        /*background-image:url(_images/small2.png);*/
        background-size:auto 100%;
        background-position: top center;
        background-repeat: no-repeat;
    }
    
/*    end of mobile*/
}