$blue: #3498db;
$dark_blue: #2980b9;
$turquoise: #1abc9c;
$dark_turquoise: #16a085;
$title_fonts: 'Raleway', Arial, sans-serif;
$body_fonts: 'Open Sans', Arial, sans-serif;
$icons_font: 'FontAwesome';

* {
  box-sizing: border-box;
}

body {
  background-color: #ccc;
  font-family: $body_fonts;
  font-size: 15px;
  font-weight: 300;
  color: #444;
  background-color:#D2D2D2;

}

h1, h2, h3 {
  font-family: $title_fonts;
}

h1 {
  color: #fff;
  font-size: 40px;
  text-align: center;
  font-family: "Helvetica Neue",Helvetica,sans-serif;
  font-weight: bold;
  text-shadow: 3px 4px 5px #9C9C9C;
}

header {
	 background-image: url(images/buchbinderlogo.png);
	background-repeat: no-repeat;
	background-position: 2px 2px;
	position: relative;
	height: 135px;
	padding: 6px 15px 20px;
	color: #FFF;
	background-color: #1E5487;
	border-radius: 70px 0px 0px;
	margin: 15px 50px -75px;
  a {
    color: #fff;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }


}

section {
  position: relative;
  background-color: #fff;
  width: 70%;
  min-width: 700px;
  margin: 0 auto 50px auto;
  padding: 35px 50px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  p {
    margin-bottom: 10px;
    text-align: justify;
    line-height: 18px;
  }
  a {
    color: $dark_blue;
  }
  a:hover {
    color: $blue;
    text-decoration: none;
  }
}


@media(max-width: 700px) {
  body {
    background: #fff;
  }
  section {
    width: 100%;
    min-width: 400px;
    box-shadow: none;
  }
}

@media(max-width: 600px) {
  section {
    padding: 35px 20px;
  }
}

@media(max-width: 400px) {
  header { 
    padding: 45px 10px;
    height: 160px;
    h1 {
      font-size: 25px;
    }
  }
  section { 
    
    p {
      display: none;
    }
  }
  .flexparent {
    display: block;
    > div {
      display: block;
      width: 100%;
    }
  }
}

#linkbutton {
	color: lime;
}

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  text-shadow: 1px 1px 4px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 28px;
  padding: 10px;
  text-decoration: none;
  width: 45%;
  margin: 5px;
  display: inline-block;
   box-shadow: 0px 0px 15px -2px #5F7777;
  -moz-box-shadow: 0px 0px 15px -2px #5F7777;
  -webkit-box-shadow: 0px 0px 15px -2px #5F7777;
}



a,a:visited,a#glink,a:visited#glink { text-decoration: none; color: #FFF; }

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

footer {
	font-size: 9pt;
	width: 100%;
	height: 10px;
	position: relative;
	right: 12%;
	margin-top: 50px;
	text-align: right;
}

#footertext {
	color: #8A8A8A;
}


.linkbutton {
   width: 40px;
	height: 40px;
	opacity: 0.7;
	border-radius: 20px;
	border: 1px solid #1E5487;
	background: url("images/arrow_right.png") no-repeat scroll center center #1E5487;
	transition: all 0.3s ease-in-out 0s;
	float: right;
}

.linkbutton:hover{
    width: 40px;
	height: 40px;
	opacity: 0.7;
	border-radius: 20px;
	border: 1px solid #1E5487;
	background: url("images/arrow_right.png") no-repeat scroll center center #3498db;
	transition: all 0.3s ease-in-out 0.2s;
	float: right;
}

.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    -webkit-transform:scale(10);
    -moz-transform:scale(10);
    -ms-transform:scale(10);
    -o-transform:scale(10);
    transform:scale(10);
    opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}





.ac-container{

	margin: 10px auto 30px auto;
	text-align: left;
}
.ac-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
	background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
	background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;	
}
.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
	height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 180px;
}
.ac-container input:checked ~ article.ac-large{
	height: 290px;
}