/*****************************************/    
/*****   GLOBAL SETTINGS   ******/
/*****************************************/  



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

h2 {
font-family:'Onest-Regular', Arial, sans-serif;
font-size:25px;
text-align:center;
font-weight:bold;
}


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


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

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




.main-index h2  {
color: #3B3B3B;
opacity:0.90;
font-family:'Onest-Regular', Arial, sans-serif;
font-size:25px;
}
@media only screen and (max-width:768px) {.main-index h1 {font-size:18px;}}



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

.my-text {
font-size: 19px;
}

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




.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:25px;

}

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


/*****************************************/    
/*****        MY SLIDES           ******/
/*****************************************/  
.mySlides {display:none}



/*****************************************/    
/*****     BOTTOM SLIDER    ******/
/*****************************************/  
.my-slider-padding {
	padding-bottom:80px;
}



/*****************************************/    
/*****   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 */
    }



/******************************************/    
/*****        GLOBAL LINKS       ******/
/******************************************/


a.global-link {
color: #424370;
}

a.global-link:hover {
color: #331159;
text-decoration:underline;
}

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


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

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


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

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

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

.my-banner-catalogue {
	background: url(../images/banner-printshop.webp);
	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;
}





/********************************/    
/*****     GREEN DIV     ******/
/********************************/    
.main-img-green {
z-index:10px;
background-image: url('/images/icons/icon-shop-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;
}


/********************************/    
/*****    ORANGE DIV    ******/
/********************************/    

.main-img-orange {
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-device-width:768px) {
.main-img-orange {
background-image: url('/images/icons/icon-sewing-md.png'); 
background-repeat: no-repeat;
background-size: 100px 100px;
background-position: 100% 50%;
}}

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

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


.main-btn-orange {
    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-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: #FFAA57;
    border: 2px solid #2E0202 !important;
}

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

/********************************/    
/*****    LILAC DIV    ******/
/********************************/    

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

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

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

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


.main-btn-lilac {
    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-lilac i {
    margin-left: -8px;
    opacity: 0;
    transition: margin 0.2s ease , opacity 0.2s ease , padding 0.2s ease;
}

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

.main-btn-lilac: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: #28023C;
border-width: 0px 0px 10px 0px;
border-style:solid;
border-color: #F2F3F5;

/* 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-block-padding, .my-heading-padding {
padding-bottom: 20px;
}


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

.sub-index-bg-red {
background-color:#D7412E !important;
}

.sub-index-heading {
background-color:#28023C; 
border-width: 0px 0px 10px 0px;
border-style:solid;
border-color: #F2F3F5;
display: inline-block; 
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 !important; 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;}}


/**********************************************************/    
/*********    UNDERHEADING-USLUGA      ********/
/**********************************************************/
.underheading-top { 
padding: 60px 140px 15px 140px;
font-size: 19px;
}
@media only screen and (max-width:1024px)  {.underheading-top {padding: 30px 0px 0px 0px; font-size:18px;}}

.underheading-main { 
font-size: 19px;
}

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








/********************************/    
/*****    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;
}



/************************************************************/
/*            KANALI PRODAZH                                          */
/************************************************************/
.press-effect img {
    transition: transform 0.12s ease, border-color 0.2s ease;
}

.img-clients-border img {
    border: 2px solid #000;
    padding: 3px;
border-radius: 12px; 
    transition: transform 0.25s ease, border-color 0.2s ease;
}

.swiper-wrapper .swiper-slide {
text-align:center;
}

/*  text settings   */
.img-clients-border span {
font-size:13px;
display: block;
text-align:center;
padding-top:5px;
color:#000000;
}


/* NEW: for elements that have both classes */
.press-effect.img-clients-border img {
    transition: transform 0.15s ease, border-color 0.2s ease;
}

@media (hover: hover) {
    .img-clients-border:hover img {
        border: 2px solid #95B62E;
        transform: scale(1.1);
    }
}

/* MOVED: must come after the hover block so the press wins */
.press-effect:active img {
    transform: scale(0.9);
}




/*************************************/    
/*****    ORDER  BUTTON    ******/
/*************************************/    

/* =========================================
   1. DESKTOP (992px and above)
   ========================================= */
@media only screen and (min-width: 992px) {
  .wsmenu > .wsmenu-list > li.rightmenu {
    float: right !important;
    display: flex !important;
    align-items: center !important;
    height: 75px !important;
    padding: 0 15px !important;
    transition: height 0.4s ease;
  }

  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order {
    display: inline-block !important;
    padding: 11px 22px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
    text-decoration: none !important;
    background-color: #28023C !important;
    color: #C9C1CF !important;
    border-radius: 5px !important;
    border: 2px solid #3B3B3B !important;
    transition: all 0.4s ease;
  }

  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order:hover {
    opacity: 0.9;
    color: #2E0202 !important;
    background-color: #95B62E !important;
    border: 2px solid #2E0202 !important;
    text-decoration: none !important;
  }

  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order:active {
    transform: translateY(0);
    box-shadow: none;
  }

  /* Scrolled state (.wsfixed) */
  .wsmainfull.wsfixed .wsmenu > .wsmenu-list > li.rightmenu {
    height: 52px !important;
  }

  .wsmainfull.wsfixed .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order {
    padding: 7px 16px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}

/* =========================================
   2. MOBILE & TABLET DRAWER (991px and below)
   ========================================= */
@media only screen and (max-width: 991px) {
  .wsmenu {
    text-align: left !important;
  }

  .wsmenu > .wsmenu-list > li.rightmenu {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 15px 17px !important;
    margin: 10px 0 0 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    position: static !important;
  }

  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 15px !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    background-color: #28023C !important;
    color: #EEEEEE !important;
    border: 2px solid #3B3B3B !important;
    border-radius: 5px !important;
    text-decoration: none !important;
  }

  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order:hover,
  .wsmenu > .wsmenu-list > li.rightmenu > a.main-btn-order:active {
    color: #2E0202 !important;
    background-color: #95B62E !important;
    border: 2px solid #2E0202 !important;
  }
}

/*************************************/    
/*****    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;
}





/*****************************************/    
/*****   POSHIV & PECHAT     ******/
/*****************************************/  
.tee-size {
width:150px;
padding:10px;
}

.tee-desc {
font-size:14px;
}




/*****************************************/    
/*****      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;
  box-shadow: 0px 0px 6px 1px rgba(136, 136, 136, 0.5);
    border-radius: 10px;
  display: inline-block;   /* or width: fit-content; */
  line-height: 0;          /* removes the small gap under the image */
width: fit-content;       /* border hugs the image */
margin:0px;
padding:5px;
}

.portfolio-img {
    border-radius: 10px;
}

.rounded-rectangle {
    border-radius: 10px;
}

.opt-img {
    border-radius: 10px;
    width:240px;
	height:323px;
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;}}