/* ------------------------------------------------------------------------------------------------- basisinstellingen en body */
body {
	font-family: Tahoma, sans-serif;
  margin: 0 auto; 
	color: #666;/* basis tekstkleur */
	
	line-height: 1.2em;
	font-size: 0.9em;
	/*
	background: url(http://www.addisco.nl/plaatjes/schaduwl.png) repeat-y;
	background-color: #252525;
  background-image: url(http://www.addisco.nl/plaatjes/ag-index.png);
  background-repeat: repeat-x;
  */
}

h1 							{font-size: 1.4em; margin: 0 0 1% 0;}
h2 							{font-size: 1.2em; margin: 1% 0 1% 0;}
h3, h4, h5, h6 	{font-size: 1em; margin: 0 0 1% 0;}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

/* een kleine logo-afbeelding */
.logo_klein {
  max-height: 50px;
  vertical-align: middle;
  margin-left: 1%;
}

ul {
  list-style-position:inside;  
}

p {	
  margin:0 0 1% 0;
}

a {
	color: #09f;/* blauw */
	font-weight:bold;
	text-decoration:none;
	cursor: pointer;
}
a:hover {
	color:#000;font-weight:bold;text-decoration:none;
}

table { 
  width: 100%;
  display: block;
  margin: 1% 0;
}

tr {
  border: 1px solid lightgray;  
}

tr:nth-child(1) {
  border: 1px dashed lightgray;  
  margin-bottom: 10px;
}

tr:nth-child(even) {
  border: 1px solid lightgray;
}
tr:hover {
  background-color: #f1fdf5;  
}

tr.selected, .selected {
  background-color: #ffe7ba; 
}
tr.selected:hover {
  background-color: #f1fdf5; 
}
table.noHoverBackground tr:hover {
  background-color: transparent;
}

th {
  vertical-align: top;  
  text-align: left;
  padding: 3px;
  padding-right: 10px;
  white-space: nowrap;
  background: url('images/td_background.png') top right repeat-y;
}

td {
  vertical-align: top;  
  text-align: left;
  padding: 3px;
  padding-right: 10px;
  white-space: nowrap;
  background: url('images/td_background.png') top right repeat-y;
}

td.label {
  font-style: italic;  
}

td.waarde {
  font-weight: bold;
}

form {
  position: relative; 
}

label {
  font-size: inherit;
  display: block;
  clear: left;
  float: left; 
  width: 20%;
  margin: 1% 1% 0 0;
}

input {
  font-size: inherit;
  display: block;
  float: left;
  margin: 1% 0 0 0;
  width: auto;
  padding: 0.5%;
  border: 1px solid gray;
}

input:focus {
  background-color: #fff; /*oorspronkelijk #fffeb7 */
}

textarea:focus {
  background-color: #fff; 
}

input.checkbox { 
  width:auto;
}

/*knoppen*/

