/* -------------------------------------------*/
/* YOU CAN ADD HERE YOUR PERSOLAL CSS CLASSES */
/* -------------------------------------------*/

.my-personal-class-here
{

}


/* ------------------------------------------------------------------ */
/* YOU CAN USE THE ROOT VARIABLES TO QUICK EXCHANGE THE SYSTEM COLORS */
/* ------------------------------------------------------------------ */

:root 
{
/* BODY COLORS */
--WS-col-background: white;
--WS-col-text: #101010;
--WS-col-link: orange;
--WS-col-link-hover: orangered;
	
/* MENU DESKTOP */
--WS-col-menu-background: transparent;
--WS-col-menu-item-background: transparent;
--WS-col-menu-item-text: #E0E0E0;
--WS-col-menu-item-background-hover: transparent;
--WS-col-menu-item-text-hover: #orangered;

/* MENU DESKTOP DROPDOWN*/
--WS-col-menu-dropdown-item-background: #303030;
--WS-col-menu-dropdown-item-text: #E0E0E0;
--WS-col-menu-dropdown-item-background-hover: orangered;
--WS-col-menu-dropdown-item-text-hover: white;

/* MENU MOBILE HAMB§URGER */
--WS-col-menu-mobile-hamburger-background: #E0E0E0;
--WS-col-menu-mobile-hamburger-border: #202020;

/* MENU DROPDOWN BAR */
--WS-col-menu-mobile-bar-background: black;

/* MENU MOBILE ITEM */
--WS-col-menu-mobile-item-background: #303030;
--WS-col-menu-mobile-item-text: #E0E0E0;
--WS-col-menu-mobile-item-background-hover: orangered;
--WS-col-menu-mobile-item-text-hover: white;

/* MENU MOBILE SUB ITEM */
--WS-col-menu-mobile-sub-item-background: #606060;
--WS-col-menu-mobile-sub-item-text: #E0E0E0;
--WS-col-menu-sub-item-background-hover: orangered;
--WS-col-menu-mobile-sub-item-text-hover: white;


/* BUTTONS */
--WS-col-button-background: linear-gradient(to top, #aaaaaa 0%, #eeeeee 100%);
--WS-col-button-text: #303030;
--WS-col-button-border: #808080;
--WS-col-button-text-hover: white;
--WS-col-button-background-hover: linear-gradient(to top, orangered 0%, orange 100%);

/* TEXT */
--WS-col-text: #101010;

/* POPUP */
--WS-col-popup-header-border: #505050;
--WS-col-popup-header-background: rgba(7,7,7,0.7);
--WS-col-popup-header-text: #E0E0E0;
--WS-col-popup-header-button-background: #D00000;
--WS-col-popup-header-button-text: #E0E0E0;
--WS-col-popup-header-button-background-hover: #F00000;
--WS-col-popup-header-button-text-hover: #E0E0E0;

--WS-col-popup-background: #E0E0E0;
--WS-col-popup-text: #101010;

/* SLIDER CARO§USEL */
--WS-col-slider-btn-background: rgba(4,4,4,0.2);
--WS-col-slider-btn-background-hover: rgba(4,4,4,0.8);
--WS-col-slider-btn-text: #f0f0f0;
--WS-col-slider-btn-text-hover: orangered;

}

/* -------------------------------------------- */
/* ------------ EXTERNAL FONTS LOAD ------------*/
/* -------------------------------------------- */
@font-face
{
  font-family: OpenSans-Regular;
  src: url('../Styles/OpenSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('../Styles/OpenSans-Regular.eot?#FooAnything') format('embedded-opentype'), /* IE6-IE8 */
     url('../Styles/OpenSans-Regular.woff') format('woff'), /* Modern Browsers */
     url('../Styles/OpenSans-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../Styles/OpenSans-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html, html a 
{
	font-family:OpenSans-Regular,calibri,verdana;
}

/* -------------------------------------------- */
/* ------------------- BODY --------------------*/
/* -------------------------------------------- */
body
{
    background-color:var(--WS-col-background);
    color: var(--WS-col-text);
}

/* -------------------------------------------- */
/* ----------------- LINKS ---------------------*/ 
/* -------------------------------------------- */
a
{
	color:var(--WS-col-link);
	text-decoration:none;
}
a:hover
{
	color:var(--WS-col-link-hover);
}

/* -------------------------------------------- */
/* ------------------ POPUP --------------------*/
/* -------------------------------------------- */
.ws_popup_header
{
	border:solid 1px var(--WS-col-popup-header-border);
	background-color:var(--WS-col-popup-header-background);
	color:var(--WS-col-popup-header-text);
}

.ws_popup_header input[type=submit]
{
	background-color:var(--WS-col-popup-header-button-background);
	color:var(--WS-col-popup-header-button-text);
}

.ws_popup_header input[type=submit]:hover
{
	background-color:var(--WS-col-popup-header-button-background-hover);
	color:var(--WS-col-popup-header-button-text-hover);
}

.ws_popup_body
{
	background-color:var(--WS-col-popup-background);
	color:var(--WS-col-popup-text);
}
			
/* -------------------------------------------- */
/* ------------------ TEXTBOX ------------------*/
/* -------------------------------------------- */
.ws_text
{
	color:var(--WS-col-text);
}

/* -------------------------------------------- */
/* ------------------ GRIDS ------------------*/
/* -------------------------------------------- */
.ws_grid_header
{
	background-color: transparent;
}

.ws_grid_row
{
	background-color: transparent;
}

.ws_grid_alternate_row
{
	background-color: transparent;
}

.ws_grid_button
{
	background:var(--WS-col-button-background);
	border:solid 1px var(--WS-col-button-border);
	color:var(--WS-col-button-text);

}
.ws_grid_button:hover
{
	border:solid 1px var(--WS-col-button-border);
	background:var(--WS-col-button-background-hover);
	color:var(--WS-col-button-text-hover);
}

/* -------------------------------------------- */
/* ------------------ BUTTONS ------------------*/
/* -------------------------------------------- */

/* UPLOAD FILE BUTTON */
::-webkit-file-upload-button
{
	background:var(--WS-col-button-background);
	border:solid 1px var(--WS-col-button-border);
	color:var(--WS-col-button-text);
}

::-webkit-file-upload-button:hover
{
	background:var(--WS-col-button-background-hover);
	border:solid 1px var(--WS-col-button-border);
}

.ws_button
{
	background:var(--WS-col-button-background);
	border:solid 1px var(--WS-col-button-border);
	color:var(--WS-col-button-text);
}

.ws_button:hover
{
	background:var(--WS-col-button-background-hover);
	border:solid 1px var(--WS-col-button-border-hover);
	border:solid 1px var(--WS-col-button-border);
}


/* -------------------------------------------- */
/* ------------------ TABS ------------------*/
/* -------------------------------------------- */
.ws_tabs
{
	margin:20px;
}

.ws_tabs_label
{
	background-color: silver;
	border-top:solid 1px #606060;
	border-left:solid 1px #606060;
	border-right:solid 1px #606060;
	border-bottom:solid 1px #606060;
	border-radius: 5px 5px 0 0;
	padding:10px;
	padding-right:30px;
	padding-left:30px;
	cursor: pointer;
	min-width:12%;
}

.ws_tabs_label_active
{
	background-color: white;
}

.ws_tabs_body
{
	padding:10px;
	border:solid 1px #606060;
}

.ws_tabs_body_active
{
}


/* -------------------------------------------- */
/* ------------------ SLIDER ------------------*/
/* -------------------------------------------- */


/* Slideshow container */
.ws_slider_container {
  width: 100%;
}

/* Hide the images by default */
.ws_slider_Slides {
}

.ws_slider_Slides img {
}

/* Next & previous buttons */
.ws_slider_prev, .ws_slider_next {
  background-color: var(--WS-col-slider-btn-background);
  color: var(--WS-col-slider-btn-text);
}


/* On hover, add a black background color with a little bit see-through */
.ws_slider_prev:hover, .ws_slider_next:hover {
	background-color: var(--WS-col-slider-btn-background-hover);
	color: var(--WS-col-slider-btn-text-hover);
}

/* The dots/bullets/indicators */
.ws_slider_dot {
  background-color: #bbb;
  border-radius: 50%;
  transition: background-color 0.6s ease;
}

.ws_slider_active, .ws_slider_dot:hover {
  background-color: #717171;
}

/* Fading animation */
.ws_slider_fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes ws_slider_fade {
  from {opacity: .4}
  to {opacity: 1}
}