/*****************************************/    
/*****   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-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-bg-red {
background-color:#D7412E !important;
}

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

.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 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;
}






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

}

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

.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;}}