.submit {
	-moz-box-shadow:inset 0px 1px 0px 0px #7d7f80;
	-webkit-box-shadow:inset 0px 1px 0px 0px #7d7f80;
	box-shadow:inset 0px 1px 0px 0px #7d7f80;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #393a3b), color-stop(1, #0f181f));
	background:-moz-linear-gradient(top, #393a3b 5%, #0f181f 100%);
	background:-webkit-linear-gradient(top, #393a3b 5%, #0f181f 100%);
	background:-o-linear-gradient(top, #393a3b 5%, #0f181f 100%);
	background:-ms-linear-gradient(top, #393a3b 5%, #0f181f 100%);
	background:linear-gradient(to bottom, #393a3b 5%, #0f181f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#393a3b', endColorstr='#0f181f',GradientType=0);
	background-color:#393a3b;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #ebeef0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:13px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #6e7173;
}

.submit:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0f181f), color-stop(1, #393a3b));
	background:-moz-linear-gradient(top, #0f181f 5%, #393a3b 100%);
	background:-webkit-linear-gradient(top, #0f181f 5%, #393a3b 100%);
	background:-o-linear-gradient(top, #0f181f 5%, #393a3b 100%);
	background:-ms-linear-gradient(top, #0f181f 5%, #393a3b 100%);
	background:linear-gradient(to bottom, #0f181f 5%, #393a3b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f181f', endColorstr='#393a3b',GradientType=0);
	background-color:#0f181f;
}

.submit:active {
	position:relative;
	top:1px;
}

.schakelaar {
  text-decoration: underline;
  cursor: pointer;
}

select {
  display: block;
  float:left;
  margin: 1% 0 0 0;
  border: 1px solid gray;
  font-size: inherit;
}

textarea {
  display: block;
  float:left;
  margin: 1% 0 0 0;
  border: 1px solid gray;
  font-size: inherit;
  font-family: inherit;
  min-width: 60%;
  min-height: 50px;
}

.formFieldExplanation {
  display: block;
  font-size: smaller;
  font-style:italic;  
  color: #272727;
  clear: both;
  margin-left: 21%
}

.errorExplanation {
  display: block;
  font-size: smaller;
  color: red;
  clear: both;
  margin-left: 21%
}

.afterLabel {
  display: inline-block;
  margin-left: 10px;
}

.fout {
	border: 1px solid red !important;
}

.input-fout {
  border: 1px solid red !important;
  padding-right: 20px;  
  background: url('images/inputfout.png') top right no-repeat;
}

.input-waarschuwing {
  border: 2px solid orange !important;
}

.rood {
	color: red;
}
.groen {
	color: green;
}
.oranje {
	color: orange;
}
.blauw {
  color: blue;
}
.grijs {
  color: gray; 
}
.vet {
	font-weight: bold;
}
.cursief {
	font-style: italic;	
}

/* alignment left, right of centered */
.centered {
  text-align: center;  
}

.left {
  text-align: left; 
}

.right {
  text-align: right; 
}



.noDesktop {
  display: none !important; 
}

img.icon {
  height: 15px;  
}

img.startButton {
  height: 40px;
}


div#taalselector {
  float: right;  
}
div#taalselector img {
  width: 20px; 
}
.lang_selected img {
  width: 25px !important;
}

div.paginatie {
  display: block;
  width: auto;
  clear: both;
  text-align: center;
}
div.paginatie span {
  display: inline-block;
  color: white;
  border: 1px solid green;
  padding: .5%;
  text-decoration: none;
  width: auto;
  margin: 0 .5%;  
  background: green;
}
div.paginatie a {
  display: inline-block;
  border: 1px solid lightgray;
  padding: .5%;
  text-decoration: none;
  width: auto;
  margin: 0 .5%;  
}



/* ------------------------------------------------------------------------------------------------------- wachten */
div#wachten {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background: transparent url('images/transparantie_wachten.png');
}
div#wachten img {
  position: absolute;
  top: 48%;
  left: 45%;
}


/* ------------------------------------------------------------------------------------------------- bericht */
div#bericht {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  text-align: center;
  height: auto;
}
div#bericht div {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: white;
  height: auto;
  padding: 5px 10px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}  

div#bericht div.negatief {
  color: red;
  font-weight: bold;
  background: white;
  border: 1px solid red;
  box-shadow: 5px 5px 10px gray;
}

div#bericht div.positief {
  color: green;
  font-weight: bold;
  background: white;
  border: 1px solid green;
  box-shadow: 5px 5px 10px gray;  
}

div#bericht div.waarschuwend {
  color: orange;
  font-weight: bold;
  background: white;
  border: 1px solid orange;
  box-shadow: 5px 5px 10px gray;
}

span#bericht_sluiten {
  display: block;
  clear: both;
  width: 100%;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
}

/*-------------------------------------------------------------------------------------------------- container */
div#container {
  width: auto;
	margin: 0 auto;
	background: #fff;
	/* border: 1px solid gray; */
	padding: 1%;
}

/*-------------------------------------------------------------------------------------------------- header */
div#header_wrapper {
  border-bottom: 1px solid lightgray;  
  /*background-image: url(http://www.addisco.nl/plaatjes/balktop.png);*/
  background-repeat: repeat-x;
}

