@import url('style-bootstrap.css');
@import url('style-material.css');
         
/*-- Suite --*/

/* Pour la séléction du texte */
::selection {background: #FFACFF;}
::-moz-selection {background: #FFACFF;}
::-webkit-selection {background: #FFACFF;}

body {
	font-family:  "Arial", Helvetica, sans-serif;
	background: #FFCEFF url(images/bg.gif);
	margin: 50px 0 0 0 !important;
	color:#e91e63;
	cursor: url(../images/girly.cur), auto;
}
a:link {
   color:#ec407a;
   text-decoration: underline;
   cursor: url(../images/rose.cur), auto;
}
a:hover {
	color:#ec407a;
	text-decoration: none;
	cursor: url(../images/rose.cur), auto;
}
a:visited{
	color:#f06292;
}
a:link, .btn {
	text-decoration: none;
}

.h1 {
	color: #FC73D4 !important;
	text-transform: uppercase;
	font-size: 30px;
	text-align: center;
	text-shadow: 2px 1px 2px #727272;
}

.clearfix {
	clear: both;
}

.div-center{text-align: center;}
.div-auto{margin:auto;}
.align-top {margin-top: -40px;}
.div-inline {display:inline-block;}

.width-5{width:5%;}
.width-10{width:10%;}
.width-15{width:15%;}
.width-20{width:20%;}
.width-30{width:30%;}
.width-35{width:35%;}
.width-40{width:40%;}
.width-99{width:99%}
.width-100 {width:100%;}
.width-200 {width: 200px;}
.width-380 {width: 380px;}

.table-100{width:100%;margin:auto;}
.table-98{width:98%;margin:auto;}
.table-95{width:95%;margin:auto;}
.table-90{width:90%;margin:auto;}
.table-80{width:80%;margin:auto;}
.table-70{width:70%;margin:auto;}
.table-50{width:50%;margin:auto;}

.size-12 {font-size: 12px;}
.size-14 {font-size: 14px;}
.size-16 {font-size: 16px;}
.size-18 {font-size: 18px;}
.size-20 {font-size: 20px;}
.size-25 {font-size: 25px;}
.size-30 {font-size: 30px;}

.pull-right {
	float: right;
}
.pull-left {
	float: left;
}

.header-table {
	height:25px;
	background: #bbdefb;
	color: #1565c0;
	font-weight: bold;
}
            
.conteneur {
	width: 100%;
	padding: 20px;
  	margin: 0.5rem 0 1rem 0;
  	background-clip: padding-box;
  	background-color: #fce4ec;
  	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

@media (min-width:100px) and (max-width:980px) {
	.conteneur {
		width: 98%!important;
		margin: 10px auto 10px auto;
	}
}
@media (min-device-width:100px) and (max-device-width:980px) {
	.conteneur {
		width: 98%!important;
		margin: 10px auto 10px auto;
	}
}

pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.42857143;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
}

pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
}

.login_input_big {
	background: #FAE3EC;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FAE3EC), to(#ECBBD1));
	background-image: -moz-linear-gradient(top, #FAE3EC, #ECBBD1);
	background-image: -webkit-linear-gradient(top, #FAE3EC, #ECBBD1);
	background-image: -o-linear-gradient(top, #FAE3EC, #ECBBD1);
	background-image: -ms-linear-gradient(top, #FAE3EC, #ECBBD1);
	background-image: linear-gradient(top, #FAE3EC, #ECBBD1);
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAE3EC', endColorstr='#ECBBD1');
	color: #E83167;
	text-decoration: none;
	width: 290px;
   height: 31px;
	padding: 2px 5px 0 5px;
	margin: 0px;
	border: 1px solid #E83167;
	vertical-align: top;
}

/*------------- */
/* loading css3 */
/*------------- */
.loading_container {
	height:30px;
	display:inline-block;
	margin:auto;
}
.loading_container_small {
	height:15px;
	display:inline-block;
	margin:auto;
}

@-webkit-keyframes loading {
	from {opacity: 1;}
	to {opacity: 0.25;}
}
@-moz-keyframes loading {
	from {opacity: 1;}
	to {opacity: 0.25;}
}
@keyframes loading {
	from {opacity: 1;}
	to {opacity: 0.25;}
}
.loading {
	margin:0;
	width:32px;
	height:32px;
	position:relative;
}
.loading .c {
	display: block;
	width: 8px;
	height: 8px;
	border-radius:	4px;
	animation: loading 800ms infinite;
	-webkit-animation: loading 800ms infinite;
	-moz-animation: loading 800ms infinite;
	position: absolute;
	opacity: 0.25;
}
.loading .c:nth-child(1) { left: 12px; top: 0px; animation-delay: 0ms;-webkit-animation-delay: 0ms;-moz-animation-delay: 0ms; }
.loading .c:nth-child(2) { left: 20px; top: 4px; animation-delay: 100ms;-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms; }
.loading .c:nth-child(3) { left: 24px; top: 12px; animation-delay: 200ms;-webkit-animation-delay: 200ms;-moz-animation-delay: 200ms; }
.loading .c:nth-child(4) { left: 20px; top: 20px; animation-delay: 300ms;-webkit-animation-delay: 300ms;-moz-animation-delay: 300ms; }
.loading .c:nth-child(5) { left: 12px; top: 24px; animation-delay: 400ms;-webkit-animation-delay: 400ms;-moz-animation-delay: 400ms; }
.loading .c:nth-child(6) { left: 4px; top: 20px; animation-delay: 500ms;-webkit-animation-delay: 500ms;-moz-animation-delay: 500ms; }
.loading .c:nth-child(7) { left: 0px; top: 12px; animation-delay: 600ms;-webkit-animation-delay: 600ms;-moz-animation-delay: 600ms; }
.loading .c:nth-child(8) { left: 4px; top: 4px; animation-delay: 700ms;-webkit-animation-delay: 700ms;-moz-animation-delay: 700ms; }

.loading_small {
	margin:0;
	width:16px;
	height:16px;
	position:relative;
}
.loading_small .c {
	display: block;
	width: 4px;
	height: 4px;
	border-radius:	2px;
	animation: loading 800ms infinite;
	-webkit-animation: loading 800ms infinite;
	-moz-animation: loading 800ms infinite;
	position: absolute;
	opacity: 0.25;
}
.loading_small .c:nth-child(1) { left: 6px; top: 0px; animation-delay: 0ms;-webkit-animation-delay: 0ms;-moz-animation-delay: 0ms; }
.loading_small .c:nth-child(2) { left: 10px; top: 2px; animation-delay: 100ms;-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms; }
.loading_small .c:nth-child(3) { left: 12px; top: 6px; animation-delay: 200ms;-webkit-animation-delay: 200ms;-moz-animation-delay: 200ms; }
.loading_small .c:nth-child(4) { left: 10px; top: 10px; animation-delay: 300ms;-webkit-animation-delay: 300ms;-moz-animation-delay: 300ms; }
.loading_small .c:nth-child(5) { left: 6px; top: 12px; animation-delay: 400ms;-webkit-animation-delay: 400ms;-moz-animation-delay: 400ms; }
.loading_small .c:nth-child(6) { left: 2px; top: 10px; animation-delay: 500ms;-webkit-animation-delay: 500ms;-moz-animation-delay: 500ms; }
.loading_small .c:nth-child(7) { left: 0px; top: 6px; animation-delay: 600ms;-webkit-animation-delay: 600ms;-moz-animation-delay: 600ms; }
.loading_small .c:nth-child(8) { left: 2px; top: 2px; animation-delay: 700ms;-webkit-animation-delay: 700ms;-moz-animation-delay: 700ms; }

.loading.light .c,.loading_small.light .c {background: #ffffff;}
.loading.dark .c,.loading_small.dark .c {background: #000000;}
.loading.green .c,.loading_small.green .c {background: #428240;}
.loading.purple .c,.loading_small.purple .c {background: #99109E;}
.loading.grey .c,.loading_small.grey .c {background: #666666;}
.loading.blue .c,.loading_small.blue .c {background: #38B5E6;}

/* Modal box */
.nkBox {
	z-index: 100; 
	border: 1px solid #64b5f6;
	width:600px;
	left: 30%;
	top: 30%;
	background-color:#E5E5E5;
	position: fixed;
	display:none;
}
.nkHeaderBox {
	border-bottom: 1px solid #64b5f6;
	height:30px !important;
	background-color: #2196F3;
}
.nkTitleBox {
	display: table-cell;
	vertical-align:middle;
	height:30px !important;
	padding-left:15px;
	color: #FFFFFF;
	font-weight: bold;
}
.nkContentBox {
	padding:10px;
	display: block;
}
.nkTitleClose {
	position: absolute;
	right: 10px;
	top: 5px;
	vertical-align: middle;
	width: 19px;
	height: 19px;
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAB3RJTUUH3wQSEQUNPg58MQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAOPSURBVHjahVVrSFNhGD5z5K3L5oJsbfu+s7Nmim65iqjMoiIqo4sFEZYE3Uyi+hGUWj+yoML60e8CDaKILnb/o3YhC8XUVRONLtZ07eLQ7exsO7uf3mMqp4PLFzY47/t8z/e+z/ucTUoIgpw7FyuysgxZM2emeRhmhEgSCCGlQibbpJDJG+Wz5Bqvj34L6Thfk06QqdUbUtPTj2dMn3EqGoudkMlkUS9Nt4nJ8DxcKE0hak5XVe9ftmK5rLe3tygzNT3X46MfQ5kbBVEasiI/N89r7u52+xl/+EJtrV1HkmEKkZeEZDoVXqMnKeezp09dHMcl4MN5PJ5A6Zat30mNZtdfMoSKKIRjjx42WjlBfDSb3YuMRo8W45NjuHWACzTU19s5UXS0t/doEdoDMAl0h2+sX7vOHY/Ho2KgbXDQvsRkaqXUuBS6/VleVuYS43oslt9LTYsb+O5HO9RqcDXcHD1bc2aQDQYDYlKLxeIoNBju6Skda7VaGWHtzevXrhxqfpdOjbdP6KJUKjOhyyogZTZv3OTy+/2MmDQajdIgwS9h7sWz50N6LcVQGJdMagVKpdLrEO4E0oEQy7Lcf+JVy0sXNBAG3Y4S/4vRbhH5qLLiSE8kEglPRgZbpRcXFvqA8MlkHFLhA4wbnU17H38fchuCbPDHyuLiAgmEEFN3+XJ/e1u7Ih4mttAB2ismTBEnIghlchLu06/+fjdox4rrBw8fniGXZ3VLUhNLiakCXikt+O322eqa96FQyJdMwy99fdaC3Dwzb6ekZJRaXQC6WK/U1X2GM/Hxw4FAwHuzoaGr8f4DlzD/oaODydPn+MeM/48sBMY4D8jc1aer7MJDTofDvXljST0sygz1xL695XZYyvB4vaW5+dt8UhsE2z3nf1gmFgPg1lUritzhcDgoGMtjMizs1iF0jNcaLLIT5HCsXllsYxhmAveutdUJxh8GDh9gDhBalcrIe+runTu2cVBXZ+eQMb+AhZsr/5ElO3sOvFktO7Ztp0GKEI+NxWLs+XO1bfwUOBuTBP8FD31AGmpuahpyOp2e/AW5/BjXk8idCrVb5WV734L/hw/tP2DjJ+QvIwRipsDGdqdlpB1DGCu/ff0q9fqZ/JGREV8S0mkw/jWFYvYiwOREEnGjzWb7LST8OxJCa4G7WEIkHD8GBpJ1OL5IuZQj+jmOuPpz0HpxKktKpwKMkZr4vwNh7g8AGoBREZ6qZwAAAABJRU5ErkJggg==');
}
.nkOverlay { 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 90; 
	width: 100%; 
	height: 100%; 
	background-color: #cfd1cf; 
}
@media (max-width: 500px) {
	.nkBox {
		width: 95% !important;
		position: absolute;
		left: 10px;
		top: 50px;
	}
}

/*  displayNotif  */
#viewNotif {
	position:fixed;
	top:50px;
	left:0px;
	display:inline-block;
	z-index:999999;
	width:350px;
}

.notice .close-notification {
	position:absolute; 
	width:20px; 
	height:20px; 
	top:-8px; 
	right:-10px; 
	cursor:pointer;
	background-image:url(images/close_box.png);
	background-repeat:no-repeat;
}

/* 
Notification 
http://www.codegrape.com/item/css-notification-box/1240
MULTIPLE COMMERCIAL LICENSE
Licensee: yann boily
Vous ne pouvez pas réutiliser ou reproduire ce code dans vos projet !
http://www.codegrape.com/resources/legal/pricing-licensing#multiple-commercial-license
*/
.notice { 
	width: 90%;
	font-weight: bold;
	padding: 10px 10px 10px 10px;	
	margin: 10px auto 10px auto;
	position: absolute;
	box-shadow: 2px 2px 2px #7D7D7D;
	position: relative;
	min-height:25px; 
}

.notice-chat { 
	border:1px solid #accc5d;
	color:#70892b;
	background-color:#d0e98e; 
	text-shadow:0px 1px rgba(255,255,255,0.3);
}
.notice-chat a {color: #70892b;text-decoration:underline;}
.notice-chat a:hover {color: #70892b;text-decoration:none;}

.notice-warn { 
	border:1px solid #f9b516;
	color:#c2721b;
	background-color:#ffd57f;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-warn a {color: #c2721b;text-decoration:underline;}
.notice-warn a:hover {color: #c2721b;text-decoration:none;}

.notice-error { 
	border:1px solid #dc4e4d;
	color:#A3231D;
	background-color:#f48888;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-error a {color: #A3231D;text-decoration:underline;}
.notice-error a:hover {color: #A3231D;text-decoration:none;}

.notice-info { 
	border: 1px solid #4381CD;	
	color:#0c4fa3;
	background-color:#8ed0fa;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-info a {color: #0c4fa3;text-decoration:underline;}
.notice-info a:hover {color: #0c4fa3;text-decoration:none;}

.notice-maintenance { 
	border:1px solid #e6b96f;
	color:#b1802f;
	background-color:#ffedcf;	
	text-shadow:0px 1px rgba(255,255,255,0.2);
}
.notice-maintenance a {color: #b1802f;text-decoration:underline;}
.notice-maintenance a:hover {color: #b1802f;text-decoration:none;}

.notice-success { 
	border:1px solid #5d902f;
	color:#366f11;
	background-color:#8dcb3d;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-success a {color: #366f11;text-decoration:underline;}
.notice-success a:hover {color: #366f11;text-decoration:none;}

.notice-lock {
	border:1px solid #CCCCCC;
	color:#666666;
	background-color:#f4f4f4;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-lock a {color: #666666;text-decoration:underline;}
.notice-lock a:hover {color: #666666;text-decoration:none;}

.notice-tchoutchou {
	border:1px solid #71502b;
	color:#432c12;
	background-color:#a58868;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-tchoutchou a {color: #432c12;text-decoration:underline;}
.notice-tchoutchou a:hover {color: #432c12;text-decoration:none;}

.notice-alert { 
	border:1px solid #821818;
	color:#5e1616;
	background-color:#dc5151;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-alert a {color: #5e1616;text-decoration:underline;}
.notice-alert a:hover {color: #5e1616;text-decoration:none;}

.notice-pink { 
	border:1px solid #f31558;
	color:#c30b42;
	background-color:#fb9cbb;	
	text-shadow:0px 1px rgba(255,255,255,0.2); 
}
.notice-pink a {color: #c30b42;text-decoration:underline;}
.notice-pink a:hover {color: #c30b42;text-decoration:none;}

.notice-rss { 
	border:1px solid #ea750a;
	color:#a8560b;
	background-color:#fdb944;	
	text-shadow:0px 1px rgba(255,255,255,0.2);
}
.notice-rss a {color: #a8560b;text-decoration:underline;}
.notice-rss a:hover {color: #a8560b;text-decoration:none;}

.notice-sea { 
	border:1px solid #104b7f;
	color:#0c223c;
	background-color:#2685d6;	
	text-shadow:0px 1px rgba(255,255,255,0.2);
}
.notice-sea a {color: #0c223c;text-decoration:underline;}
.notice-sea a:hover {color: #0c223c;text-decoration:none;}

.notice-sky { 
	border:1px solid #1f93c2;
	color:#276fc3;
	background-color:#94dcf1;	
	text-shadow:0px 1px rgba(255,255,255,0.2);
}
.notice-sky a {color: #276fc3;text-decoration:underline;}
.notice-sky a:hover {color: #276fc3;text-decoration:none;}

.notice-grey { 
	border:1px solid #474747;
	color:#e7e7e7;
	background-color:#5d5d5d;	
	text-shadow:0px 1px rgba(255,255,255,0.2);
}
.notice-grey a {color: #e7e7e7;text-decoration:underline;}
.notice-grey a:hover {color: #e7e7e7;text-decoration:none;}

@media (max-width: 500px) {
	#viewNotif {
		width:100% !important;		
	}
	.notice { 
		width:100% !important;
		margin-top: 0;
	}
	.notice .close-notification { 
		top:5px; 
		right:5px; 
	}
	select {
		width: 100%;
	}
}

/*** Editeur bbcode A REFAIRE ***/
.txt-color {
	position:absolute;
	display:none;
	z-index: 9999;
	margin-left:-53px;
	margin-top:30px;
	padding: 5px;
	background-color: #ffffff;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.editor_bg {
	padding-bottom:0px!important;
	background-color:#F0F0F0;
}
.editor_td {
	background-color:#F0F0F0;
	text-align:center;
	border-top: 2px solid #F0F0F0 !important;
	padding-bottom:3px!important;
}
.btn_space {
	margin-bottom:5px!important;
}
.btnUp {
	padding-top:6px;
	padding-bottom:6px;
}
.frame_bbcode {
	height:15px;
	width:16px;
	padding:0;
	border:0;
	display:block;
}
.bbcode { background: url('images/bbcode_sprite_1.png') repeat-x 0 0;}
.bb_0 { background-position: 100% 0; }
.bb_1 { background-position: 100% -16px; }
.bb_2 { background-position: 100% -32px; }
.bb_3 { background-position: 100% -48px; }
.bb_4 { background-position: 100% -64px; }
.bb_5 { background-position: 100% -79px; }
.bb_6 { background-position: 100% -96px; }
.bb_7 { background-position: 100% -112px; }
.bb_8 { background-position: 100% -128px; }
.bb_9 { background-position: 100% -144px; }
.bb_10 { background-position: 100% -160px; }
.bb_11 { background-position: 100% -176px; }
.bb_12 { background-position: 100% -192px; }
.bb_13 { background-position: 100% -207px; }
.bb_14 { background-position: 100% -223px; }
.bb_15 { background-position: 100% -240px; }
.bb_16 { background-position: 100% -256px; }
.bb_17 { background-position: 100% -272px; }
.bb_18 { background-position: 100% -288px; }
.bb_19 { background-position: 100% -304px; }
.bb_20 { background-position: 100% -320px; }
.bb_21 { background-position: 100% -336px; }
.bb_22 { background-position: 100% -352px; }
.bb_23 { background-position: 100% -368px }
.bb_24 { background-position: 100% -384px }
.bb_25 { background-position: 100% -400px }
.bb_26 { background-position: 100% -414px }
.bb_27 { background-position: 100% -430px }
.bb_28 { background-position: 100% -446px }
.bb_29 { background-position: 100% -462px }
.bb_30 { background-position: 100% -480px }
.bb_31 { background-position: 100% -496px }
.bb_32 { background-position: 100% -513px }

/*** Thx joomla ;) ***/
.content-cpanel {width:98%;margin:auto;text-align:center;}
.cpanel {
	background-color: #FFB0FF;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
	border: 1px solid #AB59A1;
}
.cpanel a {}
.cpanel img {padding: 10px 0;margin: 0 auto;}
.cpanel-neutre {
	min-width:220px;
	min-height:200px;
	margin-right:5px;
	margin-bottom:5px;
	padding:5px;
}
.cpanel-normale {
	min-width:180px;
	min-height:97px;
	margin-right:15px;
	margin-bottom:15px;
	padding:5px;
}

/* pour mettre une bulle en haut à gauche de la div */
.bubule {
	float:right;
	width:25px;
	margin-top:-28px;
	display:block;
}
.bubule_inner{
	color:#000000;
	font-size: 12px;
	text-shadow:1px 0 0 #818181;
	background:transparent url('images/panel_notification.png') no-repeat center;
	position: absolute;
	width:45px;
	height:45px;
	display:block;
	text-align:center;
	padding-top:10px;
}



/*
 * @author          Designcise
 * @created 		06 February, 2015
 * @revised 		01 April, 2015
 * @license         This file is a commercial file, which is available for purchase from  
 *                  http://www.designcise.com/. Any illegal copying, distribution, packaging 
 *                  or re-production of this file for commercial or personal use is strictly 
 *                  prohibited and will be considered theft. For full terms of license see 
 *                  http://codecanyon.net/licenses/regular_extended.
 * @copyright       The author is the first owner of copyright and reserves all rights to
 *                  all written work contained in this file. Distribution, re-production
 *                  or commercial use of the written work in this file, without the author's
 *                  signed permission, prior consent or a valid license, is strictly prohibited.
 *                  The author is protected by the "Copyright, Designs and Patents Act 1988" of
 *                  the United Kingdom. Any infringement of the copyright, in or outside of the
 *                  United Kingdom, may result in a lawsuit. By using this file, you agree to 
 *                  abide by the terms of the license.
Licensee: yann boily
Vous ne pouvez pas réutiliser ou reproduire ce code dans vos projet !
 */
		
/* SIZE
-------------------------------------------------------------------*/
.side-dock {width: 225px; left: -225px;}
.side-dock > ul .caption {height: 30px; padding-top: 5px; padding-bottom: 15px;}
.side-dock > .header, 
.side-dock > ul, 
.side-dock > .footer {padding-top: 15px; padding-bottom: 15px;}
.side-dock ul a {height: 30px; padding-top: 5px; padding-bottom: 15px;}
.side-dock::-webkit-scrollbar {width: 7px;}

/* STRUCTURE
-------------------------------------------------------------------*/
.side-dock {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: fixed;
	top: 0;
	z-index: 999999;
	-webkit-transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); 
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.side-dock.open {left: 0;}
.side-dock::-webkit-scrollbar {opacity: 0; visibility: hidden;}
.side-dock.open::-webkit-scrollbar {opacity: 1; visibility: visible;}
.side-dock > ul, 
.side-dock > ul ul {
	list-style: none; 
	width: 100%;
	margin: 0; 
	padding-right: 0;
	padding-left: 0;
}
.side-dock > ul > li {overflow: hidden;}
.side-dock > ul .caption {
	margin: 0;
	padding-right: 0;
	padding-left: 10%;
	font-size: 14px;
	font-weight: 700;
	position: relative;
	z-index: 100001;
}
.side-dock > ul ul {
	display: none;
	position: relative;
	z-index: -1;
	overflow: hidden;
	-webkit-transition: margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}
.side-dock > ul ul.open {position: relative; z-index: auto;}
.side-dock ul a {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding-right: 0;
	padding-left: 10%;
	font-size: 14px;	
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none !important;
	vertical-align: middle;
	border: 0;
	overflow: hidden;
}
.side-dock > ul ul a {
	width: 100%;
	padding-right: 10.5%;
	padding-left: 20.5%;
}
.side-dock > .header, 
.side-dock > .footer {
	margin: auto;
	padding-right: 0;
	padding-left: 10%;
}
.side-dock > .header {border-bottom: 1px solid transparent;}
.side-dock > .footer {border-top: 1px solid transparent;}
.side-dock > .header > *,
.side-dock > .footer > * {display: inline-block; vertical-align: middle;}
.side-dock ul a:before,
.side-dock > .header:before, 
.side-dock > .footer:before {content: '\20'; display: inline-block; width: 0; height: 100%; vertical-align: middle;}

/* APPEARANCE
-------------------------------------------------------------------*/
.side-dock {font: 13px/1.5 "Arial", Helvetica, sans-serif; color: rgba(0, 0, 0, 0.54);}
.side-dock.open {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.side-dock, 
.side-dock > ul .caption {background-color: #fce4ec;}
.side-dock > ul .caption,
.side-dock ul a {color: #e91e63; cursor: pointer;}
.side-dock > .header,
.side-dock > .footer {background-color: #ff4081;height: 48px;}
.side-dock > ul .caption:hover, 
.side-dock ul a:hover {color:#FFFFFF;background-color: #ff80ab;}
.side-dock::-webkit-scrollbar-track {background-color: #f5f5f5;}
.side-dock::-webkit-scrollbar-thumb {background-color: #bbb;}

/* SIZE
-------------------------------------------------------------------*/
.drawer {width: 50px; height: 50px;}
.drawer > .dropdown > ul > li > a {width: 40px; height: 40px;}
.drawer [data-tooltip]:after {max-width: 235px; height: 15px; padding: 10px;}

/* STRUCTURE
-------------------------------------------------------------------*/
.drawer {
	margin-top: 0;
	margin-bottom: auto;
	margin-right: auto; 
	margin-left: 0; 	
	vertical-align: middle;	
	position: relative;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 999999;	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer[data-position="bounding-box"] {position: absolute;}
.drawer[data-position="sticky"] {position: fixed; top: 5px; left: 5px;}
.drawer[data-x="right"] {margin-right: 0; margin-left: auto; right: 0; left: auto;}
.drawer[data-x="center"] {margin-right: auto; margin-left: auto; right: 0; left: 0;}
.drawer[data-y="center"] {margin-top: auto; margin-bottom: auto; top: 0; bottom: 0;}
.drawer[data-y="bottom"] {margin-top: auto; margin-bottom: 0; top: auto; bottom: 0;}
.drawer[data-position="sticky"][data-x="right"] {right: 15px;}
.drawer[data-position="sticky"][data-y="bottom"] {bottom: 15px;}
.drawer > .caption {
	display: block;
	width: 100%;
	height: 100%;	
	border-radius: 50%;	
	-webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer[data-y="bottom"] > .caption {margin-bottom: 0; margin-top: 0;}
.drawer > .caption > * {
	display: inline-block;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;	
	text-align: center;
	vertical-align: middle;	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;	
	-ms-transform-origin: center center;
	-moz-transform-origin: center center; 
	-webkit-transform-origin: center center;
	-o-transform-origin: center center; 
	transform-origin: center center;	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer > .caption * {
	display: inline-block; 
	top: -26px;
	-webkit-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer > .caption > .open,
.drawer.open > .caption > .close {visibility: visible; opacity: 1;}
.drawer.open > .caption > .open,
.drawer > .caption > .close {visibility: hidden; opacity: 0;}
.drawer > .caption > .open > *,
.drawer.open > .caption > .close > * {
	-webkit-transform: scale(1) rotate(0);
	-moz-transform: scale(1) rotate(0);
	-ms-transform: scale(1) rotate(0);
	transform: scale(1) rotate(0);
}
.drawer.open > .caption > .open > *,
.drawer > .caption > .close > * {
	-webkit-transform: scale(0.5) rotate(360deg);
	-moz-transform: scale(0.5) rotate(360deg);
	-ms-transform: scale(0.5) rotate(360deg);
	transform: scale(0.5) rotate(360deg);
	color: #ff80ab;
}
.drawer > .dropdown {
	width: 100%;
	text-align: center;	
	position: absolute;
	top: 100%;
	bottom: auto;	
	opacity: 0;
	visibility: hidden;	
	-webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);	
	-webkit-transition-property: opacity, visibility, transform; 
	-moz-transition-property: opacity, visibility, transform; 
	-o-transition-property: opacity, visibility, transform; 
	transition-property: opacity, visibility, transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer[data-y="bottom"] > .dropdown {bottom: 100%; top: auto;}
.drawer[data-open-dir="bottom"] > .dropdown {top: 100% !important; bottom: auto !important;}
.drawer[data-open-dir="top"] > .dropdown {bottom: 100% !important; top: auto !important;}
.drawer.open > .dropdown {
	opacity: 1;
	visibility: visible;	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer > .dropdown > ul {
	list-style: none;
	width: 100%;
	margin: 10px auto 0;
	padding: 0;	
	position: absolute;
	top: 0;
	left: 0;
	right: 0;	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer[data-y="bottom"] > .dropdown > ul {margin-top: -100% !important; margin-bottom: 10px !important; top: auto; bottom: -100%;}
.drawer[data-y="top"] > .dropdown > ul {margin-top: 10px !important;}
.drawer[data-open-dir="top"] > .dropdown > ul {
	margin-top: -100% !important;
	margin-bottom: 10px !important;	
	top: auto !important;
	bottom: -100% !important;
}
.drawer[data-open-dir="bottom"] > .dropdown > ul {
	margin-top: 10px !important;
	margin-bottom: 0 !important;	
	top: 0 !important;
	bottom: auto !important;
}
.drawer > .dropdown > ul > li > a {
	display: inline-block;	
	margin-top: 10px;	
	text-align: center;	
	text-decoration: none !important;
	border-radius: 50%;
	border: none;	
	position: relative;	
	-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer.open > .dropdown > ul > li > a {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.drawer > .dropdown > ul > li:first-child > a {margin-top: 0;}
.drawer > .dropdown > ul > li > a > * {vertical-align: middle;}
.drawer > .caption > :before,
.drawer > .dropdown > ul > li > a:before {content: '\20'; display: inline-block; width: 0; height: 100%; vertical-align: middle;}
.drawer [data-tooltip] {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer [data-tooltip]:after {
	display: inline-block;
	margin: auto 0;
	content: attr(data-tooltip);	
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;	
	border-radius: 4px;	
	opacity: 0;
	visibility: hidden;	
	overflow: hidden;	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	right: auto;	
	-webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
	-moz-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
	-o-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer [data-tooltip]:hover:after {
	margin-left: 10px;
	margin-right: auto;	
	visibility: visible;
	opacity: 1;	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.drawer[data-x="right"] [data-tooltip]:after {right: 100%; left: auto;}
.drawer[data-x="right"] [data-tooltip]:hover:after {margin-right: 10px; margin-left: auto;}
.drawer[data-tooltip-dir="right"] [data-tooltip]:after {left: 100% !important; right: auto !important;}
.drawer[data-tooltip-dir="left"] [data-tooltip]:after {right: 100% !important; left: auto !important;}
.drawer[data-tooltip-dir="right"] [data-tooltip]:hover:after {margin-left: 10px !important; margin-right: auto !important;}
.drawer[data-tooltip-dir="left"] [data-tooltip]:hover:after {margin-right: 10px !important; margin-left: auto !important;}

/* APPEARANCE
-------------------------------------------------------------------*/
.drawer {font-family: "Arial", Helvetica, sans-serif;}
.drawer > .caption,
.drawer > .dropdown > ul > li > a {color: #FFFFFF; background-color: #ff4081; cursor: pointer;}
.drawer > .caption,
.drawer > .dropdown > ul > li > a {
	-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
	-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
	-o-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.drawer > .caption:hover,
.drawer > .dropdown > ul > li > a:hover {
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.drawer > .caption > * {font-size: 32px; font-weight: 500;}
.drawer [data-tooltip]:after {
	font-size: 14px; 
	text-overflow: ellipsis; 
	color: #fff; 	
	background-color: rgba(0, 0, 0, 0.54);
}


/* Navbar */
.top-nav {
  background-color: #ff4081;
  width: 100%;
  height: 48px;
  position: fixed;
  z-index: 9999999;
  top:0;
  left:0;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
.top-nav ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
.top-nav .align-right {
  float: right;
}
.top-nav .align-center {
  text-align: center;
}
.top-nav ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 10px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
.top-nav ul li a:hover {
  color: #FFFFFF;
  background-color: #ff80ab;
}
/* icon Navbar */
.menu-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%; 
}
.menu-icon span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 22px;
	height: 2px;
	background-color: #FFF;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%); 
}
.menu-icon span::before, .menu-icon span::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 22px;
	height: 2px;
	background-color: #FFF;
	-webkit-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	transform: translateY(-6px);
	-webkit-transition: -webkit-transform 0.8s;
	transition: transform 0.8s; 
}
.menu-icon span::after {
	-webkit-transform: translateY(6px);
	-ms-transform: translateY(6px);
	transform: translateY(6px); 
}
.menu-icon:hover span::before {
	-webkit-transform: translateY(-8px);
	-ms-transform: translateY(-8px);
	transform: translateY(-8px); 
}
.menu-icon:hover span::after {
	-webkit-transform: translateY(8px);
	-ms-transform: translateY(8px);
	transform: translateY(8px); 
}
.menu-icon-svg span {
	-webkit-transition: background 0.8s steps(1, end);
	transition: background 0.8s steps(1, end); 
}
.menu-icon-svg span::before, .menu-icon-svg span::after {
	-webkit-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	transform-origin: 100% 50%; 
}
.menu-icon-svg svg {
	opacity: 0;
	fill: transparent;
	stroke-width: 2px;
	stroke: #FFF;
	stroke-dasharray: 22 230;
	-webkit-transition: stroke-dasharray 0.8s, stroke-dashoffset 0.8s, opacity 0.8s steps(1, end);
	transition: stroke-dasharray 0.8s, stroke-dashoffset 0.8s, opacity 0.8s steps(1, end); 
}
.menu-icon-svg.is-opened span {
	-webkit-transition: background 0.8s steps(1, start);
	transition: background 0.8s steps(1, start);
	background-color: transparent; 
}
.menu-icon-svg.is-opened span::before {
	-webkit-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
	-ms-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
	transform: translateX(-3px) translateY(-8px) rotate(-45deg); 
}
.menu-icon-svg.is-opened span::after {
	-webkit-transform: translateX(-3px) translateY(8px) rotate(45deg);
	-ms-transform: translateX(-3px) translateY(8px) rotate(45deg);
	transform: translateX(-3px) translateY(8px) rotate(45deg); 
}
.menu-icon-svg.is-opened svg {
	opacity: 1;
	-webkit-transition: opacity 0.8s steps(1, start);
	transition: opacity 0.8s steps(1, start);
	-webkit-animation: pathanimation 0.8s linear;
	animation: pathanimation 0.8s linear;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards; 
}
.menu-icon-svg.is-closed svg {
	-webkit-animation: pathanimation-out 0.8s linear;
	animation: pathanimation-out 0.8s linear; 
}
@-webkit-keyframes pathanimation {
  40% {
    stroke-dasharray: 22 230; 
  }
  60% {
    stroke-dashoffset: -65; 
  }
  100% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; 
  } 
}
@keyframes pathanimation {
  40% {
    stroke-dasharray: 22 230; 
  }
  60% {
    stroke-dashoffset: -65; 
  }
  100% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; 
  }
}
@-webkit-keyframes pathanimation-out {
  100% {
    stroke-dashoffset: 0; 
  }
  60% {
    stroke-dasharray: 22 230; 
  }
  40% {
    stroke-dashoffset: -65; 
  }
  0% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; 
  } 
}
@keyframes pathanimation-out {
  100% {
    stroke-dashoffset: 0; 
  }
  60% {
    stroke-dasharray: 22 230; 
  }
  40% {
    stroke-dashoffset: -65; 
  }
  0% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; 
  } 
}