/* 01 TezSign*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

.tezsigndsp {
    font-family: 'Manrope', sans-serif;
}

.tezsigndsp .dstxt {
    font-weight: 600;
}

.tezsign .platecolor-01, .tezsign .platecolor-02, .tezsign .platecolor-03, .tezsign .platecolor-04, .tezsign .platecolor-05 {
  width: 20% !important;
  height: 80px !important;
  padding: 10px;
}

.tezsign .platecolor-01 {
  background-color: #F59700;         
} 
.tezsign .platecolor-02 {
  background-color: #4C4C4C;         
}  
.tezsign .platecolor-03 {
  background-color: #000000;                
} 
.tezsign .platecolor-04 {
  background-color: #D3D3D3;              
}  

.tezsign .platecolor-05 {
  background-color: #FFFFFF;              
} 

/* 02 IP8Value*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.ip8values {
    font-family: 'Montserrat', sans-serif;
}

.ip8values .dstxt {
    font-weight: 600;
}

.ip8value .platecolor-01, .ip8value .platecolor-02, .ip8value .platecolor-03, .ip8value .platecolor-04, .ip8value .platecolor-05 {
  width: 20% !important;
  height: 80px !important;
  padding: 10px;
}

.ip8value .platecolor-01 {
  background-color: #34A853;         
} 
.ip8value .platecolor-02 {
  background-color: #FFB300;         
}  
.ip8value .platecolor-03 {
  background-color: #4285F4;                
} 
.ip8value .platecolor-04 {
  background-color: #EA4335;              
}  

.ip8value .platecolor-05 {
  background-color: #0E3348;              
}  

/* 03 Verazt Security*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.verazts {
    font-family: 'Raleway', sans-serif;
}

.verazts .dstxt {
    font-weight: 600;
}

.verazt .platecolor-01, .verazt .platecolor-02, .verazt .platecolor-03, .verazt .platecolor-04, .verazt .platecolor-05 {
  width: 20% !important;
  height: 80px !important;
  padding: 10px;
}

.verazt .platecolor-01 {
  background-color: #233454;         
} 
.verazt .platecolor-02 {
  background-color: #275DC5;         
}  
.verazt .platecolor-03 {
  background-color: #68BDFF;                
} 
.verazt .platecolor-04 {
  background-color: #8B8B8B;              
}  

.verazt .platecolor-05 {
  background-color: #8C41A4;              
}  

/* 04 MECAnywhere*/