/* ===================================================== header_left ======================================= */
div#header_left {
}

div#header_logo img {
}

/* ===================================================== header_login ====================================== */
div#header_login {
  display: block;
  width: 50%;
  float: left;
  text-align: left;
}

/* ========================================================== hp_inloggen ==================================== */
div#hp_inloggen {
}
div#hp_inloggen a {
  color:#09f;font-weight:bold;text-decoration:none;
}
div#hp_inloggen a:hover {
  color:#000;font-weight:bold;text-decoration:none}
}
div#hp_inloggen a:active {
  box-shadow: none;
  margin-top: 2px;
  text-decoration: underline;
}


/* ========================================================== header_menu ====================================== */
div#header_menu {
  text-align: left;
  display: block;
  margin-top: 5px;
  position: relative;
  float: right;
  clear: both;
  width: auto;
  height: auto;
  /*outline: 1px solid red;*/
}

div#header_menu ul {
}

div#header_menu ul li.mainitem {
  display: inline-block;
  list-style-type: none;
  width: auto;
  color: white;
  background: green;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 3px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 80%;
}
div#header_menu ul li.mainitem a{
  color: inherit;
  text-decoration: none;
}

ul.subitem_hp {
  display: none;
}

div#header_menu ul li:hover ul.subitem_hp {
  display: block;
  position: absolute;
  top: 20px;
  z-index: 200;
  width: auto;
  border: 1px solid green;
  background: white;
}



ul.subitem_hp li.subitem {
  display: block;
  list-style-type: none !important;
  width: auto;
  margin-left: 0;
  color: black;
  background: white;
  border-radius: 0;
  padding: 3px;
  text-transform: uppercase;
  font-weight: bold;
}
ul.subitem_hp li.subitem a:hover {
  font-weight: bold;
}
li.subitem a{
  color: inherit;
  text-decoration: none;
}
li.subitem:nth-last-child(1) {
  border-top: 1px dashed lightgray; 
}
ul.subitem_hp  li.subitem:hover {
  background-color: #fffeb7;
}


/*-------------------------------------------------------------------------------------------------- inhoud */
div#inhoud {
	min-height: 450px;
	padding: 1% 0;
}


img#homepage_bedrijfslogo {
  width: auto; 
  float: right; 
  border:none; 
  min-width:150px; 
  max-width:30%;  
}


/* --------------------------------------------------- homepage_inloggen ----------------------------------- */
form#homepage_inloggen {
  display: block;
  width: 70%;
  margin: 30px auto 0;
  padding: 2%;
  border: 1px solid #249c48;/* groen */  
  
}

/* --------------------------------------------------- klanten ----------------------------------------------*/
table#tabel_klanten {
  background-image: none;
}

table#tabel_klanten a{
  font-weight:normal;
}

table#tabel_klanten span {
  color: gray;
  font-size: small;
  font-style: italic;
}
table#tabel_klanten th  {
  background-image: none;
}

table#tabel_klanten tr td {
  padding-bottom: 10px; 
  background-image: none;
  border-right: 1px solid lightgray;
}
table#tabel_klanten tr:nth-child(1) {
  
}
table#tabel_klanten tr td:nth-child(1) {
  font-weight: bold; 
  padding-right: 10px;
}

table.tabel_klanten_vestigingen {
  border: 1px solid green;  
  margin-left: 0%;
}

table.tabel_klanten_vestigingen tr {
  border: 0 !important;  
  width: 100% !important;
  
}

table.tabel_klanten_vestigingen tr td {
  color: black;
  background: white;
  font-weight: normal;
  border: 0 !important;
  text-align: right;
  padding-bottom: 2px !important;
}

table.tabel_klanten_vestigingen tr td:nth-child(1) {
  padding-right: 10px;
}


