@import url('reset.css');
	body {					
    font-family: Calibri, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	letter-spacing:1px;
	font-size: 30px;
	background-color:#fbfbfe;  
	overflow-y: scroll; /* always shows vertical scroll bar */
 
	}

@media (min-width:768px) { /* iPad mini vertical */
  body {
    font-size: 30px;
  }
}



/* DIVS */  

  #header1 { /* Any screen SMALLER then 768 pixels , ussualy iphones */
    margin: auto;
	z-index:10;
	text-align:center;
	padding-top:15px;	
	padding-bottom:10px;
}
  @media (min-width:768px) { /* Any screen BIGGER the 768 pixels */
  #header1 {
padding-top:50px;
  } 
}
#header2 {
    position: fixed;
    top: 15px;
    right: 15px;
	z-index:10;
	}
	
	
  #header3 { /* Any screen SMALLER then 768 pixels */
    margin: auto;
	margin-top:0px;
 	max-width:500px;
	min-height: 500px; 
	z-index:10;
	text-align:center;
	padding-top:15px;
	padding-left:10px;
	padding-right:10px;
	border-radius:16px;box-shadow:0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12); 
	
	
  }
  @media (min-width:768px) { /* Any screen BIGGER the 768 pixels */
  #header3 {
border-radius:16px;box-shadow:0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
margin-top:0px;
padding:35px;
  } 
}
#navigation {
text-align:left; 
font-weight:bold;
font-size:12px; 
margin-left:5px; 
margin-top:-10px;	
margin-bottom:-10px;

}
  @media (min-width:768px) { /* Any screen BIGGER the 768 pixels */
  #navigation {
font-size:10px;	
margin-left:-20px; 
margin-top:-25px;
margin-bottom:10px;
	
  } 
}


 #footer1 {
    position: fixed;
    bottom: 0px;
    left: 2px;
	border-top:1px solid;
	background-color:#fff; 
	width:100%;
	padding-top:5px;
	padding-bottom:3px;
	padding-left:8px;
	}
@media (min-width:768px) { /* Any screen BIGGER the 768 pixels */
 #footer1 {
	text-align:center;
	}
	
}

@media (min-height:1000px) { /* Any screen BIGGER the 1080 pixels */
 #footer1 {
	position:relative;
	top:25px;
	border-top:0px;
	border-bottom:1px solid;
	background-color:transparent; 
	text-align:center;
	}
	
}
  #footer2 {
    position: fixed;
    bottom: 7px;
    right: 20px;
	}
	
	@media (min-height:1000px) { /* Any screen BIGGER the 1080 pixels */
 #footer2 {
	position:relative;
	text-align:right;
	}
	
}
  
#fixed_menu {
    position:fixed;
	top: 70px;
    left: 0;
	background-color:#fff; 
	width:100%; 
	height:auto;
	z-index:10;
  }



/* Content : Because our fixed div varies in height the padding is to much on some pages. We can fix this with javascript where we measure the height of the fixed div and then apply that as padding or margin on the content div. But, this introduces LAG. Because we will only ever have 2 different sizes of our fixed header we simply create 2 content divs with 2 different paddings or margins.*/
.content {
  padding-left:0px;
  padding-right:0px;
  height:auto;
  text-align:center;
  padding-top:146px;
  padding-bottom:50px;
} 
@media (min-width:356px) { /* iphone 6 vertical and horizontal */
  .content {
    padding-top:166px;
  }
}
@media (min-width:768px) { /* iPad mini vertical */
  .content {
    padding-top:215px;
  }
}
.content2 {
  padding-left:0px;
  padding-right:0px;
  height:auto;
  text-align:center;
  padding-top:116px;
  padding-bottom:50px;
} 
@media (min-width:356px) { /* iphone 6 vertical and horizontal */
  .content2 {
    padding-top:126px;
  }
}
@media (min-width:768px) { /* iPad mini vertical */
  .content2 {
    padding-top:180px;
  }
}
/* Menu font used by menu.php*/
.menu-font {
font-size: 9px;
} 
@media (min-width:356px) { /* iphone 6 vertical and horizontal */
  .menu-font {
font-size: 11px;
  }
}
@media (min-width:768px) { /* iPad mini vertical */
  .menu-font {
font-size: 11px;
  }
}
/* Anchors - Fix for the inacurate landing of anhors combined with fixed divs */
a.anchor { 
    display: block;
    position: relative;
    top: -100px;
    
}
@media (min-width:356px) { /* iphone 6 vertical and horizontal */
  a.anchor {
top: -120px;
  }
}
@media (min-width:768px) { /* iPad mini vertical */
  a.anchor {
top: -160px;
	
  }
}


.accordion {
  background-color:#fbfbfe;
  color: #444; 
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: 1px solid;
  border-color:#E1E6ED; 
  text-align: left;
  outline: none;
  font-size: 14px;
  transition: 0.4s;
  border-radius:5px;
}

.active, .accordion:hover {

}

