body{
    font-family:  Myriad Pro; 
@font-face
    font-family: Perspective Sans;
    src: url(fonts/Perspective-Sans);
    src: local(Perspective-Sans Regular), local(Perspective),url(fonts/persans.ttf);
    font-size: 18px;
}
#wrapper{
background: #ffffff;
}
#header{
width: 100%;
 height: 270px;

    margin-bottom: 4em;
}
.brand{
float:left;
width: 10%;
margin: 2%;
}
.heading{
float:left;
width:50%;
margin: 2% 2% 0 9%;
padding: 20px;
font-family: sans-serif;
font-weight: 800; 
font-size: 5em;
text-align: center;
color: #847c72;
}
.page{
float:right;
font-size: 3em;
color:#539559;
margin: 2% 4%;
}

.sub-head{
width: 60%;
margin: auto;
font-family: sans-serif;
font-size: 2em;
text-align: center;
color:#000000;

}

.clear{
    clear:both;
}
#preview{
width:80%;
background: #f0f0f0;
margin:auto;
padding-top: 40px;
padding-bottom: 40px;
}
#display{
 width:80%;
background: #f0f0f0;
margin:auto;
padding-top: 40px;
padding-bottom: 40px;   
}
.boxview{
float: left;
width: 28.8%;
margin: 1% 2.2%;
}
.boxview a{
position:relative;
display: block;
margin: 0;
padding: 0;
}
.boxview img{
width:100%;
}
.thumb-screen{
display: block;
position: absolute;
width:100%;
height:100%;
background:#333333;
z-index:2;
opacity: 0.9;
transition: opacity .5s ease;
}
.thumb-screen:hover{
opacity: 0;
}
.clear{
    clear:both;
}
.caption{
float: left;
width: auto;
font-family: sans-serif;
font-size: 1.4em;
margin: 0 0 0 10%;
}
.clear{
clear: both;
}
.red{
font-family: sans-serif;
font-size: 2em;
font-weight: bold;
color: #999999;
}
.blue{
font-family: serif;
font-size: 1.6em;
font-weight: normal;
color: #6ec777; 
}
.green{
font-family: sans-serif;
font-size: 1.6em;
font-weight: bolder;
color: #b1181b; 
}
.orange{
font-family: serif;
font-size: 1.3em;
font-weight: bold;
font-style: italic;
color: #b1181b; 
}
.brown{
font-family: serif;
font-size: 1.6em;
font-weight: bold;
font-style: italic;
color: #a0ad90;
}
.dcc-content{
float: left;
width: 46%;
margin: 2%;
}
.dcc-content img{
width: 100%;
margin: 0;
padding: 0;
}
.dcc-article{
width: 98%;
margin: 1%;
}
.dcc-article img{
float: left;
width: 65%;
margin: 0;
padding: 0;
}
.DIS{
float: left;
width: 20%;;
font-family: sans-serif;
font-size: 2em;
font-weight: bold;
font-style: oblique;
color: #999999;
margin: 8% 2%;    
}
.clear{
clear: both;
}
.dcc-features{
float: left;
width: 46%;
margin: 2%;
}
.dcc-features img{
float: left;
width: 100%;;
margin: 0;
}
#dcc-note{
float: left;
width: 98%;
margin: 10% 2%;     
}
#dcc-note img{
width:  55%;
margin: 20px;
padding: 0;
}
.S-link{
float: left;
width: auto;
margin: 1% 4%;   
}
.dcc-link a{
font-family: sans-serif;
text-decoration: none;
color: #b1181b;
text-align: center;
font-size: 1.1em;
font-weight: bold;    
}
.face{
float: left;
width: 76%;
margin: 2% 12% 0 12%;
}
.face img{
width: 100%;
}
.clear{
clear: both;
}
.vid{
width: 76%;
grid-column: 1/3;
display: grid;
grid-template-columns: 36% 28% 28%;
margin: auto;
}
.vid> div{
padding: 20px;
margin: 2%;
}
.box1{

}
.box2 video{
width: 96%;
margin: 1% 2%;
}
.box3 video{
width: 96%;
margin: 1% 2%;
}
.clear{
clear: both;
}
.IBfeatures{
float: left;
width: 60%;
margin: 2% 0% 0 12%;
}
.IBfeatures img{
width: 100%;
}
.IBfeatures p{
    width: 100%;
}
#imaging-rws{
position: absolute;
width: 18%;
margin: 0% 2% 0 54%;
z-index: 50;
}
#imaging-rws img{
width: 90%;
}
.clear{
clear: both;
}
.ti-content{
float: left;
width: 46%;
margin: 2%;

}
.ti-content img{
width: 100%;
margin: 0;
padding: 0;
}
.ti-features{
 float: left;
width: 44%;
margin: 2%; 
}
.ti-features img{
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #000;
} 
.ti-rws{
float: left;
width: 44%;
margin: 0 2% 2% 2%;
border: 1px solid #000;
}
.ti-rws p{
width: 100%;
font-family: sans-serif;
font-size: 1.2em;
font-style: normal;
color: #000;
margin: 2%    
}
.ti-rws img{
float: right;
width: 60%;
margin: 2%;
padding: 0;
}
.clear{
clear: both;
}
#ti-main{
position: absolute;
width: 45%;
margin: -48% 2% 0 51%;
z-index: 2;
}
.ti-link{
float: left;
width: auto;
margin: 1% 4%;   
}
.ti-link a{
 text-decoration: none;
color: #b1181b;
text-align: center;
font-size: 1.1em;
font-weight: bold;   
}
.clear{
clear: both;
}
.em-features{
float: left;
width: 58%;
margin: 2%;
padding: 0;
}
.em-features img{
width: 100%;
padding: 0;
}
.em-content{
float: left;
width: 30%;
margin: 2% 0;
padding: 10px;
}
.em-content img{
 width: 50%;
margin: 0 23%;
padding: 0;
}
.clear{
clear: both;
}
#ccc-display{
 width:90%;