table.tabel_klanten_contactpersonen {
  border: 0;  
  margin-left: 0;
  text-align: left;
}
table.tabel_klanten_contactpersonen tr, table.tabel_klanten_contactpersonen td{
  border: 0; 
  background: none;
  padding: 0;
  border-right: 0!important;
  
}
table.tabel_klanten_contactpersonen tr td:nth-child(1) {
  padding-right: 0px;
  background: none;
  font-style:italic;
  font-weight: normal;
  color: gray;
  border: 0;
  font-weight: normal !important;
}



table.tabel_klanten_vestigingen_contactpersonen {
  border: 0;  
  margin-left: 10%;
  text-align: left;
}
table.tabel_klanten_vestigingen_contactpersonen tr td:nth-child(2) {
  padding-right: 0px;
  background: none;
  font-style:italic;
  color: gray;
  border: 0;
}

/* --------------------------------------------------- vaccineren -------------------------------------------*/

form#form1 input {
  width: 150px;  
}
form#form2 input {
  width: 150px;  
}

div.results {
  z-index: 100; 
  position: absolute; 
  display:inline-block; 
  width:auto; 
  background: #249c48;/* groen */
  min-width:159px;  
  border: 1px solid gray;
}
div.results a {
  display: inline-block;
  color: black; 
  min-width:149px;
  margin: 5px;
}
div.results a:hover {
  background-color: white; 
}

div.resultsDateOfBirth {
  z-index: 100; 
  position: absolute; 
  display:inline-block; 
  width:auto; 
  background: #249c48;/* groen */
  min-width:159px; 
  border: 1px solid gray;
}
div.resultsDateOfBirth a {
  display: inline-block;
  color: black;
  min-width:149px; 
  margin: 5px;
}
div.resultsDateOfBirth a:hover {
  background-color: white; 
}

/** vac_project **/

div#project_view_steps {
  display: none; 
}


div#vac_project {
}
div#vac_project table{
  width: auto;
}

/** vac_client **/

div#vac_client {
}

table#vac_client_table {
  width: 100%;
}


table#vac_client_table tr{
  border: none; 
}

table#vac_client_table tr td table{
  border:1px solid lightgray;
}

table#vac_client_table td{
  background: none;
}

td#vac_client_data {
  min-width: 200px;
  max-width: 400px;
  padding-right: 2%;
  /*outline: 1px solid red;*/
}

td#vac_client_data td {
  white-space: normal;
}

#vac_client_data_naam {
  display: block; 
  float: left;
  font-weight: bold; 
  font-size: 1.2em;
  margin-right: 1%;
  color: #249c48;/* groen */ 
  text-decoration: none;
}



/** vac_stap **/
div.vac_stap {
  display: block;
  width: auto;
  min-width: 240px;
  border: 1px solid gray;
  border-top-left-radius: 10px;
  margin-bottom: 1%;
  padding: 0%;
  box-shadow: 2px 1px 2px lightgray;
}

div.vac_stap_active {
  border: 2px solid green;  
  background: #d8f8d8; /* lichtgroen */
}


div.vac_stap_inactive {
  border: 1px solid gray;  
}


div.vac_stap_teller {
  display: block;
  color: white;
  background-color: #249c48;/* groen */
  width: 30px;
  height: 25px;
  float: left;
  margin: 0 1% 1% 0;
  text-align: center;
  font-size: 1.2em;
  border-radius: 5px;
  padding-top: 5px;
}

div.vac_stap_active div.vac_stap_teller {
  background-color: green;  
}
div.vac_stap_inactive div.vac_stap_teller {
  background-color: lightgray;  
}

div.vac_stap_titel {
  font-weight: bold; 
  border-bottom:1px solid gray;
  color: gray;
}
div.vac_stap_active div.vac_stap_titel {
  color: #249c48;/* groen */ 
}
div.vac_stap_inactive div.vac_stap_titel {
  font-style: italic; 
}

div.vac_stap_titel img {
  max-height: 20px; 
}

div.vac_stap_omschrijving {
  font-weight: normal; 
  font-size: small;
  font-style: italic;
  clear: both;
  padding-left: 35px;
  padding-right: 20px;
}