.accordion:after {
  content: '\002B';
  /* color Test: removed and defined in the divs themselves to quickfix the bug color #777; */
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: #fbfbfe;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/* Tooltip popups - note we have id tooltip and tooltip left. tooltip left is for when we need the tooltip to popup left of the element*/
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 190px;
    background-color: #007AFF;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -20px;
	margin-bottom:10px;
	border: 2px solid;
     /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tooltip-left {
    position: relative;
    display: inline-block;
}
.tooltip-left .tooltiptext-left {
    visibility: hidden;
    width: 120px;
    background-color: #007AFF;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
	padding: 20px;
     /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}
.tooltip-left:hover .tooltiptext-left {
    visibility: visible;
    opacity: 1;
}

/* Fonts and stuff */  

/* Note, this is a class we use so we can use different sizes using div class */ 
.h1 {
	font-family: Calibri, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	letter-spacing:1px;
	display:inline-block;
	color:black;
	
} 
 
@media (min-width:768px) { /* iPad mini */
  .h1 {
    font-size: 16px;
	letter-spacing:1px;
	}
}

.h2 {
letter-spacing:1px;	 
font-size:12px;  
display:inline;
}
@media (min-width:768px) { /* iPad mini */
.h2 {
    font-size: 15px;
	}
}

/* Fonts and stuff */  
h1 {
	font-family: Calibri, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	letter-spacing:1px;
	display:inline-block;
	color:black;
	
} 
 
@media (min-width:768px) { /* iPad mini */
  h1 {
    font-size: 26px;
	letter-spacing:1px;
	}
}


h2 {
letter-spacing:2px;	 
font-size:20px;  
display:inline;
}
@media (min-width:768px) { /* iPad mini */
  h2 {
    font-size: 25px;
	}
}


h3, h4, h5, h6 {
 
font-size:12px;
display:inline-block;
}
@media (min-width:768px) { /* iPad mini */
h3, h4, h5, h6 {
    font-size: 12px;
	display:inline-block;
	}
}



.carousel-header {
	font-family: Calibri, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 40px;
	letter-spacing:1px;
	display:inline-block;
	color:#362D2D;
}

@media (min-width:768px) { /* Any screen bigger then 768px */
  .carousel-header {
    font-size: 35px;
	line-height:70px;
	}
}



p, li, ul, table
{
	font-size:11px;
}
@media (min-width:768px) { /* iPad mini vertical */
  p, li, ul, table {
    font-size: 14px;
  }
}
a, .frm_btn {
	font-size:14px;	 
	font-family: Calibri, sans-serif;
	font-style:normal;
	font-variant: normal;
	letter-spacing:1px;
	font-weight: 900;
}
@media (min-width:768px) { /* iPad mini vertical */
  a, .frm_btn {
    font-size: 14px;
  }
}
a:link, .frm_btn {
	text-decoration: none;
	color: #007AFF; 
}
a:visited, .frm_btn {
	text-decoration: none;
	color: #007AFF;
}
a:hover, .frm_btn {
	text-decoration: none;

}
a:active, .frm_btn {
	text-decoration: none;
}


p
 {
	font-family: Calibri, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	letter-spacing:1px;
	 
}
li
{
	font-family: Calibri, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 25px;
	letter-spacing:1px;

}
ul
{
	font-family: Calibri, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 25px;
	letter-spacing:1px;
}

menu-text
 {
	color:white;
	font-family: Calibri, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	font-weight: 100;
	line-height: 10px;
	letter-spacing:1px;
	}
	
	
.dots {
  height: 20px;
  width: 20px;
  background-color: #007AFF;
  border-radius: 50%;
  display: inline-block;
  text-align:center;
  line-height:20px;
  font-size:11px;
  color:white;
}

/*SELECT Menu styling*/
.custom-select {
  position: relative;
  font-family: Arial;
  font-size:14px;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}


.form-radio
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: #666;
     top: 5px;
     height: 20px;
     width: 20px;
     border: 0;
     border-radius: 50px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none;
}
.form-radio:checked::before
{
     position: absolute;
     font: 13px;
     left: 8px;
     top: 3px;
     content: '\02143';
     transform: rotate(40deg);
}
.form-radio:hover
{
     background-color: #f7f7f7;
}
.form-radio:checked
{
     background-color: #f1f1f1;
}
label
{
     font-size: 12px;
     color: #007AFF;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     cursor: pointer;
} 


/* Table styling */  

table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}
table {
    border-collapse: collapse;
    width: 100%;
	font-family: Calibri, sans-serif;
	}
	@media (min-width:768px) { /* iPad mini vertical */
  table {
	width: 100%;
  }
}
th {
	background-color:#007AFF;
	color:white;
}
th, td {
    padding: 15px;
}
tr:nth-child(even){
	background-color: #f2f2f2;
	}


#box {
	border:1px solid; border-color:grey; border-radius:12px; background-color:#FBF8F8; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); width:auto; text-align:left; padding:20px;
}


/* A divider.. */
.divider {
	display: block;
	width:100%;
	height:1px;
	background-color:#CFCBCB;
	background-position:top;
	background-repeat:repeat-x;
	margin-bottom:5px;
	
	}


/* Responsive imgs */
.imgpercent5 {
    max-width: 5%; 
    height: auto;
    width: auto\9; /* ie8 */
}

