body {
background:#FF9239; 
background-image:url(/pic/bkwpin.gif); 
color: #5A3918; 
margin: 0px 1px 1px 5px;
font-size: 16px;     
width: fit-content;
padding: 0px 0px 0px;
width: inherit;
 }
html {
	height: auto;
 scrollbar-face-color:#5A3918;
 scrollbar-highlight-color:#FF8D09;
 scrollbar-arrow-color:#FF9C18;
 scrollbar-track-color:#FFBF35;
 scrollbar-3dlight-color:#D86100;
 scrollbar-shadow-color:#FF92FF;
 scrollbar-darkshadow-color:#FF9239;
}
.img { border: 0; }
br.cb { clear: both; }
.a:link { font-family:arial; color:#820A0A; font-size:12px;  TEXT-DECORATION: none ;font-weight: bold }
.a:active { font-family:arial; color:#820A0A; font-size:12px; TEXT-DECORATION: none; font-weight: bold }
.a:visited {font-family:arial; color:#AAAAAA; font-size:12px; TEXT-DECORATION: none; font-weight: bold}
.cim { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #fe741b; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px;}
.cem { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #774702; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.cau { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #000fd7; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.ctr { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #00aba9; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.cap { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #8ec127; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.car { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #9f00a7; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.cpv { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #2d89ef; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }

.cun{ font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #d41243; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.cam { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #fc5cbb; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
.cma { font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 1em;
      text-decoration:none; font-weight:bold; color:white; background-color: #fb4a63; text-align : center; display : block; padding-top: 2px;  padding-bottom: 2px; }
	  
.gras {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;
       color: #820A0A;  text-decoration: none; font-weight:bold; }
.INPUT { background-color: #FFEFD5 ; color: brown ; font-size:12px;  }
.BUTTON { font-family: Comic sans Ms,arial, helvetica, sans-serif ;font-weight:bold;border-width: 1pt; Text-Decoration : italic;
          font-size: 11pt ; color: black ; top: 100px ; background-color: #FF9239 ;background-image:url(/pic/bghetre3.gif); }
.container {
  margin-top: 0px;
  margin-left: 0px;
  padding-right: 0px;
  padding-left: 0px;
 width: 100%;  
/*   width:fit-content; */
}
.container-fluid {
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 5px;
  padding-right: 5px;
}
.navbar {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
	color: brown ;
	font-weight:bold;
}
.navbar { min-height:30px; background: #f14603;  }
 .navbar .navbar-brand{ padding: 0 5px;font-size: 16px;line-height: 30px;height: 30px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 30px; color: #fff ; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px;  color: #fff ; background: #ffd54f;}
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #fF4603; color: #fff ;}
.tnav .navbar .container { height: 30px; }
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    color: #FFF;
    border-bottom-color: #EEE;
}
.navbar-nav>li>.dropdown-menu {
    background-color: #FF9800;
}
.dropdown-menu > li > a {
color: #000;
background: #FF9800;
#border-bottom:  2px solid green;
font-weight: bolder ;
}
.dropdown-menu .divider {
height: 3px;
margin: 0px 0;
  overflow: hidden;
  background-color: #FFC107;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
    perspective: 1030px;
}

#sidebar {
    min-width: 170px;
    max-width: 200px;
    background: #7386D5;
	background-color: #FF9239 ;
	background-image:url(/pic/bghetre3.gif); 
	color: brown ;
	font-weight: bold ;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: bottom left;
}

.sidebar  > ul> li > a {  padding-top: 0px; padding-bottom: 0px; margin: 0 0 0 0; line-height: 30px; color: #fff ; }

#sidebar.active {
    margin-left: -170px;
    transform: rotateY(100deg);
}

#sidebar .sidebar-header {
	line-height: 30px; 
	font-size: 1.1em;
	color:brown;
	font-weight: bold ;
    padding: 1px;
	padding-top: 1px;
	 padding-bottom: 1px;
	margin: 0 0 0 0;
    background: #f14603;
}

#sidebar ul.components {
    padding: 2px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
font-weight: bold ;
    color: #fff;
    padding: 4px;
}

#sidebar ul li a {
font-weight: bold ;
    color: #fff;
    padding: 4px;
    font-size: 1em;
    display: block;
}
#sidebar ul li a:hover {
font-weight: bold ;
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a {
font-weight: bold ;
    color: #fff;
    background: #ff9c00;
}


a[data-toggle="collapse"] {
    position: relative;
}



ul ul a {
    font-size: 0.9em !important;
    padding-left: 20px !important;
    background: #ff9c00;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.8em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article, a.article:hover {
    background: #ff9c00 !important;
    color: #fff !important;
}



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
	max-width: 1200px;
	/* width: 1024px; */
	/* max-width:1024px; */
	/* max-width:inherit; */
    padding: 1px;
    min-height: 100vh;
    transition: all 0.3s;
}

#sidebarCollapse {
    width: 27px;
    height: 27px;
    position: relative;
    /* top left corner of the navbar */
	top:0;
    left: 1px;
    background: yellow;
	margin: 0 auto;
    padding-left: 1px;
    padding-right: 5px;
    margin-right: 10px;
    padding-top: 0px;
    float: left;
    padding-bottom: 0px;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}

#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 0px auto;
}



/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -170px;
        transform: rotateY(90deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }

}
/* Custom, bootstrap */ 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 2px;
    padding-right: 2px;
}
.row {
    margin-left: 0px;
    margin-right: 1px;
}
.alert {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 5px;
}
.panel {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 5px;
}

/* Custom, tcolo button */ 
 .page {
            width: auto;
            height: auto;
        }

        .metr {
            width: 100%;
            padding: 3px;
            height: auto;
            display: table;
			text-align:center;
        }

        .tcolostyle {
            height: 100px;
            width: 150px;
            float: right;
            margin: 0 5px 0 0;
            padding: 2px;
        }

            .tcolostyle:hover {
                background-color: #5190d9;
            }

        .tcolostylelarge {
            width: 250px;
            height: 100px;
        }


        .imtcolo {
			background-color: #fe741b;color: #fff;font-weight: bold;
        }
        .emtcolo {
			background-color: #774702;color: #fff;font-weight: bold;
        }
        .aftcolo {
          background-color: #a200ff;color: #fff;font-weight: bold;
        }
        .autcolo {
			background-color: #000fd7;color: #fff;font-weight: bold;
        }
        .aptcolo {
			background-color: #8ec127;color: #fff;font-weight: bold;
        }
        .artcolo {
			 background-color: #9f00a7;color: #fff;font-weight: bold;
        }
        .trtcolo {
			background-color: #00aba9;color: #fff;font-weight: bold;
        }
        .pvtcolo {
			background-color: #2d89ef;color: #fff;font-weight: bold;
        }
        .amtcolo {
			background-color: #fc5cbb;color: #fff;font-weight: bold;
        }
        .matcolo {
			background-color: #fb4a63;color: #fff;font-weight: bold;
        }
        .untcolo {
			background-color: #d41243;color: #fff;font-weight: bold;
        }
        .tptcolo {
          background-color: #603cba;color: #fff;font-weight: bold;
        }
/* --------------------- */
.icone-em, .icone-im, .icone-au, .icone-pv, .icone-tr, .icone-ap, .icone-ar, .icone-am, .icone-ma, .icone-un, .icone-af {
	width: 32px;
	height: 32px;
	display: inline-block;
  background: url('/pic/ico/iconrub11-32.png') no-repeat;
}
.icone-tr { background-position: left top; }
.icone-em { background-position: 10% top; }
.icone-au { background-position: 20% top; }
.icone-im { background-position: 30.5% top; }
.icone-ar { background-position: 39.8% top; }
.icone-af { background-position: 49.5% top; }
.icone-ma { background-position: 59.5% top; }
.icone-un { background-position: 70% top; }
.icone-am { background-position: 80% top; }
.icone-ap { background-position: 90% top; }
.icone-pv { background-position: right top; }

.icone-tr:hover { background-position: left bottom; }
.icone-em:hover { background-position: 10% bottom; }
.icone-au:hover { background-position: 20% bottom; }
.icone-im:hover { background-position: 30.5% bottom; }
.icone-ar:hover { background-position: 39.8% bottom; }
.icone-af:hover { background-position: 49.5% bottom; }
.icone-ma:hover { background-position: 59.5% bottom; }
.icone-un:hover { background-position: 70% bottom; }
.icone-am:hover { background-position: 80% bottom; }
.icone-ap:hover { background-position: 90% bottom; }
.icone-pv:hover { background-position: right bottom; }
.icone-tp {
	width: 32px;
	height: 32px;
	display: inline-block;
  background: url('/pic/ico/star-3-32.png') no-repeat;
}

.crop img{
	width:120px;
  height:130px;
  position: relative;
  clip: rect(0px,100px, 130px, 0px);
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
	#content {
		max-width: 480px;
		min-width: 321px;
		margin-left: 7px;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
	#content {
	/*	margin-left: 7px; */
		min-width: 320px;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
	#content {
	    margin-left: 3px;
		max-width: 317px;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
	#content {
		max-width: 1020px;
		min-width: 768px;
	}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
	#content {
		max-width: 1020px;
		min-width: 762px;
	}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
	#content {
		min-width: 770px;
		max-width: 1020px;
	}
}
/**********
iPad 3
**********/
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	#content {
		min-width: 770px;
		max-width: 1020px;
	}
}

@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1220px) {
/* Styles */
	#content {
		min-width: 1200px;
	}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
	#content {
		min-width: 1024px;
	}
}

/* iPhone 4 ----------- */
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	#content {
		min-width: 318x;
		max-width: 476px;
	    margin-left: 7px;
	}
}

@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
	#content {
		min-width: 325px;
		max-width: 477px;
	    margin-left: 7px;
	}
}