div.vac_stap_uitvoerdatum {
  float: left;
  width: auto;
  font-size: 90%;
  font-weight: bold;
  padding-left: 35px;
  padding-bottom: 1%;
  /* outline: 1px solid red; */
}

form.vac_stap_wijzigen {
  display: block;
  width: 90%;
  /*outline: 1px solid green;*/
}

form.vac_stap_wijzigen label {
  display: none;
}
form.vac_stap_wijzigen textarea {
  display: block;
  min-width: 400px;
  min-height: 30px;
  border: 1px solid lightgray;
  padding: 1%;
}

form.vac_stap_uitvoeren label {
  display: none;
}
div.vac_stap form {
  margin-left: 1%; 
}

form.vac_stap_verwijderen input{
  display: block;
  width: 30px;
  /* outline: 1px solid green; */
  float: right;
  background-color: red;
  color: white;
  font-size: 1.2em;
  padding-top: 0;
  text-align: center;
  width: 30px;
  height: 25px;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: none;
}

form.vac_stap_uitvoeren textarea {
  display: block;
  min-width: 380px;
  min-height: 30px;
  border: 1px solid green;
  padding: 1%;
}


.blocked, .blocked textarea, .blocked input {
  color: gray !important;
  font-style: italic !important;
  background: #e1e1e1 !important;
  border-color: gray !important;
}


/* --------------------------------------------------- cliënten ------------------------------ */
div#form_client_clientbestand {
  display: block;
  clear: both;
  border: 1px solid gray;
  padding: 1%;
}
div#form_client_clientbestand img {
  max-height: 100px; 
  clear: both;
}


/* --------------------------------------------------- client-view ------------------------------- */
div#client_view_memo {
  clear: both;
}

div#client_view_clientbestand {
  clear: both;
}
div#client_view_clientbestand img {
  max-height: 100px; 
  clear: both;
}


/* --------------------------------------------------- eenProgramma -----------------------------------------*/

div.eenProgramma {
  display: block;
  float: left;
  width: 200px;
  height: auto;
  margin: 1% 1% 1% 0;
  border: 1px solid green;
  padding: 1%;
  border-radius: 5px; 
  text-align: center;
}
div.eenProgramma_titel {
  height: 20px;
  font-weight: bold;
  overflow: hidden;
}
div.eenProgramma_omschrijving {
  height: 100px;
  overflow: hidden;
  text-align: left;
}

/* --------------------------------------------------- eenProject -----------------------------------------*/

div.eenProject {
  display: block;
  float: left;
  width: 200px;
  height: auto;
  margin: 1% 1% 1% 0;
  border: 1px solid green;
  padding: 1%;
  border-radius: 5px; 
  text-align: center;
}
div.eenProject_titel {
  height: 20px;
  font-weight: bold;
  overflow: hidden;
}
div.eenProject_omschrijving {
  height: 100px;
  overflow: hidden;
  text-align: left;
}

/* ----------------------------------------------------- memos -------------------------------------------- */
div.klant_view_een_memo {
  border: 1px solid gray; 
  font-family: tahoma;
  font-weight: normal;
  padding: 1%;
}
div.klant_view_een_memo em {
  font-size: smaller;
  font-weight: normal;
  color: gray;
  display: block;
  text-align: right;
  border-bottom: 1px dashed lightgray;
  padding-right: 1%;
}

/* ------------------------------------------------------------ client_view ------------------------------------ */
div#client_view_gegevens {
  display: block;
  clear: left;
}

/* ------------------------------------------------------------ client_wijzigen_vaccinaties -------------------- */
div#client_wijzigen_vaccinaties {
  display: block;
  padding: 1%;
  margin: 1% 0;
  border-radius: 10px;
  background: #f4eded;
}
div#client_wijzigen_vaccinaties h2 {
  font-size: 1.0em; 
  display: block;
  border-top: 1px solid red;
  margin: 0;
  padding: 0;
}
div#client_wijzigen_vaccinaties h3 {
  font-size: .8em; 
  display: block;
  margin: 0;
  padding: 0;
  color: green;
}



