body, html, h1, h2, h3, ul, li, div, p, a{
    margin: 0;
    padding:0;
}

@font-face{
    font-family: 'Adequate';
    src: url('Adequate-ExtraLite.ttf');
    src: url('Adequate.eot');
}

html{
    font-size: 16px;
}

body{
    width: 100%;
    background: url('bgAll.jpg');
    background-size: repeat;
    font-size: 62.5%;
    scrollbar-base-color: darkgray;
    scrollbar-arrow-color: rgb(212,175,55);
    scrollbar-highlight-color: #555555;
    scrollbar-face-color: gray;
}

::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(212,175,55,0.7); 
    background: rgba(55,55,55,.5);
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(33,33,33,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(55,55,55,0.3);
    -webkit-transition: all .5s;
}
 
::-webkit-scrollbar-thumb:hover {
    background: rgba(44,44,44,0.6); 
    -webkit-transition: all .5s;
}


.header{
    margin: 1.3em 3.8em 0px 3.8em;
    height: 13em;
    background: rgba(00,00,00,.6);
    border-bottom: 2px solid rgba(100, 100, 100, .8);

}

.header h1{
    font-family: 'Adequate', 'Poiret One';
    font-size: 4.6em;
    font-weight: 100;
    color: antiquewhite;
    display: inline;
    margin-left: .5em;
    margin-top: 0.5em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header h2{
    font-family: 'Adequate', 'Poiret One';
    font-size: 2em;
    font-weight: 100;
    color: antiquewhite;
    margin-left: 5.5em;
    margin-right: auto;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header .link{
    display: inline;
    text-decoration: none;
    float: right;
    margin-right: 2em;
}

.header ul:hover{
    cursor: pointer;
}

.header li{
    display: inline;
    text-decoration: none;
    padding: 1em;
}

.header .in{
    font-size: 1.6em;
    text-decoration: none;
    font-family: 'Arial', 'Verdana', serif;
    font-weight: bold;
    color: darkgray;
    height: 2.5em;
    width: 8em;
    background: #555555;
    border: 2px solid #444444;
    border-radius: 15%;
    transition: all .3s;
}

.header .in:hover{
    color: antiquewhite;
    background: #007bb6;
    font-weight: bold;
    border: 2px solid #007bb6;
    transition: all .3s;
}

.header .head_ul{
    display: inline;
    float: right;
    margin-right: 2em;
}

.header .head_ul:hover{
    cursor: pointer;
}

.header .head_ul li{
    list-style-type: none;
}

.head_ul a{
    text-decoration: none;
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1.6em;
    color: darkgray;
    transition: all .4s;
}

.head_ul a:hover{
    color: rgb(212,175,55);
}

.main_content_index{
    background: rgba(22, 22, 22, .6);
    height: auto;
    background-size: cover;
    margin: 0 4em 0 4em;
}

.main_content_index h3{
    color: rgb(212,175,55);
    font-size: 2em;
    margin-left: 1.4em;
    padding-top: 3em;
    padding-bottom: 1em;
    font-family: 'Verdana', 'Arial', serif;
    font-weight: lighter;
}


.main_content_index p{
    font-family: 'Verdana', 'Arial', serif;
    font-weight: lighter;
    color: antiquewhite;
    font-size: 1.6em;
    line-height: 2em;
    padding: 0 1.3em 0 1.8em;
    margin-top: 1em;
}

.iCan{
    margin-top: -4em;
}

.client_feedback{
    width: 30em;
    height: 49em;
    background: rgba(230,240,130, .3);
    float: right;
    margin-right: 6em;
    margin-left: 4em;
    margin-top: 3em;
    border: 2px solid rgba(139,69,19,.5);
    border-radius: 2%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-base-color: darkgray;
    scrollbar-arrow-color: rgb(212,175,55);
    scrollbar-highlight-color: #555555;
    scrollbar-face-color: gray;
}

.client_feedback .feedback_head{
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1.6em;
    text-align: center;
    background: rgba(55,55,55,.5);
    width: 20em;
    height: 2em;
    margin: 0;
    text-align:left;
    padding: 0;
    padding-top: .5em;
    padding-left: 1.5em;
}

.client_feedback .quote{
    font-family: 'Verdana', 'Arial', serif;
    text-align: left;
    padding-top: 0.8em;
}

.client_feedback .quote2{
    font-family: 'Verdana', 'Arial', serif;
    text-align: left;
    margin-top: 7em;
}

.client_feedback .name{
    margin: 0;
    float: right;
    padding-top: 0.3em;
}

.client_feedback .pos_name{
    float: right;
    width: 20em;
    text-align: right;
    margin: 0;
    padding-top: 0.3em;
}

.client_feedback .comp_name{
    float: right;
    width: 20em;
    text-align: right;
    margin-bottom: 0.7em;
    padding-bottom: 0.7em;
    padding-top: 0.3em;
    margin-top: 0;
    border-bottom: 2px solid rgba(55,55,55,.5);
}   

.onlineHelp{
    height: auto;
    width: 30em;
    border: 1px solid rgb(212,175,55);
    margin: 8em auto 0 auto;
    background: rgba(230,240,130,.3);
}

.onlineHelp:hover{
    background: rgba(250,250,150,.3);
    border: 1px solid rgb(232,195,65);
    transition: all .4s; 
}


.eLearning{
    height: auto;
    width: 30em;
    border: 1px solid rgb(212,175,55);
     margin: 0em auto 0 auto;
    cursor: pointer;
    background-color: rgba(230,240,130, .3);
    transition: all .4s;
}

.eLearning:hover{
    background: rgba(250,250,150,.3);
    border: 1px solid rgb(232,195,65);
    transition: all .4s; 
}


.manuals{
    height: auto;
    width: 30em;
    border: 1px solid rgb(212,175,55);
    margin: 0 auto 0 auto;
    cursor: pointer;
    background-color: rgba(230,240,130, .3);
    transition: all .4s;
}

.manuals:hover{
    background: rgba(250,250,150,.3);
    border: 1px solid rgb(232,195,65);
    transition: all .4s; 
}


.marketingCollateral{
    height: auto;
    width: 30em;
    border: 1px solid rgb(212,175,55);
    margin: 0 auto 0 auto;
    cursor: pointer;
    background-color: rgba(230,240,130, .3);
    transition: all .4s;
}

.marketingCollateral:hover{
    background: rgba(250,250,150,.3);
    border: 1px solid rgb(232,195,65);
    transition: all .4s; 
}


.corporateCommunications{
    height: auto;
    width: 30em;
    border: 1px solid rgb(212,175,55);
    margin: 0 auto 1em auto;
    cursor: pointer;
    background-color: rgba(230,240,130, .3);
    transition: all .4s;
}

.corporateCommunications:hover{
    background: rgba(250,250,150,.3);
    border: 1px solid rgb(232,195,65);
    transition: all .4s; 
}

.content_1 h4{
    color: rgb(212,175,55);
    font-family: 'Verdana', 'Arial', serif;
    font-size: 2.6em;
    height: 2em;
    font-weight: lighter;
    text-align: center;
    margin: 0;
    padding: 1em;
    border-bottom: 2px solid rgba(55,55,55,.5);
    cursor: pointer;
    

}

.content_1 .desc{
    padding: .5em 0em 1em .5em;
    margin: 0;
}

.read{
    color: rgb(212,175,55);
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1.5em;
    transition: all .4s;
    padding-bottom: .5em;
    padding-left: 10em;
}

.read:hover{
    color: antiquewhite;
    transition: all .4s;
}

.footer{
    margin: 0 3.8em 1.3em 3.8em;
    padding: 0;
    background: rgba(0,0,0,.6);
    height: auto;
    border-top: 2px solid rgba(100,100,100,.7);
    text-align: center;
}


.footer .row1{
    display: inline-block;
    margin-top: 2em;
}

.footer .row1 li{
    list-style-type: none;
    display: inline;
    padding: 0 2em 0 2em;
}

.footer .row1 a{
    text-decoration: none;
    padding-left: .8em;
    color: darkgray;
    font-size: 1.6em;
    font-family: 'Arial', 'Verdana', serif;
    transition: all .4s;
}

.footer .row1 a:hover{
    color: rgb(212,175,55);
    transition: all .4s;
}

.footer p{
    color: #555555;
    font-family: 'Arial', 'Verdana', serif;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 3em;
    padding-bottom: 1em;
    padding-top: 4em;
}

.footer p a{
    text-decoration: none;
    color: #555555;
    font-family: 'Arial', 'Verdana', serif;
    font-size: 1em;
    transition: all .4s;
}

.footer p a:hover{
    color: antiquewhite;
    transition: all .4s;
}


/* ----------------------------------------- About.html ---------------------------------------------- */

.main_content{
    background: rgba(22,22,22,.6);
    height: auto;
    margin: 0 3.8em 0 3.8em;
}
.about_header{
    font-family: 'Arial', 'Verdana', serif;
    font-size: 4em;
    color: rgb(212,175,55);
    border-bottom: 1px solid #555555;
    text-align: center;  
    padding-top: 1em;
    font-weight: lighter;
}    

.content_1 .first_p{
    padding-top: 1.8em;
    line-height: 1.8em;
    font-size: 1.6em;
    font-family: 'Verdana', 'Arial', serif;
    margin: 0 11.8em 0 11.8em;
    color: antiquewhite;
}

.content_1 .p_2{
    padding-top: .8em;
    line-height: 2.3em;
    font-size: 1.6em;
    font-family: 'Verdana', 'Arial', serif;
    text-align: center;
    margin-top: 2em;
    padding-bottom: 1.8em;
    color: antiquewhite;
}

.first_p a{
    text-decoration: underline;
    color: rgb(212,175,55);
    font-family: 'verdana', 'Arial', serif;
    font-size: 1em;
    transition: all .4s;
}

.first_p a:hover{
    color: antiquewhite;
    transition: all .4s;
}

.content_1 .p_3{
    padding-top: 3.8em;
    text-align: center;
    margin: 2em auto auto auto;
}

.p_3 a{
    color: antiquewhite;
    font-size: 1.5em;
    font-family: 'Verdana', 'Arial', serif;
    transition: all .4s;
    color: antiquewhite;
}

.p_3 a:hover{
    color: #555555;
}

.p_2 a{
    text-decoration: underline;
    color: rgb(212,175,55);
    font-family: 'verdana', 'Arial', serif;
    font-size: 1em;
    transition: all .4s;
}

.p_2 a:hover{
    color: antiquewhite;
    transition: all .4s;
}

 #read-1{
    color: rgb(212,175,55);
    font-family: 'Verdana', 'Arial', serif;
    font-size: 2em;
    margin-left: 3em;
    padding-top: 8em;
    margin-bottom: 3em;
}

._type{
    color: rgb(212,175,55);
    font-family: 'Arial', 'Verdana', serif;
    font-size: 2.2em;
    margin: 2em 1em .5em 1em;
    font-weight: lighter;
    
}


.content_1 h4{
    color: antiquewhite;
    font-family: 'Verdana', 'Arial', serif;
    font-size: 2em;
    font-weight: lighter;
    padding: .3em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.desc{
    color: antiquewhite;
    font-family: 'Verdana', 'Arial', serif;
    line-height: 15px;
    font-size: 1.6em;
}

/*------------------------------------------samples.html--------------------------------------------------*/

.sample_intro_p{
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1.8em;
    color: antiquewhite;
    padding-left: 2em;
    padding-top: 1.2em;
    padding-bottom: .5em;
    margin-top: 0;
    text-align: center;
}

.sample_intro_p2{
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1.8em;
    color: antiquewhite;
    padding-left: 2em;
    padding-top: 0;
    padding-bottom: 0em;
    text-align: center;
}

.sample_intro_p2 a{
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1em;
    color: antiquewhite;
    transition: all .3s;
}

.sample_intro_p2 a:hover{
    color: rgb(212,175,55);
    transition: all .3s;
}

.type{
    font-family: 'Arial', 'Verdana', serif;
    font-size: 2.2em;
    color: rgb(212,175,55);
    padding-left: 1.5em;
    padding-bottom: .5;
    padding-top: 4em;
}

.type_desc1{
    
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1.7em;
    line-height: 1.5em;
    padding-left: 3.7em;
    padding-top: .5em;
}

.type_desc{
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1.7em;
    line-height: 1.5em;
    padding-left: 2.5em;
    padding-bottom: 2em;
    padding-top: .5em;
    
}

li{
    list-style-type: none;
    line-height: 4em;
}

.type_a1{
    
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1.7em;
    padding-left: 3.7em;
    padding-bottom: 1em;
    transition: all .3s;
}

.type_a1:hover{
    color: rgb(212,175,55);
    transition: all .3s;
}

.type_a{
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1.7em;
    padding-left: 4em;
    padding-bottom: 1em;
    transition: all .3s;
}

.type_a:hover{
    color: rgb(212,175,55);
    transition: all .3s;
}



/*--------------------------------------------clients.html-----------------------------------------------*/


.clients_ass_move{
    font-family: 'Arial', 'Verdana', serif;
    font-size: 2em;
    color: antiquewhite;
    text-align: center;
    padding-top: 2em;
}

.clients-container{
    margin: 3em .3em auto 4em;
}

.clients-ul{
}

.clients-ul li{
    list-style-type: none;
    padding-bottom: 1em;
    border-bottom: 1px solid #555555;
}

.comp-name{
    color: rgb(212,175,55);
    font-family: 'Arial', 'Verdana', serif;
    font-size: 1.2em;
    font-weight: normal;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.comp-work{
    font-size: 1.5em;
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
}

.comp-work a{
    font-family: 'Verdana', 'Arial', serif;
    color: antiquewhite;
    font-size: 1em;
    transition: all .3s;
}

.comp-work a:hover{
    color: #555555;
    transition: all .3s;
}

.client-close{
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1.6em;
    color: antiquewhite;
    text-align: center;
    margin-top: 2em;
    padding-bottom: 2em;
    font-weight: normal;
}

.client-close a{
    font-family: 'Verdana', 'Arial', serif;
    font-size: 1em;
    color: rgb(212,175,55);
    transition: all .4s;
    font-weight: normal;
}

.client-close a:hover{
    color: antiquewhite;
    transition: all .4s;
}



/*-----------------------------------------Media Queries-------------------------------------------------*/


/*index.html*/

@media only screen and (max-width: 1038px){
    
    .header{
        text-align: center;
    }

    .header .head_ul{
        display: inline-block;
        float: none;
        border-top: 1px solid #555555;
    }
    
    .header h1{
        margin-top: 3em;
        padding: 0;
    }
    
    .header h2{
        padding-right: 6em;
    }
    
    .client_feedback{
        width: 25em;
        height: 44em;
        margin-left: 1em;
        margin-right: 2em;
    }
    
    .client_feedback .feedback_head{
        font-size: 1.4em;
        padding-left: .8em;
    }
    
    .client_feedback .quote{
        font-size: 1.3em;
    }

.client_feedback .quote2{
        font-size: 1.3em;
    }

.client_feedback .name{
        font-size: 1.3em;
    }

.client_feedback .pos_name{
        font-size: 1.3em;
    }

.client_feedback .comp_name{
        font-size: 1.3em;
    }
    
}

@media only screen and (max-width: 876px){
    body{
        font-size: 55%;
    }
    
    .iCan{
        margin-left: 1em;
    }
    
    
@media only screen and (max-width: 772px){
    
    body{
        font-size: 50%;
    }
    
    .header{
        width: 100%;
    }
    
    .link{
        margin-right: .5em;
    }
    
    .main_content_index{
        width: 100%;
    }
    
    .main_content{
        width: 100%;
    }
    
    .iCan{
        margin-left: 0;
        padding-left: 0; 
    }
        
    .footer{
        width: 100%;
    }  
    
}

@media only screen and (max-width: 638px){
        body{
            font-size: 45%;
        }
    }
    
@media only screen and (max-width: 582px){
        body{
            font-size: 40%;
        }
        
@media only screen and (max-width: 582px){
        body{
            font-size: 35%;
        }
    }
            
@media only screen and (max-width: 450px){
        body{
            font-size: 30%;
        }
    }
                
@media only screen and (max-width: 386px){
        body{
            font-size: 27%;
        }
    }