@import url('https://fonts.googleapis.com/css2 family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

.mec {
   font-family: "Sarabun", sans-serif;
}

.mec .dstxt {
    font-weight: 600;
}

.mec .platecolor-01, .mec .platecolor-02, .mec .platecolor-03, .mec .platecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.mec .platecolor-01 {
  background-color: #6485FF;         
} 
.mec .platecolor-02 {
  background-color: #AC239E;         
}  
.mec .platecolor-03 {
  background-color: #6A33FE;                
} 
.mec .platecolor-04 {
  background-color: #000000;              
}  

/* 04 ForkCloud*/
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');

.forkds {
    font-family: 'Heebo', sans-serif;
}

.forkds .dstxt {
    font-weight: 600;
}

.forkcloud .platecolor-01, .forkcloud .platecolor-02, .forkcloud .platecolor-03, .forkcloud .platecolor-04, .forkcloud .platecolor-05 {
  width: 20% !important;
  height: 80px !important;
  padding: 10px;
}

.forkcloud .platecolor-01 {
  background-color: #3E3FC8;         
} 
.forkcloud .platecolor-02 {
  background-color: #6049A5;         
}  
.forkcloud .platecolor-03 {
  background-color: #A966F0;                
} 
.forkcloud .platecolor-04 {
  background-color: #1075E0;              
}  

.forkcloud .platecolor-05 {
  background-color: #3BC9C9;              
}  


/* 05 Octo-Purse*/

.octopurse img {
  width: 100%; 
  height: auto;     
}

.octopurseds {
    font-family: 'Outfit', sans-serif;
}

.octopurseds .dstxt {
    font-weight: 600;
}

.octopursebox {
  margin: 1rem 1rem 1rem 0;    
}

.octopursebox .small {
  line-height: 1rem !important;
}

.octopursebox .designboxcolor {
  width: 120px;
  height: 120px;    
  border-radius: 10%; 
  margin: 5px !important; 
  text-align:center;
  background: #f3f3f3;    

}

.octopurse .colorplatecolor-01, .octopurse .colorplatecolor-02, .octopurse .colorplatecolor-03, .octopurse .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.octopurse .colorplatecolor-01 {
  background-color: #1C1C2C;         
} 
.octopurse .colorplatecolor-02 {
  background-color: #F29380;         
}  
.octopurse .colorplatecolor-03 {
  background-color: #4BAF9C;                
} 
.octopurse .colorplatecolor-04 {
  background-color: #fafafa;              
}  


/* 07 MMask*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

.mmask img {
  width: 100%; 
  height: auto;     
}

.mmaskds {
    font-family: 'Outfit', sans-serif;
}

.mmaskds .dstxt {
    font-weight: 600;
}

.mmaskbox {
  margin: 1rem 1rem 1rem 0;    
}

.mmaskbox .small {
  line-height: 1rem !important;
}

.mmaskbox .designboxcolor {
  width: 120px;
  height: 120px;    
  border-radius: 10%; 
  margin: 5px !important; 
  text-align:center;
  background: #f3f3f3;    

}

.mmask .colorplatecolor-01, .mmask .colorplatecolor-02, .mmask .colorplatecolor-03, .mmask .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.mmask .colorplatecolor-01 {
  background-color: #132836;         
} 
.mmask .colorplatecolor-02 {
  background-color: #ea5173;         
}  
.mmask .colorplatecolor-03 {
  background-color: #F4928B;                
} 
.mmask .colorplatecolor-04 {
  background-color: #E0E0E0;              
} 

.map { 
  width: 100%;
  min-height: 600px;
  background: url('../images/project/aam/map.png') no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

.green{
   background-color: #c1dca8 !important;
}

.yellow{
   background-color: #e8e49d !important;
}

.purple{
   background-color: #e3c4e0 !important;
}

.blue{
   background-color: #b6d7de !important;
}

.gallery {
    height: 100%;
}

.smalltxt {
    line-height: 18px !important;
}

.h-divider{
 text-align: center;
 margin-top:10px;
 margin-bottom:10px;
 height:1px;
 width:20px;
 border-top:3px solid #333;
}

/* 08 UrbanFarm*/

.empathymap { 
  width: 100%;
  min-height: 900px;
  background: url('../images/project/urbanzone/map.png') no-repeat;
  background-size: contain;
  background-position: 50% 50%;    
}

.wireframe-bg {
    background: #fafafa;
    min-height: 300px;
}

.wireframe-bg img {
    width: 100% !important;
    height: auto !important;
}

/* 10 OneKey*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');

.onekeyds {
    font-family: 'Manrope', sans-serif;
}

.onekeyds .dstxt {
    font-weight: 600;
}

.onekeybox {
  margin: 1rem 1rem 1rem 0;    
}

.onekeybox .small {
  line-height: 1rem !important;
}

.onekeybox .designboxcolor {
  width: 120px;
  height: 120px;    
  border-radius: 10%; 
  margin: 5px !important; 
  text-align:center;
  background: #f3f3f3;    

}

@media (min-width: 320px) and (max-width: 667px) {
.onekeybox .designboxcolor {
      margin-left: 35% !important;
}     
}

.onekey .colorplatecolor-01, .onekey .colorplatecolor-02, .onekey .colorplatecolor-03, .onekey .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.onekey .colorplatecolor-01 {
  background-color: #ec681c;         
} 
.onekey .colorplatecolor-02 {
  background-color: #1C2833;         
}  
.onekey .colorplatecolor-03 {
  background-color: #5d6a77;                
} 
.onekey .colorplatecolor-04 {
  background-color: #fbe26f;              
} 

.circle {
  height: 60px;
  width: 60px;    
  border: 1px solid #000;
  border-radius: 50%;
}

.circle img {
  width: 100%;
  height: auto;
}

.tools img{
  width: 35% !important; 
  height: auto !important;    
}

hr.oklist {
  width: 80%;
  border-top: 1px solid #000;
}

.listing, .typography {
  text-align: right;  
}

.listing .col-2 {
  margin-left: -25px;    
}

.listing img {
  width: 100%;
  height: auto;
}


@media (min-width: 320px) and (max-width: 736px) {
.listing, .typography {
  text-align: left;   
}
    
.typography {
  margin-top: 1.5rem;
}

.listing .col-2 {
  margin-left: 0px;    
}    
    
}


.colorbox {
  margin: 0.5rem 0.5rem 0.5rem 0;    
}

.colorbox .boxcolor-01, .colorbox .boxcolor-02, .colorbox .boxcolor-03, .colorbox .boxcolor-04, .colorbox .boxcolor-05 {
  height: 25px;
  width: 25px;
  border-radius: 20%; 
  margin: 3px;    
}
.colorbox .boxcolor-01 {
  background-color: #ff6600;
  margin-left: 0;
} 
.colorbox .boxcolor-02 {
  background-color: #1c2833;   
}  
.colorbox .boxcolor-03 {
  background-color: #364655;   
} 
.colorbox .boxcolor-04 {
  background-color: #5a6a78;   
} 
.colorbox .boxcolor-05 {
  background-color: #ffffff;  
  border: 1px solid #e1e1e1;    
} 

hr.line {
  border-top: 1px dashed #f0a33b;
  margin-top: 6px;
  width:95%;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  
  border-left: 6px solid #f0a33b;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; 
  
  border-right:6px solid #f0a33b; 
}

.topmap {
  margin-top: -200px;
}

@media (min-width: 668px) and (max-width: 1200px) {
.topmap {
  margin-top: -150px;
}
    
}

@media (min-width: 320px) and (max-width: 667px) {
.topmap {
  margin-top: -110px;
}
    
}

.screen01 {
  margin-top: -35rem;
}


.topmap img, .screen01 img, .screen02 img {
  width: 100%;
  height: auto;  
}


@media (min-width: 320px) and (max-width: 991px) {
.screen01 {
  margin-top: 0;
}
    
.screen01 img, .screen02 img {
  width: 95%;
  height: auto;  
  margin-left: -35px;    
}    
    
}

.onekey .desc {
  font-weight: 300;
  text-align: left;
  color: #c8c9cb;
  background: #1c2833;
  padding: 0 3rem 3rem 3rem; 
  border-radius: 0  0 80px 0;  
  margin: 0;  
}

.appicons {
  margin-top: -16rem;    
  padding: 0 3rem 3rem 3rem;     
}

.app-icons-01, .app-icons-02, .app-icons-03 {
  margin: 1rem 1.5rem 1rem 1.5rem;
}

.app-icons-01 img {
  width: 100%;
}  

.app-icons-02 img {
  width: 60%;
  
}  

.app-icons-03 img {
  width: 30%; 
}     

.app-icons-02 {
  margin-left: 0rem;         
} 

.app-icons-03 {
  margin-left: -4rem;         
} 
  

@media (min-width: 992px) and (max-width: 1199px) {
  
.appicons {
  margin-top: -7rem;       
}
    
.app-icons-01, .app-icons-02, .app-icons-03 {
  margin: 0.8rem;  
}  
    
.app-icons-01 img {
  width: 80%;
}  

.app-icons-02 img {
  width: 40%;
  
}  

.app-icons-03 img {
  width: 20%; 
}     

.app-icons-02 {
  margin-left: -1rem;         
} 

.app-icons-03 {
  margin-left: -5rem;         
}     
    
}

@media (min-width: 452px) and (max-width: 991px) {
.appicons {
  margin-top: -2rem;    
}
    
.app-icons-01, .app-icons-02, .app-icons-03 {
  margin: 0.5rem; 
}  
    
.app-icons-01 img {
  width: 80%;
}  

.app-icons-02 img {
  width: 40%;
  
}  

.app-icons-03 img {
  width: 20%; 
}     

.app-icons-02 {
  margin-left: -1rem;         
} 

.app-icons-03 {
  margin-left: -5rem;         
}          
    
}

@media (min-width: 375px) and (max-width: 451px) {
.appicons {
  margin-top: 0rem;    
}
    
.app-icons-01, .app-icons-02, .app-icons-03 {
  margin: 0.5rem; 
}  
    
.app-icons-01 img {
  width: 50%;
}  

.app-icons-02 img {
  width: 30%;
  
}  

.app-icons-03 img {
  width: 18%; 
}     

.app-icons-02 {
  margin-left: -4.5rem;         
} 

.app-icons-03 {
  margin-left: -6.5rem;         
}          
    
}

@media (min-width: 320px) and (max-width: 374px) {
.appicons {
  margin-top: 0rem;    
}
    
.app-icons-01, .app-icons-02, .app-icons-03 {
  margin: 0.5rem; 
}  
    
.app-icons-01 img {
  width: 25%;
}  

.app-icons-02 img {
  width: 18%;
  
}  

.app-icons-03 img {
  width: 8%; 
}     

.app-icons-02 {
  margin-left: -7rem;         
} 

.app-icons-03 {
  margin-left: -7.5rem;         
}           
    
}

.iconography {
  height: 60px;
  width: 60px;    
  background: #5a6a78;
  border-radius: 50%;
  margin: 0.5rem;
  padding: 0.3rem;
}

.iconography img {
  width: 100%;
  height: auto;
}


/* 05 Snappar*/

.opensans {
  line-height: 30px;    
}

.colorbox .boxcolor-06, .colorbox .boxcolor-07, .colorbox .boxcolor-08, .colorbox .boxcolor-09, .colorbox .boxcolor-10 {
  height: 25px;
  width: 25px;
  border-radius: 20%; 
  margin: 3px;    
}
.colorbox .boxcolor-06 {
  background-color: #ff2b2b;
  margin-left: 0;
} 
.colorbox .boxcolor-07 {
  background-color: #1c2833;   
}  
.colorbox .boxcolor-08 {
  background-color: #e6e6e6;   
} 
.colorbox .boxcolor-09 {
  background-color: #ffe468;   
} 
.colorbox .boxcolor-10 {
  background-color: #ffffff;  
  border: 1px solid #e1e1e1;    
} 

.snappar .masthead {
  margin-top: -21rem;      
}
.snappar .masthead img, .flowchart img { 
  width: 100%;
  height: auto;
}

@media (min-width: 992px) and (max-width: 1200px) {
.snappar .masthead {
  margin-top: -17rem;  
}
    
}

@media (min-width: 668px) and (max-width: 991px) {
.snappar .masthead {
  margin-top: -9rem;  
}
    
}

@media (min-width: 320px) and (max-width: 667px) {
    
.typography {
  padding-top: 0.5rem;
}
    
.snappar .masthead {
  margin-top: -5rem;  
}
    
}

.snappar .desc {
  margin-top: -8rem;      
}

@media (min-width: 320px) and (max-width: 991px) {
.snappar .desc {
  margin-top: 0;      
}    
}

.snappar .stages {
  margin-top: 16rem;
}

@media (min-width: 320px) and (max-width: 991px) {
.snappar .stages {
  text-align: left;  
  margin-top: 0rem;    
}    
}

/* 06 HWZ*/
.hwz .colorplatecolor-01, .hwz .colorplatecolor-02, .hwz .colorplatecolor-03, .hwz .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;  
}
.hwz .colorplatecolor-01 {
  background-color: #333333;
  margin-left: 0;
} 
.hwz .colorplatecolor-02 {
  background-color: #89c439;   
}  
.hwz .colorplatecolor-03 {
  background-color: #d5d5d5;   
} 
.hwz .colorplatecolor-04 {
  background-color: #f5f4f3;    
} 


