@charset "utf-8";
body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  background: white;
}
a {
  color: #4a4a4a;
}
a:link {
  color: #000000;
}
a:visited {
  color: #000000;
}

/* mouse over link */
a:hover {
  color: #000000;
}
a:active {
  color: #000000;
}

/*Video____________________________________*/
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: relative;
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  text-align: left;
}
/*header_________________________________*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    transition: all 0.2s ease-in-out;
    height: auto;
    background-color:transparent;  
    
    text-align: center;
    line-height: 30px;
}

.header.active {
    background: #D3D3D3;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
/*Logo___________________________________*/
.logo {
	position:relative;
	padding-right:35px;
	position:absolute; top:0; left:0;
}
/*Container_____________________________*/
.container {
  margin:5%;
}
/*NavBar_________________________________*/
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  background-color: transparent;
}

/* The element at the top of the page right after the fixed navigation bar
   MUST have sufficient top margin or else it will be covered by the bar */
.content {
  margin-top: 20px;
}

/* Example responsive navigation menu  */
.fixed-nav-bar li, .fixed-nav-bar a { 
  height: 50px;
  line-height: 50px;
}
.menu {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  font-size: 0.8em;
}
.menu a, .menu a:visited {
  color: #000000;
}
.menu a:hover, .menu a:target {
  color: #0;
}
.menu-items {
  display: inline-block;
}
.sitename {
  display: inline-block;
  margin-right: 20px;
  margin-left: 10px;
}
a.sitename, a:visited.sitename {
  color: #e0e0e0;
}
.menu-items li {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}
.menu-items a {
  text-decoration: none;
}
.show, .hide {
  display: none;
  padding-left: 15px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center left;
  color: #dde1e2;
}
.show {
  background-image: url(assets/down-arrow-icon.png);
}
.hide {
  background-image: url(assets/up-arrow-icon.png);
}

@media only screen and (max-width: 800px) {
  .menu { 
    position: relative;
    width: 100%;
  }
  .sitename {
    position: absolute;
    top: 0;
    left: 15px;
    margin-left: 0px;
  }
  .menu-items {
    display: none; 
    width: 100%;
    margin-top: 50px;
    background-color: #D3D3D3;
  }
  .menu-items li {
    display: block;
    text-align: center;
  }
  .show, .hide {  
    position: absolute;
    top: 0;
    right: 15px;
  }
  .show {
    display: inline-block;
  }
  .hide {
    display: none;
  }
  #menu:target .show {
    display: none;
  }
  #menu:target .hide, #menu:target .menu-items {
    display: inline-block;
  }
}

@media only screen and (max-width: 220px) {
  .sitename, .show, .hide {
    font-size: 14px;
  }
}
/* WEB FONT */
@import url(http://fonts.googleapis.com/css?family=Signika:600|Varela+Round);

/* RESET */
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* BASIC */

h1, h2 {
  font-family: "Signika", sans-serif;
  font-weight: 600;
}
h1 {
  font-size: 36px;
  line-height: 46px;
  color: #e0e0e0;
}
h2 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: -20px;
}
p {
  margin: 20px 0;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

/* LAYOUT */
.fixed-nav-bar {

}

.content {
  position: relative;
  background: #464646 url(59H-from-gratisography.jpg) no-repeat center center fixed;
  background-size: cover;
 }
.description, .some-related-articles {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}
.description {
  padding-top: 100px;
  min-height: 250px;
  text-align: center;
}
.some-related-articles {
  color: #747474;
}
.some-related-articles h1 {
  color: #384e56;
  margin-top: 60px;
  text-transform: uppercase;
}
.some-related-articles h2 a:link, .some-related-articles h2 a:visited  {
  color: #464646;
  transition: color 0.1s ease;
}
.some-related-articles h2 a:hover {
  color: #000000;
  transition: color 0.3s ease;
}
/* SPECIAL */
.summary {
  color: #d9dee2;
  margin-top: 40px;
  margin-bottom: 60px;
}
.button, .button:visited, .button-dark {
  display: inline-block;
  max-width: 200px;
  margin: 50px 10px 30px 10px;
  padding: 10px;
  font-family: "Signika", sans-serif;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 3px;
  text-transform: capitalize;
  text-align: center;
  transition: all 0.1s ease;
}
.button-dark, .button-dark:visited {
  margin: 20px 10px 30px 0;
  color: #464646;
  border-color: #464646;

}
.button:hover, .button-dark:hover {
  transition: all 0.3s ease;
}
.button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.button-dark:hover {
  color: #ffffff;
  background-color: rgba(70, 70, 70, 0.9);
}
/*Tabs_____________________________________________________*/
/* (A) TABS CONTAINER */
.tab {
  position: relative;
  max-width: 100%;
}

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  display: block;
  padding: 5px;
  color: #444;
  font-weight: bold;
  background: transparent;
  cursor: pointer;
}

