/* Digital Artwork CSS for Kringgroep 40 Riemst */

body {
	font-family:'Raleway',Helvetica,Arial,sans-serif;
	font-weight:400;
	background-color:rgba(0,0,0,0.02);
}
.button { 
	font-family:'Raleway',Helvetica,Arial,sans-serif; }
.button-group li {
	padding-top:3%;
}
.button-group a {
	color:rgba(0,0,0,1);
	background-color:rgba(130,215,35); 
}
.button-group a:hover {
	color:rgba(0,0,0,0.4);
	background-color:yellow; }
.button-group {
	float:none;
}


.buttons {
  padding: 5px 10px;
  font-size: 1.1em;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #f0d232;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #999;
}

.buttons:hover {background-color: #3e8e41}

.buttons:active {
  background-color: #3e8e41;
  box-shadow: 0 3px #666;
  transform: translateY(4px);
}



@media only screen and (min-width: 40.063em) {
	.button-group { float:right; }
}

.namelogo {
	padding:30px 0px 0px 0px;
}

@media only screen and (min-width: 40.063em) {
	.namelogo { padding-bottom:20px; }
}

.namelogo h1 { 
	font-size:1.5em;
	font-weight:600;
	text-align:left;
	color:#A50E12;
}

.bestuur h5 { 
	font-size:1.1em;
	font-weight:300;
	text-align:left;
	color:#A50E12;
}



@media only screen and (min-width: 40.063em) {
	.namelogo h1 { 
		font-size:16px;
		text-align:center;
  }
}

@media only screen and (min-width: 64.063em) {
	.namelogo h1 {
		font-size:24px;
		text-align:center;
	}
}

.digitalartwork, .sportgrid img { size:100%; }

.hero-home       { background:url('../img/homepage/gr_homepage.jpg'); }
.hero-overons    { background:url('../img/homepage/gr_overons.jpg'); }
.hero-training   { background:url('../img/homepage/gr_training.jpg'); }
.hero-africhting { background:url('../img/homepage/africhting_groot.jpg'); }
.hero-bop        { background:url('../img/homepage/bop_groot.jpg'); }
.hero-agility    { background:url('../img/homepage/agility_groot.jpg'); }
.hero-wandelen   { background:url('../img/homepage/wandelen_groot.jpg'); }
.hero-bestuur    { background:url('../img/homepage/bestuur_groot.jpg'); }
.hero-leden      { background:url('../img/homepage/gr_leden.jpg'); }
.hero-adres      { background:url('../img/homepage/groot_adres.jpg'); }
.hero-wedstrijd  { background:url('../img/homepage/groot_wedstrijden.jpg'); }
.hero-nieuwsbrief{ background:url('../img/homepage/groot_nieuwsbrief.jpg'); }
.hero-faq        { background:url('../img/homepage/groot_faq.jpg'); }
.hero-schrijf    { background:url('../img/homepage/groot_banner.jpg'); }
.hero-sponsor    { background:url('../img/homepage/groot_banner.jpg'); }
.hero { 
  background-size:cover;
  box-shadow:inset 0px 0px 0 2000px rgba(0,0,0,0.15);
  height:80%;
}

.intro-text {
	padding-top:40%;
	color:rgba(255,255,255,1);
	text-align:right;
}

@media only screen and (min-width: 40.063em) {
	.intro-text {
		padding-top:25%;
	}
}

@media only screen and (min-width: 64.063em) {
	.intro-text { padding-top:18%; }
}

.intro-text p {
	font-family:'Shadows Into Light',cursive;
	font-size:44px;
}

.schrijf,.test,.about,.contact,.overons,.wandelen,.bestuur,.honden,.lidhonden,.leden,.members,.adres,.wedstrijd,.event,.nieuwsbrief,.bop,.agility,.africhting,.hond,.lidhond { padding:25px 0 0 0; }
.wedstrijden { padding:0px 0px 0px 15px; }
.eventjaar   { padding:20px 0px 0px 15px; font-size:1.1em; font-weight:600; color:#A50E12; text-shadow: 2px 2px #c0c0c0; }

.about img { 
	width:250px;
	height:250px;
	border-radius:150px;
	-webkit-border-radius:150px;
	-moz-border-radius:150px;
}
.africhting img { 
	width:250px;
	height:370px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
}

.bop img { 
	width:250px;
	height:370px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
}

.wandelen img {
	width:250px;
	height:370px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
}

.agility img {
	width:250px;
	height:370px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
}

.bestuur img { 
	width:200px;
	height:200px;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
}
.honden img { 
	width:200px;
	height:280px;
	border-radius:25px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
}

.hond img { 
	width:300px;
	height:450px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
}

.lidhonden img { 
	width:200px;
	height:280px;
	border-radius:25px;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
}

.lidhond img { 
	width:300px;
	height:450px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
}

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}


.adres img {
  max-width:100%
}
.overons,.agility,.wandelen,.bop {
  text-align:justify;	
}
.honden   { text-align:center; }
.honden p { font-size:1.1em;	font-weight:200; color:#008cba; }

.lidhonden   { text-align:center; }
.lidhonden p { font-size:1.1em;	font-weight:200; color:#008cba; }


a, a:visited, a:hover { text-decoration:underline; }

.work img:hover {
	opacity:0.5;
	-webkit-transition:0.3s ease;
	-moz-transition:0.3s ease;
	-ms-transition:0.3s ease;
	-o-transition:0.3s ease;
	transition:0.3s ease;
}

.work li {
	height:140px;
	overflow:hidden;
}

.event h4 { color:#A50E12; text-shadow: 2px 2px #c0c0c0; }
.hond  h4 { color:#A50E12; text-shadow: 2px 2px #c0c0c0; }
.lidhond  h4 { color:#A50E12; text-shadow: 2px 2px #c0c0c0; }
.event h5 { color:#EE3E42; padding-bottom:20px; }
.event p  { text-align:justify; }

hr {
	border:0;
	height:1px;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
	background-image:-moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
	background-image:-ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
	background-image:-o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.75),rgba(0,0,0,0));
	opacity:0.8;
}

footer { 
	padding:80px 0 10px 0;
}

footer a:hover {
	color:rgba(0,0,0,0.4);
	background-color:transparent;
}


#thover{
  position:absolute;
  background:#000;
  width:65%;
  height:80%;
  opacity: .6
}
 
#tpopup{
  position:absolute;
  width:800px;
  height:300px;
  background:#fff;
  left:50%;
  top:50%;
  border-radius:5px;
  padding:30px 0;
  margin-left:-400px; /* width/2 + padding-left */
  margin-top:-150px; /* height/2 + padding-top */
  text-align:center;

  box-shadow:0 0 10px 0 #000;
}
#tclose{
  position:absolute;
  background:black;
  color:white;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
  box-shadow:0 0 10px 0 #000;
}