.colorbox .boxcolor-11, .colorbox .boxcolor-12, .colorbox .boxcolor-13, .colorbox .boxcolor-14 {
  height: 25px;
  width: 25px;
  border-radius: 20%; 
  margin: 3px;    
}
.colorbox .boxcolor-11 {
  background-color: #333333;
  margin-left: 0;
} 
.colorbox .boxcolor-12 {
  background-color: #75af26;   
}  
.colorbox .boxcolor-13 {
  background-color: #ececec;   
} 
.colorbox .boxcolor-14 {
  background-color: #ffffff;  
  border: 1px solid #e1e1e1;    
} 

.avatar {
    
}

.avatar img {
  width: 100%;    
}

.mobile-screen {
  width: 100%;  
  text-align: center;
  background: #75af26;  
  border-radius: 0 100px; 
  margin-bottom: -25rem; 
}

.hwz .screen {
  margin-top: 5rem;
}

.hwz .screen img {
  width: 100%; 
}

@media (min-width: 320px) and (max-width: 667px) {
    
.avatar {
  padding-top: 0rem;    
}
    
.mobile-screen {
  padding-top: 4rem;
} 
    
.hwz .screen img {
  width: 80%; 
  margin-left: -2rem;    
}    
    
}

@media (min-width: 668px) and (max-width: 991px) {
.hwz .screen img {
  margin-left: 2rem;    
} 
    
}

