/* ------------------------- GLOBAL -------------------------*/

#programmes { display: block ; width: 100%}
#programmes .pg-menu { width: 25% ; float: left ; position: relative; top:20px;}
#programmes .pg-menu > img {width:100%; height:93vh ; }
#programmes img { width: 100%; float: left }
.pg-menu header { width: 100% ; position:absolute; top: 10px; text-align: center; margin: 0 auto}
.pg-menu header > img { width: 80% !important; float: inherit !important }


#programmes .tab { width: 90% ; position: absolute ; top:0 ; left:0 ; margin:30% auto ; text-align:center}
#programmes .tab ul li { display: inline-block; text-decoration: none; width: 100%; }
#programmes .tab ul li a { font-weight: bold; font-size: 16px; color: rgba(255,255,255,1.00); text-align: center; width: 100%; margin-bottom: 12px; padding-top: 12px; padding-bottom: 12px; border-radius: 5px; display: inline-block; text-decoration: none; 
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
-o-transition: color .5s linear;
-ms-transition: color .5s linear;
transition: color .5s linear;}
#programmes .tab ul li a:hover { color: rgba(0,0,0,1.00); }


#programmes .button1 ul li, .button1 ul li a, .button1 ul li a:hover { background:url(../images/programmes/button_1.png) no-repeat 100% top; background-size: 100% 85%}

#programmes .button2 ul li, .button2 ul li a, .button2 ul li a:hover { background:url(../images/programmes/button_3.png) no-repeat 100% top; background-size: 100% 85%}

#programmes .button3 ul li, .button3 ul li a, .button3 ul li a:hover { background:url(../images/programmes/button_2.png) no-repeat 100% top; background-size: 100% 85%}

.pg-menu-bg { background-image: url(../images/programmes/programmes_bag_making_on.jpg); background-size: 100% 100%}
.pg-menu-bg img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
    transition: opacity 1s;}

.pg-menu-bg img:hover { opacity:0;}


/* ----------------------------------------------------------------*/

@media all and (max-width:1366px) {

.pg-menu header { top: 0px;}       
    
#programmes .tab { margin:75px auto}
#programmes .tab ul li a{ font-size: 14px;margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; }
	
    
}


/* ----------------------------------------------------------------*/

@media all and (max-width:1100px){

body { min-width: inherit }

#programmes .pg-menu { width: 50%}
#programmes .pg-menu > img { height:auto ; }
    
.pg-menu header { top: 10px;}    
.pg-menu header > img { width: 90% !important; float: inherit !important }    

#programmes .tab { width: 90%; margin:30% auto }
#programmes .tab ul li a { font-size: 20px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; }

	
}


/* ----------------------------------------------------------------*/

@media all and (max-width:899px){


#programmes .tab ul li a { font-size: 15px; margin-bottom: 10px}

	
}


/* ----------------------------------------------------------------*/


@media all and (max-width:700px){

#programmes .pg-menu { width: 100%}

#programmes .tab ul li a { font-size: 20px ; margin-bottom: 20px; padding-top: 15px; padding-bottom: 15px}

}


/* ----------------------------------------------------------------*/


@media all and (max-width:500px){

#programmes .tab { margin:25% auto}
#programmes .tab ul li a { font-size: 13px ; margin-bottom: 5px; padding-top: 8px; padding-bottom: 8px}

}