/*****************************************/    
/*****   COLOUR PALLETE   ******/
/*****************************************/  
.my-colour-palette-desktop { }
.my-colour-palette-mobile { }
@media only screen and (orientation: portrait) and (max-width:400px) {.my-colour-palette-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (max-width:600px) {.my-colour-palette-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}

@media only screen and (orientation: portrait) and (min-width:401px) {.my-colour-palette-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (min-width:601px)  {.my-colour-palette-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}




.main-circle-text {
display:inline-block;
width:50px;
height:50px;
color:#333333;
font-size:10px;
text-align:justify;
border: 0px solid red;
vertical-align:top;
}

.main-circle {
display:inline-block;
border: 1px solid #333333;
width: 50px;
height: 50px;
border-radius: 50%;
vertical-align:baseline;
text-align:center;

}



.main-circle-text-mobile {
color:#333333;
font-size:10px;
height:80px;
width:70px;
border:0px solid red;
text-align:center;
vertical-align:top;
}


.main-circle-mobile {
display:inline-block;
border: 1px solid #333333;
width: 35px;
height: 35px;
border-radius: 50%;
vertical-align:baseline;
text-align:center;
color:#333333;
font-size:10px;
}

@media only screen and (max-width:768px) {.main-circle {width:40px; height:40px;}}



/********************************/    
/*****      MY FONT      ******/
/********************************/
    @font-face {
      font-family: 'Onest-Regular'; /* Choose a name for your font */
      src: url('/fonts/Onest-Regular.ttf'); /* Path to your font file on the server */
      format('truetype'); /* Specify the font format */
    }



/********************************/    
/*****   MY TICK SM   ******/
/********************************/
.my-tick-small {
color:#8DB808;
    }


/********************************/    
/*****      MY BG      ******/
/********************************/

.my-bg-gray {
background-color:#F2F3F5;
}


/********************************/    
/*****      BANNERS    ******/
/********************************/   

.my-banner-production {
	background: url(../images/printshop.jpg);
}

.my-banner-about {
	background: url(../images/folded-tshirts.jpg);
}

.my-banner-catalogue {
	background: url(../images/printshop.jpg);
	margin:60px 0px 80px 0px;
}

.my-banner .container {
    position: relative;
    z-index: 2;
	height:250px;
}

.my-banner h3  {
	padding-top:80px; 
    color: #FFFFFF;
    font-size: 35px;
    font-family:'Onest-Regular', Arial, sans-serif;
}

.my-banner p {
line-height:normal; 
font-size:20px;
    color: #FFFFFF;
}



.my-banner-production,  .my-banner-about, .my-banner-catalogue {
    position: relative;
	background-size: cover;
    background-attachment: fixed;
	background-repeat: no-repeat;
}




/********************************/    
/*****      CIRCLES     ******/
/********************************/   


.circle-white {background-color:#FDFDFD;}
.circle-creme {background-color:#FCFBED;}
.circle-light-gray {background-color:#e2dedb;}   /*  MTC =  e0dfdf;  MTO= dedddc;  MLC = e3e2dc;  MLO = e6e5e4; WTC = f5f5f5 */
.circle-gray-creme {background-color:#e4d8cb;}   /*   e4d8cb   MLC = d4c3ad; MTO = d6cdc5;    MLO = ddccb9; MTC = ddccb9 -10 ÿðêîñòü  WTC = ddccb9 +5 ÿðêîñòü*/
.circle-beije {background-color:#e8dbc3;}  /* SRGB WTC = fbe8ce; MTO = dfcdb5;  MLC\ & MLO = f2dfc5; MTC = f2dfc5 & -8 ÿðêîñòü*/
.circle-dusty-rose {background-color:#c8ada8;} /*c9a8a1     c8ada8 */
.circle-coffee {background-color:#aa9485;}
.circle-chocolate {background-color:#5B4338;} 
.circle-graphite {background-color:#585B5D;}  
.circle-black {background-color:#1c1c1c;}  


.circle-mint {background-color:#C0ECEB;} 
.circle-gray-blue {background-color:#b1c6cd;} 
.circle-olive {background-color:#a4c4b5;} 
.circle-emerald {background-color:#056663;}
.circle-marsh {background-color:#879c67;} 
.circle-khaki {background-color:#989c6f;} 
.circle-green {background-color:#096536;} 
.circle-dark-green {background-color:#242306;}
.circle-very-peri {background-color:#5a5e9c;}
.circle-navy {background-color:#232c44;} 


.circle-ocher {background-color:#d4b149;}
.circle-mustard {background-color:#9e7438;} 
.circle-orange {background-color:#eb7127;}
.circle-coral {background-color:#d83737;} 
.circle-red {background-color:#a41317;}
.circle-fuchsia {background-color:#d92868;}
.circle-lilac {background-color:#c8b5d1;}
.circle-dark-lilac {background-color:#523747;}
.circle-bordo {background-color:#4f0f1b;}
.circle-eggplant {background-color:#38212e;}



/********************************/    
/*****     GREEN DIV     ******/
/********************************/    
.main-img-green {
z-index:10px;
background-image: url('/images/icons/icon-warehouse-md.png'); 
background-repeat: no-repeat;
background-size: 180px 180px;
background-position: 100% 100%;
}

@media only screen and (max-width:768px) {
.main-img-green 
{
background-image: url('/images/icons/icon-warehouse-md.png'); 
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 100% 50%;
}}

.main-bg-green {
z-index:1px;
background-color: #8DB808; 
padding:60px;
}

@media only screen and (max-width:768px) {.main-bg-green {padding: 30px;}}

.main-btn-green {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
}

.main-btn-green i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-green:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #98C60A;
    border: 2px solid #2E0202 !important;
}

.main-btn-green:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}


/********************************/    
/*****    YELLOW DIV    ******/
/********************************/    

.main-img-yellow {
z-index:10px;
background-image: url('/images/icons/icon-sewing-md.png'); 
background-repeat: no-repeat;
background-size: 180px 180px;
background-position: 100% 100%;
}

@media only screen and (max-device-width:768px) {
.main-img-yellow 
{background-image: url('/images/icons/icon-sewing-md.png'); 
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 100% 50%;
}}

.main-bg-yellow {
z-index:1px;
background-color: #FEBA19; 
padding:60px;
}

@media only screen and (max-width:768px) {.main-bg-yellow {padding: 30px;}}


.main-btn-yellow {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
}

.main-btn-yellow i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-yellow:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #FFBF37;
    border: 2px solid #2E0202 !important;
}

.main-btn-yellow:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}


/********************************/    
/*****        RED DIV       ******/
/********************************/    

.main-img-red {
z-index:10px;
background-image: url('/images/icons/icon-print-md.png'); 
background-repeat: no-repeat;
background-size: 180px 180px;
background-position: 100% 100%;
}

@media only screen and (max-width:768px) {
.main-img-red {
background-image: url('/images/icons/icon-print-md.png'); 
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 100% 50%;
}}

.main-bg-red {
z-index:1px;
background-color: #D7412E; 
padding:60px;
}

@media only screen and (max-width:768px) {.main-bg-red {padding: 30px;}}

.main-btn-red {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
}

.main-btn-red i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-red:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #DB513F;
    border: 2px solid  #2E0202 !important;
}

.main-btn-red:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}


/********************************/    
/*****       BLUE DIV      ******/
/********************************/    

.main-img-blue {
z-index:10px;
background-image: url('/images/icons/icon-embroidery-md.png'); 
background-repeat: no-repeat;
background-size: 180px 180px;
background-position: 100% 100%;
}

@media only screen and (max-width:768px) {
.main-img-blue 
{
background-image: url('/images/icons/icon-embroidery-md.png'); 
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 100% 50%;
}}

.main-bg-blue {
z-index:1px;
background-color: #4EBFF4; 
padding:60px;
}

@media only screen and (max-width:768px) {.main-bg-blue {padding: 30px;}}

.main-btn-blue {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
}

.main-btn-blue i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-blue:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #60C7F6;
    border: 2px solid #2E0202 !important;
}

.main-btn-blue:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}





/****************************************************/    
/*****     WHITE BUTTON FOOTER    ******/
/****************************************************/    


.main-btn-mob-footer {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #FAFAFA;
    border-radius: 10px;
    border: 2px solid #FAFAFA;
    transition: 0.2s ease;
}

.main-btn-mob-footer i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-mob-footer:hover {
	color: #98C60A;
	font-weight:bold;
	text-decoration:none;
    background-color: transparent;
    border: 2px solid #98C60A !important;
}

.main-btn-mob-footer:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}







/********************************/    
/*****    TRIANGLE DIVIDER   ******/
/********************************/    
.triangle-divider {
  width: 100%;
  height: 10px;
  border-left: 50px solid transparent; /* Adjust size as needed */
  border-right: 50px solid transparent; /* Adjust size as needed */
  border-top: 50px solid #F2F3F5; /* Color of the triangle */
}


/********************************/    
/*****    INDEX TITLE    ******/
/********************************/ 
.index-title {
padding:40px 0px 35px 0px;
background-image: url('/images/bg-top-menu.png'); 
background-repeat: repeat-x;
background-size: 50px 95px;
background-position: 0% 0%;
}

@media only screen and (max-width:768px) and (orientation: portrait) {.index-title {margin-top:50px; padding-bottom:30px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.index-title {margin-top:55px; padding-bottom:30px;}}
@media only screen and (min-width:769px) and (orientation: portrait) {.index-title {margin-top:54px; padding-bottom:30px;}}


.my-heading-top {
padding:40px 0px 35px 0px;
background-image: url('/images/bg-top-menu.png'); 
background-repeat: repeat-x;
background-size: 50px 95px;
background-position: 0% 0%;
}

@media only screen and (max-width:768px) and (orientation: portrait) {.imy-heading-top {margin-top:40px; padding-bottom:20px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.imy-heading-top {margin-top:45px; padding-bottom:20px;}}
@media only screen and (min-width:769px) and (orientation: portrait) {.my-heading-top {margin-top:44px; padding-bottom:20px;}}





.my-heading-padding {
padding-bottom: 20px;
}


/********************************/    
/*****     SUB INDEX   ******/
/********************************/   

.sub-index-heading {
background-color:#292929;
text-align:center;

}

.sub-index-heading h1 {
color: #FFFFFF;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:30px;
text-align:center;
}

.sub-index-title {
vertical-align:middle;
padding:27px 0px 27px 0px;
border: 0px solid red;
}



@media only screen and (max-width:992px) and (orientation: portrait) {.sub-index-heading {padding-top:58px;}}
@media only screen and (max-width:1200px) and (orientation: landscape) {.sub-index-heading {padding-top:58px;}}
@media only screen and (max-width:992px) and (orientation: portrait) {.sub-index-title {padding:10px;}}
@media only screen and (max-width:1200px) and (orientation: landscape) {.sub-index-title {padding:10px;}}


@media only screen and (max-width:768px) and (orientation: portrait) {.sub-index-heading h1 {font-size:20px;}}
@media only screen and (min-width:801px) and (orientation: portrait) {.sub-index-heading h1 {font-size:25px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.sub-index-heading h1 {font-size:23px;}}



/********************************************/    
/*****    SUB UNDERHEADING      ******/
/********************************************/

.sub-underheading {
padding:60px 0px 50px 0px; 
border: 0px solid green;
}

@media only screen and (max-width:768px) and (orientation: portrait) {.sub-underheading {padding:30px 0px 30px 0px; border: 0px solid red; }}


/*****************************************/    
/*****    UNDERHEADING      ******/
/*****************************************/
.underheading { 
padding: 0px 140px 15px 140px;
font-size: 19px;
}


@media only screen and (max-width:768px)  {.underheading {padding: 0px 30px 0px 30px; font-size:18px; border: 0px solid blue;}}
@media only screen and (min-width:769px) and (orientation: portrait)  {.underheading {padding: 0px 30px 15px 30px; font-size:18px; 1px solid green;}}





/********************************/    
/*****    MAIN INDEX   ******/
/********************************/    

.main-index-heading h1 {
color: #3B3B3B;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:30px;
}

@media only screen and (max-width:800px) and (orientation: portrait) {.main-index-heading h1 {font-size:20px;}}
@media only screen and (min-width:801px) and (orientation: portrait) {.main-index-heading h1 {font-size:25px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.main-index-heading h1 {font-size:23px;}}



.main-index-heading h2 {
color: #2E0202;
opacity:0.90;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:32px;
font-weight:bold;
}

@media only screen and (max-width:768px) {.main-index-heading h2 {font-size:18px;}}




.main-index h1  {
color: #3B3B3B;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:30px;
}
@media only screen and (max-width:800px) and (orientation: portrait) {.main-index h1 {font-size:21px; font-weight:bold;}}
@media only screen and (min-width:801px) and (orientation: portrait) {.main-index h1 {font-size:25px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.main-index h1 {font-size:23px;}}


.main-index h2 {
color: #2E0202;
opacity:0.90;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:32px;
font-weight:bold;
}

@media only screen and (max-width:768px) {.main-index h2 {font-size:18px;}}


.main-index .text {
color: #2E0202;
}



.main-index h3 {
color: #3B3B3B;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:21px;
font-weight: bold;
padding: 10px 0px 5px 0px;
}




/********************************/    
/*****    MAIN ABOUT   ******/
/********************************/
.main-about {
padding: 0px 140px 50px 140px;
font-size: 19px;
}

@media only screen and (max-width:768px)  {.main-about {padding: 0px 30px 40px 30px; font-size:18px;}}
@media only screen and (max-width:800px) and (orientation: landscape) {.main-about {padding: 0px 30px 40px 30px; font-size:19px;}}
@media only screen and (min-width:769px) and (orientation: portrait)  {.main-about {padding: 0px 30px 40px 30px; font-size:18px;}}



/********************************/    
/*****    MAIN WHY US  ******/
/********************************/

.main-why-us {
padding: 0px 20px 0px 20px;
margin:0px;
font-size: 16px;
text-align:center;
color: #2E0202;
}

@media only screen  {.main-why-us  {text-align:center; }}
@media only screen and (max-width:768px)  {.main-why-us h3 {font-size:19px;}}

#bg-wave01, #bg-wave02 {
display: inline-block; 
width:100%;
height:70px;
margin:0px;
padding:0px;
background-repeat: no-repeat;
background-size: 100% 70px;

}

#bg-wave01 {
background-image: url('/images/bg/wave01.png'); 
background-position: bottom left;
}
#bg-wave02 {
background-image: url('/images/bg/wave02.png'); 
background-position: top left;
}




/********************************/    
/** MAIN WHAT WE DO  **/
/********************************/
.main-product-sweatshirt {
background-image: url('/images/icons/icon-sweatshirt.png'); 
background-position: bottom  15px right 15px;
background-repeat: no-repeat;
background-size: 82px 93px;
}
@media only screen and (max-width:768px)  {.main-product-sweatshirt {background-size: 82px 93px;}}



.main-btn-1 {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: #615452;
    color:  #EBE0DF;
    border-radius: 10px;
    transition: 0.4s ease;
    border: 2px solid #615452;
}
.main-btn-1 i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.4s ease , opacity 0.4s ease , padding 0.4s ease;
}


.main-btn-1:hover {
    color: #615452;
    background-color: transparent;
}
.main-btn-1:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}




/********************************/    
/*****  PURPLE BUTTON      ******/
/********************************/    
.main-border-purple {
border-radius: 10px;
outline-offset:2px; 
outline:  2px dashed  #ACAEFC;
padding: 15px 15px 10px 22px;
}



.main-btn-purple {
    display: inline-block;
    padding: 6px 6px 6px 19px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
font-size:14px;
}

@media only screen and (max-width:768px) {.main-btn-purple {font-size:16px; padding: 8px 9px 8px 21px;}}


.main-btn-purple i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-purple:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #C8CCFE;
    border: 2px solid #2E0202 !important;
}

.main-btn-purple:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}



/********************************/    
/*****     PINK BUTTON      ******/
/********************************/    

.main-border-pink {
border-radius: 10px;
outline-offset:2px; 
outline:  2px dashed  #F3AFFD;
padding: 15px 15px 10px 22px;
}

.main-btn-pink {
    display: inline-block;
    padding: 6px 6px 6px 19px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
font-size:14px;
}

@media only screen and (max-width:768px) {.main-btn-pink {font-size:16px; padding: 8px 9px 8px 21px;}}


.main-btn-pink i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-pink:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #F8CCFE;
    border: 2px solid #2E0202 !important;
}

.main-btn-pink:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}





/********************************/    
/*****  ORANGE BUTTON      ******/
/********************************/    
.main-border-orange {
border-radius: 10px;
outline-offset:2px; 
outline:  2px dashed  #F8CD88;
padding: 15px 15px 10px 22px;
}

.main-btn-orange {
    display: inline-block;
    padding: 6px 6px 6px 19px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
font-size:14px;
}

@media only screen and (max-width:768px) {.main-btn-orange {font-size:16px; padding: 8px 9px 8px 21px;}}


.main-btn-orange i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-orange:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #FAE2B8;
    border: 2px solid #2E0202 !important;
}

.main-btn-orange:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}





/********************************/    
/***** KHAKI BUTTON      ******/
/********************************/    
.main-border-khaki {
border-radius: 10px;
outline-offset:2px; 
outline:  2px dashed  #B4C3A1;
padding: 15px 15px 10px 22px;
}

.main-btn-khaki {
    display: inline-block;
    padding: 6px 6px 6px 19px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
font-size:14px;
}

@media only screen and (max-width:768px) {.main-btn-khaki {font-size:16px; padding: 8px 9px 8px 21px;}}


.main-btn-khaki i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-khaki:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #C7D2BA;
    border: 2px solid #2E0202 !important;
}

.main-btn-khaki:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}


/*************************************/    
/*****    GRAY BUTTON    ******/
/************************************/    

.main-btn-gray {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
}

@media only screen and (max-width:768px) {.main-btn-gray {font-size:16px;}}


.main-btn-gray i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.main-btn-gray:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #E7E9ED;
    border: 2px solid #2E0202 !important;
}

.main-btn-gray:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}



/*************************************/    
/*****    OPT BUTTON    ******/
/************************************/    

.opt-btn {
    display: inline-block;
    padding: 8px 9px 8px 21px;
    background-color: transparent;
    color: #2E0202;
    border-radius: 10px;
    border: 2px solid #2E0202;
    transition: 0.2s ease;
font-size:15px;
}

@media only screen and (max-width:768px) {.opt-btn {font-size:16px; padding: 8px 9px 8px 21px;}}


.opt-btn i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

.opt-btn:hover {
    color: #2E0202;
font-weight:bold;
text-decoration:none;
    background-color: #E7E9ED;
    border: 2px solid #2E0202 !important;
}

.opt-btn:hover i {
    margin-left: 2px;
    padding-right: 5px;
    opacity: 1;
}







/*****************************************/    
/*****      WORK STAGES     ******/
/*****************************************/  


.stage-circle-green, .stage-circle-red, .stage-circle-yellow, .stage-circle-blue {
display:inline-block;
width: 110px;
height: 110px;
border-radius: 50%;
vertical-align:baseline;
text-align:center;
outline-offset:2px; 
}



.stage-circle-green {
outline:  2px dashed  #8DB808;
background-color:#98C60A;
}

.stage-circle-red {
outline:  2px dashed  #D7412E;
background-color:#DB513F;
}

.stage-circle-yellow {
outline:  2px dashed  #FEBA19;
background-color:#FFBF37;
}

.stage-circle-blue {
outline:  2px dashed  #4EBFF4;
background-color:#60C7F6;
}


.stage-circle-img {
border: 0px solid black;
width: 65px;
height: 65px;
}



/*****************************************/    
/*****         PORTFOLIO        ******/
/*****************************************/  

.portfolio-border {
	border: 2px dotted #B52D67;
}

.portfolio-img {
    border-radius: 10px;
    width:300px;
	height:400px;
}

.opt-img {
    border-radius: 10px;
    width:240px;
	height:320px;
outline-offset:3px; 
outline:  0px dashed  #2E0202;
  transition: transform .2s;
}

.opt-img:hover {
outline:  0px dashed  #B52D67;
transform: scale(1.05);
}



/*****************************************/    
/*****         PORTFOLIO        ******/
/*****************************************/  
 .logo-img {
transition: transform .2s;
}

.logo-img:hover {
transform: scale(1.05);
}


/*****************************************/    
/*****       MAIN CLIENTS           ******/
/*****************************************/  

.main-clients {
padding: 0px 20px 0px 20px;
margin:0px;
font-size: 16px;
text-align:center;
color: #2E0202;
}

@media only screen  {.clients  {text-align:center; }}
@media only screen and (max-width:768px)  {.main-clients h3 {font-size:19px;}}






/*****    PRODUCTS    ******/
.my-products-desktop { }
.my-products-mobile { }
@media only screen and (orientation: portrait) and (max-width:400px) {.my-products-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (max-width:600px) {.my-products-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}

@media only screen and (orientation: portrait) and (min-width:401px) {.my-products-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (min-width:601px)  {.my-products-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}




/*****    FOOTER      ******/
.my-footer-desktop { }
.my-footer-mobile { }
@media only screen and (orientation: portrait) and (max-width:400px) {.my-footer-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (max-width:600px) {.my-footer-desktop {display:none; visibility: hidden; margin:0px; padding:0px;}}

@media only screen and (orientation: portrait) and (min-width:401px) {.my-footer-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}
@media only screen and (orientation: landscape) and (min-width:601px)  {.my-footer-mobile {display:none; visibility: hidden; margin:0px; padding:0px;}}