/* 07 Techawards*/

.techawards .colorplatecolor-01, .techawards .colorplatecolor-02, .techawards .colorplatecolor-03, .techawards .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.techawards .colorplatecolor-01 {
  background-color: #333333;        
} 
.techawards .colorplatecolor-02 {
  background-color: #fec110;         
}  
.techawards .colorplatecolor-03 {
  background-color: #fa4800;                
} 
.techawards .colorplatecolor-04 {
  background-color: #dedede;              
} 

.web, .mobile {
  margin-top: 3rem;    
}

.masthead img, .web img {
  width: 100%;    
}

.items01 {
  margin-top: 10rem; 
  width: 60px;
}

.items02 {
  margin-top: 1rem; 
  width: 100px;
}

.items03 {
  margin: 1rem 0 0 15rem; 
  width: 100px;
}

.items04 {
  margin-top: 1rem; 
  width: 50px;
}

.items05 {
  margin-top: 5rem; 
  width: 80px;
}

@media (min-width: 668px) and (max-width: 991px) {
    
.items01 {
  margin: 10rem 0 0 -0.5rem; 
  width: 30px;
} 
    
.items02 {
  margin: 3rem 0 0 0; 
  width: 90px;
}    
    
.items03 {
  margin: 15rem 0 0 -3rem; 
  width: 70px;
}
    
.items05 {
  margin-top: 5rem; 
  width: 60px;
}    
    
}