background: #f0f0f0;
margin:auto;
padding-top: 40px;
padding-bottom: 40px;   
}
.ccc-features{
float: left;
width: 60%;
margin: 2%;
padding: 0;
background-image: url(images/packag-design/pattern.png);
background-repeat: repeat;

}
.ccc-features img{
float: left;
width: 80%;
margin: 1% 9%;
padding: 0;
}
.clear{
clear: both;
}
.ccc-products{
float: right;
width: 30%;
margin: 2%;
padding: 10px;
background: #666;
border: 1px solid #000;
}
.ccc-products p{
font-family: serif;
font-size: 1.2em;
font-style: normal;
color: #fff;
}
.ccc-products img{
 width: 80%;
margin: 4% 9%;
}
.clear{
clear: both;
}
.l-features{
float: left;
width: 65%;
margin: 2%;
padding: 10px;
background-image: url(images/logos/illustrate.jpg);
background-repeat: no-repeat;
border: 1px solid #000;
}
.logos{
float: left;
width: 29%;
margin: 2%;    
}
.logos img{
width: 100%;
margin: 1% 2%;
padding: 0;
}
.l-content{
float: left;
width: 25%;
margin: 2%;
padding: 0;
}
.l-content p{
font-family: serif;
font-size: 1.2em;
font-style: normal;
}
.eg-features{
float: left;
width: 35%;
margin: 2%;
padding: 0;
z-index: 2;
}
.eg-features img{
width: 100%;
margin: 0;
padding: 0;
}
.eg-features p{
font-family: Perspective Sans;
font-size: 1em;
font-style: normal;
color: #000;
margin: 2%
}
.eg-content{
float: right;
width: 55%;
margin: 2%;
padding: 0;
}
.eg-content p{
font-family: Perspective Sans;
font-size: 1.3em;
font-style: normal;
color: #000;
margin: 2% 2% 5% 2%;
}
.eg-content img{
width: 100%;
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.Il-features{
width: 74%;
margin: auto;
padding-left: 9%; 
background-image: url(images/illustration/art-tools.jpg);
background-repeat: no-repeat;
border: 1px solid #000;
}
.art{
float: left;
width: 27.3%;
margin: 2% 1%;
}
.art img{
width: 100%;
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
.Im-features{
float: left;
width: 50%;
margin: 2%;
padding: 20px;
}
.Im-features img{
float: left;
width: 60%;
margin: 1%; 
}
.Im-features p{
font-family: serif;
font-size: 1.6em;
font-style: normal;
color: #000;
margin: 2% 0; 
}
.clear{
clear: both;
}
aside{
float: left;
width: 30%;
margin: 2%;
padding: 0;
}
aside img{
width: 100%;
margin: 0;
padding: 0;
}
aside p{
  font-family: serif;
font-size: 1.6em;
font-style: normal;
color: #000;
margin: 2% 0;  
}
.S-link{
width: 22%;
margin-left: 36%;
padding: 10px;
background-color: #666;
z-index:50;
}
.S-link a{
font-family: sans-serif;
text-decoration: none;
text-align: center;
font-size: 1em; 
color: #fff;
}
.ilink{
width: 12%;
margin-left: 43%;
padding: 10px;
background-color: #666;
z-index:50;
}
.ilink a{
font-family: sans-serif;
text-decoration: none;
text-align: center;
font-size: 1em; 
color: #fff;
}
.contact_features{
float: left;
width: 30%;
margin: 2% 2% 2% 8%;
padding: 10px;
background-color: #666;
border: 1px solid #000;
}
.contact_features img{
width: 100%;
margin: 0;
padding: 0;
}
.contact-form{
float: left;
background-color: #ccc;
width: 45%;
margin:5% 3%;
padding: 10px 20px;
border: 1px #000 solid;
}
.clear{
clear: both;
}
article{
float: left;
width: 30%;
margin: 2% 2% 2% 8%;
padding: 0;  
}
article p{
float: left;
margin: 20px;
}
.M-profile{
 float: left;
 overflow: hidden;
background:#cccccc;
 margin: 1% 1% 1% 3%;
  width: 250px;
  height: 250px;
 border-radius: 200px;
 border: 3px #666 solid;

}
.M-profile img{
 
    width: 250px;
    height:250px;
    margin: 0;
    padding: 0;
}
.clear{
clear: both;
}
.resume{
float: left;
width: 50%;
margin: 2%;
padding: 0;

}
footer{
width: 100%;
height: 360px;
background-color: #6ec777;
}
.summary{
width:70%;
 margin: auto;
}
.summary p{
font-family: sans-serif;
font-size: 1.2em;
color:#000;
margin-top: 4%;
padding: 40px 50px;
}
.clear{
clear: both;
}
#footlink{
width: 60%;
margin: auto;
height: auto;
padding: 0;
}
.profile{
    float: left;
    width: auto;
    margin: 0;

}
.profile a{
font-family: sans-serif;
text-decoration: none;
color: #b1181b;
text-align: center;
font-size: 1.1em;
font-weight: bold;
}

.connect{
 width: 50%;
margin-left: 28%;
padding: 0 3%;
}
.connect a{
position: relative;
padding: 0;
}
.connect img{
display: inline-block;
width: 10%;
margin: 0 2%;
}
.contact{
float: right;
width: auto;
margin: -4% 0;
}
.contact a{
font-family: sans-serif;
text-decoration: none;
color: #b1181b;
text-align: center;
font-size: 1.1em;
}
.clear{
clear: both;
}

.copyrights{
 width:100%;
 height: 50px;
padding: 10px 0px;
background-color: #333;
}
.copyrights p{
font-size: 1em;
text-align: center;
line-height: 1.1em;
color: #fff;
}
@media screen and (max-width: 2560px){
#header{
height: 220px;
}

.Im-features{
width: 60%;
margin: 2% 1% 2% 1%;
}
.Im-features img{
float: left;
width: 60%;
margin: 1%; 
}
.Im-features p{

font-size: 1.2em;

}
.Im-side{
width: 20%;

}
.S-link a{
text-align: center;
font-size: 0.9em; 
}
.ilink a{
font-size: 0.9em; 
}

}
@media screen and (max-width: 2230px){
   
}
@media screen and (max-width: 2048px){
.caption{
font-size: 1.2em;
}
#imaging-rws{
position: absolute;
margin: 0% 2% 0 54%;
z-index: 50;
}
.S-link{
width: 26%;
margin-left: 40%;
padding: 9.5px;
}
.brown{
 font-size: 1.3em;       
}

}
@media screen and (max-width: 1920px){
#dcc-note img{
margin: 10px 10px 10px 0;
padding: 0;
}
.vid{
 width: 80%;
margin-left: 13%;
}
#imaging-rws{
position: absolute;
margin: 0% 2% 0 53%;
}
.l-content p{
font-size: 1.1em;
}
}
@media screen and (max-width: 1690px){
#header{
 height: 190px;
}
.page{
 font-size: 2.2em;
margin: 2% 3%;;
}
.heading{
font-size: 4em;
margin: 2% 2% 0 7%;
}
.brand{
 width: 12%;
}
.sub-head{
font-size: 1.8em;
 }