.imgpercent10 {
    max-width: 10%; 
    height: auto;
    width: auto\9; /* ie8 */
}

.imgpercent20 {
    max-width: 20%; 
    height: auto;
    width: auto\9; /* ie8 */
}

.imgpercent30 {
    max-width: 30%; 
    height: auto;
    width: auto\9; /* ie8 */
}
.imgpercent40 {
    max-width: 40%; 
    height: auto;
    width: auto\9; /* ie8 */
}
.imgpercent70 {
    max-width: 70%; 
    height: auto;
    width: auto\9; /* ie8 */
}

.imgpercent99 {
    max-width: 99%; 
    height: auto;
    width: auto\9; /* ie8 */
}


/* A button used as, but not limited to, mostly form submits */
.frm_btn {
	border: 1px solid;  
	border-color:grey;
	border-radius:5px; 
	margin-top:10px;  
	margin-bottom:10px; 
	padding:7px; 
	height:auto;
	width:auto;
	text-align:center;  
	background-color:#FBF8F8; 	
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.frm_btn:hover {
    background-color: #007AFF; /* Blue */
    color: white;
}
.frm_btn:active {
  box-shadow: 0 2px #666;
  transform: translateY(2px);
}

/* Table div, sort of. We use this mainly to center content and colums to the left and right of that centered content */
 .tbl { 
	width:auto; 
	background-color: #F4F4F4;
	padding-top:20px;
	margin-bottom:50px;
	
 }
 .tbl_content_center {
	display:inline-block; 
	padding:10px; 
	width:auto; 
	text-align:center; 
	height:auto;
	
 }
 .tbl_clm_left {
	display:inline-block;  
	padding:10px; 
	width:auto; 
	text-align:center;
 }
 .tbl_img_left {
	float:left;
	display:block; 
	width:40%;
 }
 .tbl_btn_vertical {
	border: 1px solid;  
	border-radius:5px; 
	margin-bottom:10px; 
	padding:7px; 
	width:95%; 
	text-align:center;  
	background-color:#FBF8F8; 
	}
/* a div used to put multiple divs next to eachother instead of below eachoter. */
.box_xs {
	border-radius:5px;box-shadow:0 12px 18px 2px rgba(34,0,51,.04),0 6px 22px 4px rgba(7,48,114,.12),0 6px 10px -4px rgba(14,13,26,.12);
	display:inline-block;
	width: 80%;
	margin-top:25px;
	padding: 15px;
	margin-right: 10px;
	margin-left:10px;
	text-align:center;
	line-height:1.3em;
	}
/* Fade in - Makes divs fade in like magic! :p */
.fade_in_2 {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
.fade_in_5 { 
    animation: fadein 5s;
    -moz-animation: fadein 5s; /* Firefox */
    -webkit-animation: fadein 5s; /* Safari and Chrome */
    -o-animation: fadein 5s; /* Opera */
}

.fade_in_10 {
    animation: fadein 10s;
    -moz-animation: fadein 10s; /* Firefox */
    -webkit-animation: fadein 10s; /* Safari and Chrome */
    -o-animation: fadein 10s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* Thats all she wrote!!*/

/*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.flickity-prev-next-button:hover { background: white; }

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  filter: alpha(opacity=60); /* IE8 */
  opacity: 0.6;
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  filter: alpha(opacity=30); /* IE8 */
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}

/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
  color: #333;
  font-size: 26px;
}

/* ---- page dots ---- */
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.gallery {
  

    }
.gallery-nav {
  
    }
.gallery-cell {
  width: 100%;
  height:auto;
  margin-bottom:20px;
}
.gallery-cell-image {
  display: block;
  max-height: 100%;
  margin: 0 auto;
  max-width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.4s;
          transition: opacity 0.4s;
		  
}

/* fade in lazy loaded image */
.gallery-cell-image.flickity-lazyloaded,
.gallery-cell-image.flickity-lazyerror {
  opacity: 1;
}
.gallery-cell:before {
  display: none;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  color: white;
}
.gallery-nav .gallery-cell { 
  border-radius:5px;
  margin-top:5px;
  margin-bottom:5px;
  font-family: Calibri, sans-serif; 
  color:#007AFF;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 80px;
  font-size: 15px;
  }
	@media (min-width:356px) { /* iphone 6 vertical and horizontal */
  .gallery-nav .gallery-cell {
  line-height:25px;
  height: 25px;
  width: 110px;
  font-size: 20px;
  }
}
@media (min-width:768px) { /* iPad mini vertical */
  .gallery-nav .gallery-cell {
  line-height: 35px;
  height: 35px;
  width: 150px;
  font-size: 30px;
  }
}
.gallery-nav .gallery-cell:before {
  font-size: 50px;
  line-height: 80px;
  color:black;
  
}
.gallery-nav .gallery-cell.is-nav-selected {
  background:#007AFF;
  color:white;
  border-radius:5px;
  }
/* fade in lazy loaded image */
.gallery-cell-image.flickity-lazyloaded,
.gallery-cell-image.flickity-lazyerror {
  opacity: 100;
    -webkit-transition: opacity 1.4s;
          transition: opacity 1.4s;
  
}