@media (min-width: 320px) and (max-width: 667px) {
    
.web, .mobile {
  margin-top: 1rem;    
}    
    
.items01 {
  margin: -8rem 0 0 15rem; 
  width: 30px;
}

.items02 {
  margin: 0 0 0 2rem; 
  width: 60px;
}

.items03 {
  margin: -3rem 0 0 10rem; 
  width: 80px;
}

.items04 {
  margin: 3rem 0 0 -2rem; 
  width: 30px;
}

.items05 {
  margin: 0rem 0 0 10rem; 
  width: 50px;
}    
    

}

/* 05 Xmas*/
.colorbox .boxcolor-15, .colorbox .boxcolor-16, .colorbox .boxcolor-17 {
  height: 25px;
  width: 25px;
  border-radius: 20%; 
  margin: 3px;    
}
.colorbox .boxcolor-15 {
  background-color: #d6123e;
  margin-left: 0;
} 
.colorbox .boxcolor-16 {
  background-color: #ebc747;   
}  
.colorbox .boxcolor-17 {
  background-color: #ffffff;  
  border: 1px solid #e1e1e1;    
} 

.photo img {
  width: 100%;
}

/* 08 LG*/
.website {
  margin-top: -8rem;   
}

.website img {
  width: 88.5%;
  height: auto;
}