/* (D) TAB CONTENT */
.tab .tab-content {
  background: rgba(0, 0, 0, 0.1);
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab .tab-content p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .tab-content { max-height: 500vh; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  /*content: "\25b6";*/
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }


/* (A) TABS CONTAINER */
.tab1 {
  position: relative;
  max-width: 100%;
}

/* (B) HIDE CHECKBOX */
.tab1 input { display: none; }

/* (C) TAB LABEL */
.tab1 label {
  display: block;
  padding: 5px;
  color: #444;
  font-weight: bold;
  background: transparent;
  cursor: pointer;
}

/* (D) TAB CONTENT */
.tab1 .tab-content1 {
	background: rgba(0, 0, 0, 0.1);
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
  padding-left:5px;
}
.tab1 .tab-content1 p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab1 input:checked ~ .tab-content1 { max-height: 500vh; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab1 label::after {
  /*content: "\25b6";*/
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab1 input:checked ~ label::after { transform: rotate(90deg); }

/* (A) TABS CONTAINER */
.tab2 {
  position: relative;
  max-width: 100%;
}

/* (B) HIDE CHECKBOX */
.tab2 input { display: none; }

/* (C) TAB LABEL */
.tab2 label {
  display: block;
  padding: 5px;
  color: #444;
  font-weight: bold;
  background: transparent;
  cursor: pointer;
}

/* (D) TAB CONTENT */
.tab2 .tab-content2 {
	background: rgba(0, 0, 0, 0.1);
  /* CSS ANIMATION WILL NOT WORK WITH AUTO HEIGHT */
  /* THIS IS WHY WE USE MAX-HEIGHT INSTEAD */
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab2 .tab-content2 p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab2 input:checked ~ .tab-content2 { max-height: 500vh; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab2 label::after {
  /*content: "\25b6";*/
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  transition: all 0.4s;
}
.tab2 input:checked ~ label::after { transform: rotate(90deg); }

/*form______________________________*/
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: rgba(0,0,0,0.7);
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
    text-align: right;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
  padding-left:5px;
  text-align:left;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }

  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Style the form - display items horizontally */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
@media  only screen and (min-device-width: 768px) 
{
    .form-container {
      padding: 5%;
      /*background: rgba(0,0,0,0.3);
      /*border: 9px solid #f2f2f2;*/            
      max-width: 520px;
      margin: auto;
    }

}
/* foto gallery__________________________*/
$modal-z = 1000
$modal-bg = #FFEBEE
$modal-width = 600px

$space = 2.4rem
$red = #F44336

$t = .5s

$ease($s = $t)
	transition all $s cubic-bezier(0.23, 1, 0.32, 1)

*
	box-sizing border-box

body
	line-height 1.5
	font-family 'Lato'
	-webkit-font-smoothing antialiased
	overflow-x hidden

h1, h2, h3, p
	font-weight 300
	margin 0 0 ($space) 0

h1, h2, h3
	line-height 1.3

a
	text-decoration none
	color inherit
	font-weight 400

/**
 * Material Modal CSS
 */

.modal
	will-change visibility, opacity
	display flex
	align-items center
	justify-content center
	position fixed
	top 0
	left 0
	right 0
	bottom 0
	overflow-y auto
	overflow-x hidden
	z-index $modal-z
	// hide modal
	visibility hidden
	opacity 0
	$ease()
	transition-delay $modal-delay

	&--active
		// reveal modal
		visibility visible
		opacity 1

	&--align-top
		// align to top of window, useful if modal has a lot of content
		align-items flex-start

	&__bg
		// background color can be added as a backdrop for the modal
		background transparent

	&__dialog
		// controls the width and padding of modal
		max-width $modal-width
		padding ($space / 2)

	&__content
		will-change transform, opacity
		position relative
		padding $space
		background $modal-bg
		background-clip padding-box
		box-shadow 0 12px 15px 0 rgba(black, 0.25)
		opacity 0
		$ease(.25s)

		&--active
			opacity 1

	&__close
		z-index $modal-z+100
		cursor pointer

	&__trigger
		// modal trigger button
		position relative
		display inline-block;
		padding ($space / 2) $space
		color: rgba(black, 0.7)
		line-height 1
		cursor pointer
		background $modal-bg
		box-shadow 0 2px 5px 0 rgba(black, 0.26)
		-webkit-tap-highlight-color: rgba(0,0,0,0);		user-select none
		$ease()

		&--active
				z-index 10

		&:hover
				background mix(black, $modal-bg, 10)


#modal__temp
	// this is the div that expands when the button is clicked
	will-change transform, opacity
	position absolute
	top 0
	left 0
	right 0
	bottom 0
	background $modal-bg
	transform none
	opacity 1
	transition opacity 0.1s ease-out, transform $t cubic-bezier(0.23, 1, 0.32, 1)
	
	
/*Colunas___________________________________________________*/
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 45%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
.footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #4a4a4a;
  padding: 5%;
  font-size:10px;
}
/* foto gallery__________________________*/
$modal-z = 1000
$modal-bg = #FFEBEE
$modal-width = 600px

$space = 2.4rem
$red = #F44336

$t = .5s

$ease($s = $t)
	transition all $s cubic-bezier(0.23, 1, 0.32, 1)

*
	box-sizing border-box

body
	line-height 1.5
	font-family 'Lato'
	-webkit-font-smoothing antialiased
	overflow-x hidden

h1, h2, h3, p
	font-weight 300
	margin 0 0 ($space) 0

h1, h2, h3
	line-height 1.3

a
	text-decoration none
	color inherit
	font-weight 400

/**
 * Material Modal CSS
 */

.modal
	will-change visibility, opacity
	display flex
	align-items center
	justify-content center
	position fixed
	top 0
	left 0
	right 0
	bottom 0
	overflow-y auto
	overflow-x hidden
	z-index $modal-z
	// hide modal
	visibility hidden
	opacity 0
	$ease()
	transition-delay $modal-delay

	&--active
		// reveal modal
		visibility visible
		opacity 1

	&--align-top
		// align to top of window, useful if modal has a lot of content
		align-items flex-start

	&__bg
		// background color can be added as a backdrop for the modal
		background transparent

	&__dialog
		// controls the width and padding of modal
		max-width $modal-width
		padding ($space / 2)

	&__content
		will-change transform, opacity
		position relative
		padding $space
		background $modal-bg
		background-clip padding-box
		box-shadow 0 12px 15px 0 rgba(black, 0.25)
		opacity 0
		$ease(.25s)

		&--active
			opacity 1

	&__close
		z-index $modal-z+100
		cursor pointer

	&__trigger
		// modal trigger button
		position relative
		display inline-block;
		padding ($space / 2) $space
		color: rgba(black, 0.7)
		line-height 1
		cursor pointer
		background $modal-bg
		box-shadow 0 2px 5px 0 rgba(black, 0.26)
		-webkit-tap-highlight-color: rgba(0,0,0,0);		user-select none
		$ease()

		&--active
				z-index 10

		&:hover
				background mix(black, $modal-bg, 10)


#modal__temp
	// this is the div that expands when the button is clicked
	will-change transform, opacity
	position absolute
	top 0
	left 0
	right 0
	bottom 0
	background $modal-bg
	transform none
	opacity 1
	transition opacity 0.1s ease-out, transform $t cubic-bezier(0.23, 1, 0.32, 1)
	/**
 * Demo specific CSS
 */

body
	height 100vh
	background $red

img
	max-width 100%

.demo-btns

	header
		padding 7vh 10vw
		background $modal-bg
		display flex
		align-items center

		h1
			margin 0
			color rgba(black, 0.54)
			font-weight 300

	.info
		background $red
		padding 3vh 10vw
		height 70vh
		display flex
		align-items center
		justify-content center
		flex-flow column wrap

	p
		text-align: center
		color white

	.link
		font-size 20px

	.modal__trigger
		margin-right 3px
		@media (max-width 640px)
			margin-bottom ($space / 3)

.demo-close
	position absolute
	top 0
	right 0
	margin: ($space / 2)
	padding: ($space / 4)
	background rgba(black, 0.3)
	border-radius 50%
	$ease()

	svg
		width 24px
		fill: white
		pointer-events none
		vertical-align top

	&:hover
		background rgba(black, 0.6);

.logo
	position: fixed
	bottom: 3vh
	right: 3vw
	z-index: 2

	img
		width: 45px
		transform: rotate(0)
		$ease()

		&:hover
			transform: rotate(180deg) scale(1.1)