.caption{
font-size: 1.1em;
}
#dcc-note img{
width:  50%;
margin: 10px;
padding: 0;
}
.vid{
 width: 90%;
margin-left: 7%; 
}
.box2 video{
width: 100%;
}
.box3 video{
width: 100%;
}
.DIS{
 font-size: 1.8em;
margin: 8% 1%;
}
.Im-features{
float: left;
width: 50%;
}
#imaging-rws{
position: absolute;
}
.Im-features img{
float: left;
width: 60%;
}
.clear{
clear: both;
}
.l-content p{
 font-size: 1em;       
}
aside{
float: left;
width: 30%;
}
aside img{
width: 100%;
}
aside p{
font-family: serif;
font-size: 1.2em;
font-style: normal;
color: #000;
margin: 2% 0;  
}
.brown{
 font-size: 1.1em;       
}

.S-link{
width: 30%;
margin:-0.1% 36% 0 36%;
padding: 10px;
}
.ilink{
width: 15%;
margin-left: 41%;
padding: 10px;
}   
}
@media screen and (max-width: 1440px){
#header{
 margin-bottom: 0;       
}
.heading{
  font-size: 3em;      
}
.sub-head{
 font-size: 1.4em;       
}
.brand{
 width: 13%;
}
.page{
 font-size: 2.1em;
margin: 2%;
}
.caption{
 font-size: 1.2em;
 margin: 0 0 0 3%;
}
.red{
  font-size: 1.5em;      
}
#display{
width: 90%;
 padding: 30px;       
}
.DIS{
 font-size: 1.5em;
margin: 8% 1%;
}
.face{
float: left;
width: 88%;
margin: 2% 6% 0 6%;
}
.IBfeatures{
 width: 70%;
margin: 2% 0 0 5%;
}
#imaging-rws{
position: absolute;
width: 24%;
margin: 0% 2% 0 62%;
}
.ti-rws img{
width: 100%;
margin:0;        
}
.ti-rws p{
 font-size: 1em;       
}
.l-content p{
 font-size: 1em;       
}
.summary p{
font-size: 1.1em;        
}
.ilink{
 width: 16%;
margin: auto;
}
.ilink a{
 font-size: 0.8em;       
}
.S-link{
 width: 30%;
margin-left: 35%;
}
.S-link a{
 font-size: 0.8em;       
}
} 
@media screen and (max-width: 1280px){
.brand{
 width: 14%;
}
.vid{
width: 84%;
grid-column: 1/2;
display: grid;
grid-template-columns: 46% 46%;
margin-left: 12%;
}
.vid> div{
padding: 20px;
margin: 1%;
}
.box1{
grid-column:1/3;
grid-row:1/2;
}
.box2{
 grid-column: 2/1       
}
.box3{
 grid-column: 2/2;       
}
.box2 video{
width: 80%;
margin: 1% 8%;
}
.box3 video{
width: 80%;
margin: 1% 8%;
}

.ccc-products img{
 margin: 1% 10%;       
}
.ccc-products p{
 font-size: 0.9em;       
}
.red{
1.3em;        
}
.S-link a{
text-align: center;
font-size: 0.7em;
}
.ilink a{
text-align: center;
font-size: 0.7em; 
}
}