/* ---------------------------------------------------------------- emailer ---------------------------------- */
div#emailer_samenvatting {
  display: block;
  clear: both;
  border: 3px solid orange;
  margin-top: 10px;
  padding: 1%;
}

table#emailer_samenvatting_table tr {
  border: none;
}
table#emailer_samenvatting_table td {
  background: none; 
  padding-right: 10px;
}

div#emailer_variabelen {
  display: block;
  font-size: 90%;
}
div#emailer_variabelen span{
  display: inline-block;
  font-family: tahoma;
  color: #272727;
  padding: 2px 5px;
  border: 1px solid gray;  
}

.clicktags {
  cursor: pointer; 
}
.clicktags:hover {
  background-color: green;
  color: white !important;
}

div#emailer_voorbeeld {
  display: block;
  padding: 0.5%;
  border: 1px solid orange;
}

div#emailerResultaat {
  /* div die het resultaat weergeeft van een verstuurde mailing */
  display: block;
  clear: both;
  padding: 1%;
  border: 1px solid green;
  background-color: lightgreen;
  color: black;
  font-size: 120%;
}

/* formulier voor de vrije email-tekst */
form#emailer_form_free {
  padding: 1%;
  border: 5px solid orange;
}
form#emailer_form_free textarea {
  height: 250px; 
}

/* formulier voor het wijzigen van een template*/
form#emailer_form_template {
  padding: 1%;
  border: 5px solid green;
}
form#emailer_form_template textarea {
  height: 250px; 
}

/* ----------------------------------------------------------------------------------------------- lijst algemeen ----------- */
table#lijstAlgemeen {
  width: 100%; 
}

table.lijstAlgemeenStappen {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px 0px;
}

table.lijstAlgemeenStappen tr td {
  border: 1px solid red;
  width: 23%;
  text-align: center;
  border-radius:10px;
}


/* ------------------------------------------------------------------------------------------------- standaard_permissies */
form#standaard_permissies div{
  display: block;
  width: 40%;
  padding: 1%;
  border-left: 1px solid gray;
  float: left;
}
form#standaard_permissies {
  width: 100%;
}

form#standaard_permissies div label{
  width: 60%; 
}

/*-------------------------------------------------------------------------------------------------- logfile */
div#log {
  display: block;
}

#showLogfile {
  font-style: italic;
  cursor: pointer;
  text-decoration: underline;
  clear: both;
}

table#logfile {
  font-size: smaller;  
}

table#logfile th, table#logfile td{
  white-space: normal; 
}


/*-------------------------------------------------------------------------------------------------- voeter */
div#voeter {
  display: block;
  padding: 0;
}

div#voetermenu {
  display: block;
  width: auto;
  text-align: right;
}

div#voetermenu a{
  display: inline-block;
  padding: 0 1%;
  text-decoration: none;
  color: inherit;
  font-size: 80%;
  text-transform: uppercase;
  border-right: 1px solid black;
}
div#voetermenu a:nth-last-child(1) {
 border-right: none;
 padding-right: 0;
}


/*-------------------------------------------------------------------------------------------------- credits */
div#credits {
  /*outline: 1px dashed gray;*/ 
  width: 95%;
  font-size: 80%;
}
div#credits a {
  color: inherit;
  text-decoration: none;
}
div#credits img{
  height: 14px;
}  

/* ------------------------------------------------------------------------------------------------- inloggen */
div#inloggen {
  width: 90%;
  padding: 5%;
  min-width: 200px;
  margin: 0 auto;
  margin-top: 5%;
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #ebf8ff;
}


/* ------------------------------------- mijn_gegevens ------------------------- */
div#mijn_gegevens {
  display: none; 
}




/* ********************************************* RESPONSIVE CSS ******************************************* */
@media all and (max-width: 768px) {  
}

@media screen and (max-width: 320px) {
}  
/* ********************************************* EINDE RESPONSIVE CSS ******************************************* */