/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~ Modele CAWI Ifop 2022 1.0.0~*/
/*~~~~~~~~~~~BAZDOS~~~~~~~~~~*/


/*.page,*/ 
.page_header, .question, .header1, .header2, .question_body, .input_cell, .option_cell, .option_column, .option_column,.graphical_select, .radiobon, .response_body,.response_row, .mobile_select, .numeric_input, .response_column, .question_text, .option, .footepxpr, .submit_div, .page_footer, .progress_bar, .response_column, .error_messages, .page_error, .question_error_box, .mobile_grid_options
{	
	/* RESET */
	margin: 0;
	padding: 0;
	font-family: 'nerislight', Arial, sans-serif;
}

/* ERROR */
.page_error, .question_error_box, .error_message { 
	background-color:#FFE0C4;
	color:#7d2617;
}
.question_error_box {
	color:#7d2617;	
	background: #FFE0C4; /* fallback color if gradients are not supported*/ 
	background: -webkit-linear-gradient(#FFE0C4, rgba(255,255,255,1));
	background: -moz-linear-gradient(#FFE0C4, rgba(255,255,255,1));
	background: -o-linear-gradient(#FFE0C4, rgba(255,255,255,1));
	background: linear-gradient(#FFE0C4, rgba(255,255,255,1));
	padding: 5px 20px 30px 20px!important;
}

#error_box {
	padding: 5px 20px 5px 20px;
}

.error_quest_highlight{
	border: 2px solid #E66E33!important; /* conflit avec ssi_stylex_x_x.css  */ 
}
.error_var_highlight {border: 2px solid #E66E33!important; /* conflit avec ssi_stylex_x_x.css  */ }

/* ERROR END */

/* KIT STYLE BOOK */
/*-- font--*/
@font-face {
    font-family: 'nerisblack';
    src: url('Neris-Black-webfont.eot');
    src: url('Neris-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-Black-webfont.woff2') format('woff2'),
         url('Neris-Black-webfont.woff') format('woff'),
         url('Neris-Black-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nerisblack_italic';
    src: url('Neris-BlackItalic-webfont.eot');
    src: url('Neris-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-BlackItalic-webfont.woff2') format('woff2'),
         url('Neris-BlackItalic-webfont.woff') format('woff'),
         url('Neris-BlackItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nerisbold_italic';
    src: url('Neris-BoldItalic-webfont.eot');
    src: url('Neris-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-BoldItalic-webfont.woff2') format('woff2'),
         url('Neris-BoldItalic-webfont.woff') format('woff'),
         url('Neris-BoldItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nerislight';
    src: url('Neris-Light-webfont.eot');
    src: url('Neris-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-Light-webfont.woff2') format('woff2'),
         url('Neris-Light-webfont.woff') format('woff'),
         url('Neris-Light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'nerislight_italic';
    src: url('Neris-LightItalic-webfont.eot');
    src: url('Neris-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-LightItalic-webfont.woff2') format('woff2'),
         url('Neris-LightItalic-webfont.woff') format('woff'),
         url('Neris-LightItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nerissemibold';
    src: url('Neris-SemiBold-webfont.eot');
    src: url('Neris-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-SemiBold-webfont.woff2') format('woff2'),
         url('Neris-SemiBold-webfont.woff') format('woff'),
         url('Neris-SemiBold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'nerissemibold_italic';
    src: url('Neris-SemiBoldItalic-webfont.eot');
    src: url('Neris-SemiBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-SemiBoldItalic-webfont.woff2') format('woff2'),
         url('Neris-SemiBoldItalic-webfont.woff') format('woff'),
         url('Neris-SemiBoldItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'neristhin';
    src: url('Neris-Thin-webfont.eot');
    src: url('Neris-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-Thin-webfont.woff2') format('woff2'),
         url('Neris-Thin-webfont.woff') format('woff'),
         url('Neris-Thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'neristhin_italic';
    src: url('Neris-ThinItalic-webfont.eot');
    src: url('Neris-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Neris-ThinItalic-webfont.woff2') format('woff2'),
         url('Neris-ThinItalic-webfont.woff') format('woff'),
         url('Neris-ThinItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}






/*-- end font --*/

/* colors */
.c-redifop	{color: rgba(178, 14, 16, 1); color:#b20e10} 
.c-yellow 	{color:rgba(230, 166, 55,1); color:#e6a637}
.c-yellow-0	{color:rgba(255,212,137,1); color:#FFD48}
.c-yellow-1	{color:rgba(252,195,95,1); color:#Fcc35f}

.c-warning	{color:rgba(244, 38, 16,1);color:#f42610}

.c-green 	{color:rgba(78, 111, 9,1); color:#4e6f09}
.c-azur		{color:rgba(37, 120, 125,1); color:#25787d}
.c-purple	{color:rgba(143, 11, 86,1); color:#8f0b56}
.c-blue	 	{color: rgba(47, 88, 152,1); color:#2f5898}
.c-white	{color: rgba(255,255,255,1); color:#FFFFFF}

.c-grey-0 	{color:rgba(228,228,228,1) ; color:#E4E4E4}
.c-grey 	{color: rgba(63,63,63,1); color: #3F3F3E}
.c-grey-2 	{color: rgba(115, 115, 115,1); color: #737373}
.c-black 	{color: rgba(29,29,27,1); color: #1D1D1B}

/*bg color*/
.alt_color1	{ background-color: transparent!important}
.alt_color2	{ background-color:  rgba(255,255,255,0.3) !important}

.bc-redifop		{background-color: rgba(178, 14, 16, 1); background-color:#b20e10} 
.bc-yellow		{background-color:rgba(230, 166, 55,1); background-color:#e6a637}
.bc-yellow-0 	{background-color:rgba(255,212,137,1); background-color:#FFD48}
.bc-yellow-1 	{background-color:rgba(252,195,95,1); background-color:#Fcc35f}

.bc-warning 	{background-color:rgba(221, 34, 34,1); background-color:#dd2222}

.bc-green 		{background-color:rgba(78, 111, 9,1); background-color:#4e6f09}
.bc-azur		{background-color:rgba(37, 120, 125,1); background-color:#25787d}
.bc-purple 		{background-color:rgba(143, 11, 86,1); background-color:#8f0b56}
.bc-blue 		{background-color: rgba(47, 88, 152,1); background-color:#2f5898}
.bc-white 		{background-color: rgba(255,255,255,1); background-color:#FFFFFF}
.bc-grey-0 		{background-color:rgba(228,228,228,1) ; background-color:#E4E4E4}
.bc-grey-2 		{background-color: rgba(115, 115, 115,1); background-color: #737373}
.bc-grey 		{background-color: rgba(63,63,63,1); background-color: #3F3F3E}
.bc-black 		{background-color: rgba(29,29,27,1); background-color: #1D1D1B}
.color-test 	{width: 25px; height: 25px; position: absolute; margin: 0 5px 0 5px; }
/* end color */

/* Margin */
.mn-5 	{margin:5px}
.mn-10 	{margin:10px}
.mn-15 	{margin:15px}
.mn-20 	{margin:20px}
.mn-25 	{margin:25px}
.mn-30 	{margin:30px}

.mn-t-5 	{margin-top:5px}
.mn-t-10 	{margin-top:10px}
.mn-t-15 	{margin-top:15px}
.mn-t-20 	{margin-top:20px}
.mn-t-25 	{margin-top:25px}
.mn-t-30 	{margin-top:30px}

.mn-b-5 	{margin-bottom:5px}
.mn-b-10 	{margin-bottom:10px}
.mn-b-15 	{margin-bottom:15px}
.mn-b-20 	{margin-bottom:20px}
.mn-b-25 	{margin-bottom:25px}
.mn-b-30 	{margin-bottom:30px}

.mn-r-5 	{margin-right:5px}
.mn-r-10 	{margin-right:10px}
.mn-r-15 	{margin-right:15px}
.mn-r-20 	{margin-right:20px}
.mn-r-25 	{margin-right:25px}
.mn-r-30 	{margin-right:30px}

.mn-l-5 	{margin-left:5px}
.mn-l-10 	{margin-left:10px}
.mn-l-15 	{margin-left:15px}
.mn-l-20 	{margin-left:20px}
.mn-l-25 	{margin-left:25px}
.mn-l-30 	{margin-left:30px}

/*padding*/
.pdd-5 		{padding:5px}
.pdd-10 	{padding:10px}
.pdd-15 	{padding:15px}
.pdd-20 	{padding:20px}
.pdd-25 	{padding:25px}
.pdd-30 	{padding:30px}

.pdd-t-5 	{padding-top:5px}
.pdd-t-10 	{padding-top:10px}
.pdd-t-15 	{padding-top:15px}
.pdd-t-20 	{padding-top:20px}
.pdd-t-25 	{padding-top:25px}
.pdd-t-30 	{padding-top:30px}

.pdd-b-5 	{padding-bottom:5px}
.pdd-b-10 	{padding-bottom:10px}
.pdd-b-15 	{padding-bottom:15px}
.pdd-b-20 	{padding-bottom:20px}
.pdd-b-25 	{padding-bottom:25px}
.pdd-b-30 	{padding-bottom:30px}

.pdd-r-5 	{padding-right:5px}
.pdd-r-10 	{padding-right:10px}
.pdd-r-15 	{padding-right:15px}
.pdd-r-20 	{padding-right:20px}
.pdd-r-25 	{padding-right:25px}
.pdd-r-30 	{padding-right:30px}

.pdd-l-5 	{padding-left:5px}
.pdd-l-10 	{padding-left:10px}
.pdd-l-15 	{padding-left:15px}
.pdd-l-20 	{padding-left:20px}
.pdd-l-25 	{padding-left:25px}
.pdd-l-30 	{padding-left:30px}


/*  */
h1 {font-family: 'nerislight',Arial, sans-serif;
	font-size: 1em
	}

h2,h3,h4,h5 {margin: 10px 0 10px 0}

em 		{font-size:1.2em; font-style: italic}

small 	{font-style: italic; color:#747474; }

label small {color:#3F3F3E;}
label mark {background-color: transparent}
mark 	{background-color: #E4E4E4;border-bottom: 1px solid #3F3F3E;padding: 0 2px 0 2px; }

a 		{ color: #b20e10; font-weight: bold}
a:hover {color:#6b080a}
a:visited {color: #0eb2b0}

blockquote {margin: 5px 15px; padding: 0px 15px; border-left: #b20e10 solid; color:#3F3F3E}

[class^="cartouche"]{padding: 3px 10px;color: white;-moz-border-radius: 16px;-webkit-border-radius: 16px;border-radius: 16px}
.cartouche {background-color: #747474;}

[class^="capsule"]{padding: 3px 10px; -moz-border-radius: 16px;-webkit-border-radius: 16px;border-radius: 16px; border: 3px solid;font-weight: bold;}
.capsule {border-color: #747474; color :#747474; }

#rank_div .draggable_button {border: 1px solid white!important;
background-color: rgba(255,255,255,0.2)!important;}
.rank_number{background-color: #FFFFFF!important}
.rank_drag_container_label{background-color: #FFFFFF}


.big-screen{left: -10%;
position: relative;
width: 120%;
background-color: white;;
right: -5%;
box-shadow: 1px 5px 10px 0px rgba(63,63,63 ,0.3);
border-radius: 13px;
overflow: hidden;
}

.big-screen img 
{vertical-align : bottom}
/*VARIANT */
.glue-r{right: 0;}
.w100 {min-width: 95.56%;}

/* FIN KIT */

/*Body*/

body, html{
	width: 100%;
	display: flex;
	min-height: 100vh;
}

form {
	margin:auto;
	align-self: center;
	width: 100%;
}

.page {
	min-height: 40%;
	position: relative;
 	margin: 100px auto 100px auto;
	padding-bottom: 80px;
	background-color: rgba(192, 192, 192, 0.3);
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	
	-webkit-box-shadow: 1px 5px 10px 0px rgba(63,63,63 ,0.3);
	-moz-box-shadow: 1px 5px 10px 0px rgba(63,63,63 ,0.3);
	box-shadow: 1px 5px 10px 0px rgba(63,63,63 ,0.3);
	
}
.numeric_input {margin: 15px 5px 5px 80px;height: 30px;font-size: 20px;}
.input_cell .numeric_input	{margin: 0px 5px 0px 5px; }

.response_row {border-bottom: 1px solid rgba(00,00,00,0.1);margin:2px 0; padding:2px 0}

.page_header { 
	position: relative;
	background-color: rgba(255,255,255,1);
	min-height: 60px;
	padding: 10px 0 0 0;
	-moz-border-radius: 25px 25px 0px 0px;
	-webkit-border-radius: 25px 25px 0px 0px;
	border-radius: 25px 25px 0px 0px;
}

.header_text .header_logo {	
	position: absolute;
	padding: 10px;
	top: -104%;
	display: flex;
}

.page_header  > .header_logo {
position: absolute;
right: 30px;
top: 2px;
}

.page_header  > .header_logo img {
	height: 55px;
}

.perso_logo { 
	position: absolute;
	padding: 10px;
	top: -140%;
	Background-color: #FFFFFF;
	-moz-border-radius: 25px 25px 0px 0px;
	-webkit-border-radius: 25px 25px 0px 0px;
	border-radius: 25px 25px 0px 0px;

}
.bulle_logo:first-child{margin-left:15px}
.bulle_logo { 
	display: inline-block;
	-moz-border-radius: 25px 25px 0px 0px;
	-webkit-border-radius: 25px 25px 0px 0px;
	border-radius: 72px;
	box-shadow: 0px 3px 26px 0px rgba(63,63,63 ,0.36);
	margin-left: -15px
}

.perso_logo img {height : 80px}
.bulle_logo img, .bulle_logo p {height : 70px; margin:15px;line-height: 70px;}

.input_cell .checkbox, .input_cell .checkboxselected, .input_cell .radioboxselected, .input_cell .radiobox  { margin: auto}
.response_column .checkbox, .response_column .checkboxselected, .response_column .radiobox, .response_column .radioboxselected { margin: 5px}


.header2, .header1 {
	background-color: rgba(255,255,255,1);
	padding:5px 25px 15px 25px;
}

.footer { 	padding:10px 25px 10px 25px;}

#Start_div { margin: 0 auto 0 auto; width: 50%}

.response_body, .inner_table { margin: 0px ; padding: 5px 5px 5px 5px }

.response_column	{padding: 5px 5px 5px 80px}


@media screen and (max-width: 1020px)
{.big-screen {width: 100%; left: 0}}


@media screen and (min-width: 900px)
	{
		.openend .question_body  {
		margin: 15px 5px 15px 80px;
		font-size: 20px;}
	}

.numeric .question_body {margin: 15px 5px 15px 80px;
font-size: 20px;}

.highlight {	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}

.page_footer { position:absolute; margin-top:40px; height: 0px}
.progress_bar {position: absolute; margin:5px; height: 0px}
.submit_div { }

.text_nav_button {border: none; padding:5px 0px 5px 0;}

#previous_button, #next_button {

	position: absolute; 
	width: 80px; 
	-moz-border-radius: 25px ;
	-webkit-border-radius: 25px ;	
	border-radius: 25px;
	
	background-color: #3F3F3E;
	
	transition: 1s;
		
	}

#previous_button:hover, #next_button:hover { 
	background-color: #b20e10;
	transition: 1s;
} 


#previous_button {	
	bottom: -33px;
	left: 25px;
	}

#next_button { 
	right:25px;
	bottom: -33px;
	}


.text_input, .numeric_input { 
	font-weight: bold;
	text-align: center;
	color:#606060;
	border-width:0px 0px 2px 0px;
	border-style:hidden hidden solid hidden;
	border-color:#606060 #606060 #606060 #606060;
	}

.numeric_input {	
	margin: 15px 5px 5px 80px;
	height: 30px;
	font-size: 20px;
}

.input_cell .numeric_input	{
	margin: 0px 5px 0px 5px;
}

.progress_bar { width: 20%;}

.clickable {
	transition: 0.3s;
}

.checkbox, .checkboxselected, .radiobox, .radioboxselected { 
	width:20px!important; height:20px!important; margin: 5px ;
	box-shadow: 0px 0px 3px #606060;
    -moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

.radiobox, .radioboxselected {
	width:20px; height:20px; margin: 5px ;	
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;	
	border-radius: 10px 10px 10px 10px;
	
	-moz-box-shadow: 0px 0px 3px #606060;
	-webkit-box-shadow: 0px 0px 3px #606060;
	box-shadow: 0px 0px 3px #606060;

    -moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box; 
	box-sizing: border-box;

}

.checkbox, .radiobox {background-color: white!important;}

.radioboxselected,.checkboxselected {     
    -moz-box-sizing: border-box;
   	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	background-color: #006579!important; 
	border: 5px solid rgba(255,255,255,1.00) ;
	-moz-box-shadow: 0px 0px 3px #606060;
	-webkit-box-shadow: 0px 0px 3px #606060;
	box-shadow: 0px 0px 3px #606060;
}

.visible-desktop {
                display: inline !important;
}

.visible-mobile {
                display: none !important;
}


@media screen and (max-width: 785px)
{	 
	body {overflow-x:hidden}
	form { height: 100%}
	.page_header{text-align: left;}
	.page{ margin: 50px auto 100px auto; padding-bottom: 40px; min-height: 80%}
	.perso_logo { padding: 10px; top: -160%; max-height: 40px; max-width: 50%; min-height: 40px;}
	h1 {font-size: 0.5em; line-height: 1em;}
	.header_text .header_logo {padding: 10px;top: -50px;}
	.bulle_logo img,.bulle_logo p  {height: 35px;margin: 8px; line-height: 35px; font-size: 0.7em} 
	.perso_logo img {height : 40px} 
	.w100 {min-width: 100%;}
	
	.progress_bar { width: 100%}
	
	.submit_div { width:80%; right:0px; left:0px;bottom: -20px; margin: 0 auto 0 auto}
	.progress_bar {position: relative;top: 75px;}
	.page_footer { position:absolute; margin-top:115px; height: 0px; overflow: visible}
	.page_header {min-height: 60px;padding: 5px 0 0 0;}
	.question.select .response_column {padding-left: 5px}
	.input_cell {padding: 6px;}
	.checkbox, .checkboxselected, .radiobox, .radioboxselected { width:30px!important; height:30px!important; margin: 10px ; }
	
	.question_body input {margin:10px 5px 10px 15px}
	
	.radiobox, .radioboxselected { width:30px; height:30px; margin: 10px ;	
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
	border-radius: 15px 15px 15px 15px;
	
	}
	.radioboxselected,.checkboxselected {     
		border: 8px solid rgba(255,255,255,1.00) ;

}
	
	.response_row {margin: 5px 0 5px 0}
	.mobile_select{background-color:  rgba(255,255,255,0.3) !important}
	.mobile_select.mobile_selected{ background-color: #606060!important; box-shadow: 0px 0px 0px rgba(255,255,255,0); color: rgba(195,195,195,1.00)}
	.mobile_select.mobile_selected small {color: #FFFFFF}
	.mobile_select .option_cell {padding-left: 10px}
	

	
	/*clickable response_row mobile_select
	clickable response_row mobile_select mobile_selected
	input_cell option_column
	graphical_select radiobox
	graphical_select radioboxselected*/

}

/*  */
.visible-desktop {
                display: none !important;
}
.visible-mobile {
                display: inline !important;
}
/*  */

/*ANIM */

#previous_button:hover span i{
	 animation:  arrow-l-anim ease 1s;
 animation-iteration-count: infinite;
 -webkit-animation:  arrow-l-anim ease 1s;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: 50% 50%;
 -moz-animation:  arrow-l-anim ease 1s;
 -moz-animation-iteration-count: infinite;
 -moz-transform-origin: 50% 50%;
 -o-animation:  arrow-l-anim ease 1s;
 -o-animation-iteration-count: infinite;
 -o-transform-origin: 50% 50%;
 -ms-animation:  arrow-l-anim ease 1s;
 -ms-animation-iteration-count: infinite;
 -ms-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
}

@-moz-keyframes  arrow-l-anim{
 0% {-moz-transform: translate(0px,0px) ;}
 10% {-moz-transform: translate(0px,0px) ;}
 50% {-moz-transform: translate(-10px,0px) ;}
 100% {-moz-transform: translate(0px,0px) ;}
 100% {-moz-transform: translate(0px,0px) ;}
}

@-webkit-keyframes  arrow-l-anim {
 0% {-webkit-transform: translate(0px,0px) ;}
 10% {-webkit-transform: translate(0px,0px) ;}
 50% {-webkit-transform: translate(-10px,0px) ;}
 100% { -webkit-transform: translate(0px,0px) ;}
 100% {-webkit-transform: translate(0px,0px) ;}
}

@-o-keyframes  arrow-l-anim {
 0% {-o-transform: translate(0px,0px) ;}
 10% {-o-transform: translate(0px,0px) ;}
 50% { -o-transform: translate(-10px,0px) ;}
 100% { -o-transform: translate(0px,0px) ;}
 100% {-o-transform: translate(0px,0px) ;}
}

@-ms-keyframes  arrow-l-anim {
 0% {-ms-transform: translate(0px,0px) ;}
 10% {-ms-transform: translate(0px,0px) ;}
 50% {-ms-transform: translate(-10px,0px) ;}
 100% {-ms-transform: translate(0px,0px) ;}
 100% {-ms-transform: translate(0px,0px) ;}
}
	
@keyframes  arrow-l-anim{
 0% {transform: translate(0px,0px) ;}
 10% {transform: translate(0px,0px) ;}
 50% {transform: translate(-10px,0px) ;}
 100% {transform: translate(0px,0px) ;}
 100% {transform: translate(0px,0px) ;}
}


 #next_button:hover span i{
 animation: arrow-anim ease 1s;
 animation-iteration-count: infinite;
 transform-origin: 50% 50%;
 -webkit-animation: arrow-anim ease 1s;
 -webkit-animation-iteration-count: infinite;
 -webkit-transform-origin: 50% 50%;
 -moz-animation: arrow-anim ease 1s;
 -moz-animation-iteration-count: infinite;
 -moz-transform-origin: 50% 50%;
 -o-animation: arrow-anim ease 1s;
 -o-animation-iteration-count: infinite;
 -o-transform-origin: 50% 50%;
 -ms-animation: arrow-anim ease 1s;
 -ms-animation-iteration-count: infinite;
 -ms-transform-origin: 50% 50%;
}

@keyframes arrow-anim{
 0% {transform: translate(0px,0px) ;}
 10% {transform: translate(0px,0px) ;}
 50% {transform: translate(10px,0px) ;}
 100% {transform: translate(0px,0px) ;}
 100% {transform: translate(0px,0px) ;}
}

@-moz-keyframes arrow-anim{
 0% {-moz-transform: translate(0px,0px) ;}
 10% {-moz-transform: translate(0px,0px) ;}
 50% {-moz-transform: translate(10px,0px) ;}
 100% {-moz-transform: translate(0px,0px) ;}
 100% {-moz-transform: translate(0px,0px) ;}
}

@-webkit-keyframes arrow-anim {
 0% {-webkit-transform: translate(0px,0px) ;}
 10% {-webkit-transform: translate(0px,0px) ;}
 50% {-webkit-transform: translate(10px,0px) ;}
 100% { -webkit-transform: translate(0px,0px) ;}
	100% {-webkit-transform: translate(0px,0px) ;}
}

@-o-keyframes arrow-anim {
 0% {-o-transform: translate(0px,0px) ;}
 10% {-o-transform: translate(0px,0px) ;}
 50% { -o-transform: translate(10px,0px) ;}
 100% { -o-transform: translate(0px,0px) ;}
 100% {-o-transform: translate(0px,0px) ;}
}

@-ms-keyframes arrow-anim {
 0% {-ms-transform: translate(0px,0px) ;}
 10% {-ms-transform: translate(0px,0px) ;}
 50% {-ms-transform: translate(10px,0px) ;}
 100% {-ms-transform: translate(0px,0px) ;}
 100% {-ms-transform: translate(0px,0px) ;}
}