@media screen and (max-width: 1024px){
#header{
height: 150px;        
}
.brand{
 width: 14%;
}
.heading{
font-size: 2.2em;
margin: 2% 2% 0 5%;
}
.sub-head{
 font-size: 1.2em;       
}
.page{
 font-size: 1.6em;
margin: 2%;
}
.caption{
 font-size: 1em;
 margin: 0 0 0 2%;
}
.red{
 1.2em;       
}
.blue{
font-size: 1.1em;
}
.dcc-content{
display: block;
width: 90%;
margin: 2% 5%;
}
.dcc-features{
display: block;
width: 90%;
margin: 2% 5%;
}
.ccc-products{
 width: 25%; 
}
.ccc-products p{
 font-size: 0.8em;       
}
.ccc-products img{
 margin: 1% 10%;       
}
.l-features{
 display: block;
width: 90%;
margin: 2% 5%;
}
#dcc-note img{
 width: 35%;       
}
.l-content{
 display: block;
width: 90%;
margin: 2% 5%;
}
.vid{
      
}
.vid> div{
padding: 5px;
margin-right: 2%;
}
.box2 video{
width: 98%;
margin: 1%;
}
.box3 video{
width: 98%;
margin: 1%;
}
#imaging-rws{        
}
.eg-content p{
font-size: 1.1em;
}

aside p{
font-size: 1.1em;        
}
.summary{
 width: 90%;
font-size: 0.9em;
}
.S-link{
 width: 50%;
margin-left: 24%;
}
.ilink{
 width: 20%;
margin: auto;
}
.ti-link a{
 text-decoration: none;
text-align: center;
font-size: 0.8em;   
}
}