.games-photo {
  margin-left: -0.5rem;  
}

.games-photo img {
  width: 100%;
  height: auto;    
}

@media (min-width: 992px) and (max-width: 1199px) {
    
.games-photo img {
  width: 76%;
  height: auto;       
}
}

@media (min-width: 768px) and (max-width: 991px) {
 
.website img {
  width: 95%;
  height: auto;
}
    
.games-photo img {
  width: 62.5%;
  height: auto;       
}    
    
}

@media (min-width: 576px) and (max-width: 767px) {
    
.website {
  margin-top: 0;   
  margin-left: 12%;     
}    
  
.website img, .games-photo img {
  width: 100%;
  height: auto;
}
    
.games-photo {
  margin-left: 12%;  
}
    
}

@media (min-width: 320px) and (max-width: 575px) {
    
.website {
  margin-top: 0;   
}    
  
.website img, .games-photo img {
  width: 100%;
  height: auto;
}
    
.games-photo {
  margin-left: 0;  
}
          
}

/* 09 NEC */

.nec img, .mascot img {
  width: 100%; 
  height: auto;    
}

.necbg {
  padding-left: 2.5rem;
  background: #ffc602;    
}

.nec .desc {
  margin-top: -12rem;
}

@media (min-width: 320px) and (max-width: 991px) {

.nec .desc {
  margin-top: 0;
}
    
}

/* 10 Canon */

.canon .content {
  margin-right: -15px;
}

.canon img {
  width: 100%; 
  height: auto;    
}

.topbg {
  width: 100%;  
  text-align: center;
  background: #000000;  
  border-radius: 0 80px; 
  padding: 3rem;    
}

.canon .screen {
  padding: 1rem 1rem 1rem 0.8rem;    
}


/* 11 Panasonic */

.panasonic img {
  width: 100%; 
  height: auto;    
}

.panasonic .text {
  margin-top: 13rem;      
}

@media (min-width: 992px) and (max-width: 1199px) {
.panasonic .text {
  margin-top: 11rem;      
}  
}

@media (min-width: 668px) and (max-width: 991px) {
.panasonic .text {
  margin-top: 7rem;      
}    
    
}

@media (min-width: 320px) and (max-width: 667px) {
.panasonic .text {
  margin-top: 0;      
}    
    
}

/* 12 China Ce Shi */
.chinaceshi img, .urbanfarm img, .aam img, .waltzbot img {
  width: 100%;
  height: auto;
}

.colorbox .boxcolor-18, .colorbox .boxcolor-19, .colorbox .boxcolor-20, .colorbox .boxcolor-21, .colorbox .boxcolor-22 {
  height: 25px;
  width: 25px;
  border-radius: 20%; 
  margin: 3px;    
}
.colorbox .boxcolor-18 {
  background-color: #bb3b5c;
  margin-left: 0;
} 
.colorbox .boxcolor-19 {
  background-color: #3a1919;   
}  
.colorbox .boxcolor-20 {
  background-color: #21304d;   
} 
.colorbox .boxcolor-21 {
  background-color: #ffcc00;   
} 
.colorbox .boxcolor-22 {
  background-color: #ffffff;  
  border: 1px solid #e1e1e1;    
}

/* 13 VDEx*/

.vdex img {
  width: 100%; 
  height: auto;     
}

.designbox {
  margin: 1rem 1rem 1rem 0;    
}

.designbox .small {
  line-height: 1rem !important;
}

.designbox .designboxcolor-01, .designbox .designboxcolor-02, .designbox .designboxcolor-03, .designbox .designboxcolor-04, .designbox .designboxcolor-05, .designbox .designboxcolor-06 {
  width: 120px;
  height: 120px;    
  border-radius: 10%; 
  margin: 5px; 
  text-align:center;

}

.Persona .img {
    width: 100% !important;
    height: auto;
}

@media (min-width: 320px) and (max-width: 667px) {
.designbox .designboxcolor-01, .designbox .designboxcolor-02, .designbox .designboxcolor-03, .designbox .designboxcolor-04, .designbox .designboxcolor-05, .designbox .designboxcolor-06 {
      margin-left: 35%;
}  
    
.designtext {
    text-align: center;      
}    
}

.designbox .designboxcolor-01 img {
    width: 100% !important;
    height: auto;   
}

.designbox .designboxcolor-02 img, .designbox .designboxcolor-03 img, .designbox .designboxcolor-04 img, .designbox .designboxcolor-05 img, .designbox .designboxcolor-06 img {
    width: 50% !important;
    height: auto;  
}

.designbox .designboxcolor-01 {
  border: 2px solid #e1e1e1;      
} 
.designbox .designboxcolor-02 {
  background-color: #ffe16b;         
}  
.designbox .designboxcolor-03 {
  background-color: #a7a0e0;                
} 
.designbox .designboxcolor-04 {
  background-color: #fa86b7;              
} 
.designbox .designboxcolor-05 {
  background-color: #5cd9b4;            
}     
.designbox .designboxcolor-06 {
  background-color: #ff9e7e;            
} 


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


.robotods {
  font-family: 'Roboto', sans-serif !important; 
}

.robotods .dstxt {
  font-weight: 500;
}

.colorplate .colorplatecolor-01, .colorplate .colorplatecolor-02, .colorplate .colorplatecolor-03, .colorplate .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.colorplate .colorplatecolor-01 {
  background-color: #ee9722;         
} 
.colorplate .colorplatecolor-02 {
  background-color: #282a71;         
}  
.colorplate .colorplatecolor-03 {
  background-color: #FFF0A9;                
} 
.colorplate .colorplatecolor-04 {
  background-color: #EEEEEE;              
}     

/* 14 Waltzbot */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

.waltzbotds {
    font-family: 'Open Sans', sans-serif;
}

.waltzbotds .dstxt {
    font-weight: 600;
}

.waltzbot .colorplatecolor-01, .waltzbot .colorplatecolor-02, .waltzbot .colorplatecolor-03, .waltzbot .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.waltzbot .colorplatecolor-01 {
  background-color: #13313f;         
} 
.waltzbot .colorplatecolor-02 {
  background-color: #33acaa;         
}  
.waltzbot .colorplatecolor-03 {
  background-color: #df8598;                
} 
.waltzbot .colorplatecolor-04 {
  background-color: #fef8d4;              
} 

/* 15 UrberZone */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

.urberfarmds {
    font-family: 'Manrope', sans-serif;
}

.urberfarmds .dstxt {
    font-weight: 600;
}

.urberboxmain img {  
  width: 75% !important;    
}


.urberbox img {
  width: 50%; 
  height: auto;     
}

.urberbox {
  margin: 1rem 1rem 1rem 0;    
}

.urberbox .small {
  line-height: 1rem !important;
}

.urberbox .designboxcolor {
  width: 120px;
  height: 120px;    
  border-radius: 10%; 
  margin: 5px !important; 
  text-align:center;
  background: #f3f3f3;    

}

@media (min-width: 320px) and (max-width: 667px) {
.urberbox .designboxcolor {
      margin-left: 35% !important;
}     
}

.urberfarm .colorplatecolor-01, .urberfarm .colorplatecolor-02, .urberfarm .colorplatecolor-03, .urberfarm .colorplatecolor-04 {
  width: 25% !important;
  height: 80px !important;
  padding: 10px;
}

.urberfarm .colorplatecolor-01 {
  background-color: #9ac14d;         
} 
.urberfarm .colorplatecolor-02 {
  background-color: #646664;         
}  
.urberfarm .colorplatecolor-03 {
  background-color: #ff6a85;                
} 
.urberfarm .colorplatecolor-04 {
  background-color: #daeacf;              
}