/* Redesign 2017 */

body {
	font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 300;
}

a {
	text-decoration: underline;
}

.centered {
	text-align: center;
}

/*   S T A R T S C R E E N   */

#startscreen {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: white;
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#startscreen h1 {
	text-align: center;
	position: relative;
  top: 40%;
  padding: 70px 30px 0 30px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#startscreen h1 img {
	width: 530px;
}

a.scrolldown {
	display: block;
	margin: 0 auto;
	text-indent: -99999px;
	position: absolute;
	bottom: 10%;
	left: 50%;
	margin-left: -12px;
	width: 44px;
	height: 24px;
	background: url(img/arrow-down.png) no-repeat center center transparent;
	background-size: 44px 24px;
}

/*   T E A S E R   */

.wrap-teaser {
	background: #f2f3f3;
}

#teaser {
	padding-top: 120px;
	padding-bottom: 120px;
}

h2 {
	text-transform: uppercase;
}

h2 {
	font-weight: 300;
}


/*   C I R C L E S   */

#circles {
	margin-top: -37px;
	padding-bottom: 90px;
}


/* K A N Z L E I */

#buero > .column {
	padding: 0;
}


/*   O T T O   */

#otto {
	position: relative;
	margin-top: 80px;
	background: url(img/Otto-Lilienthal-back.jpg) repeat center center #485652;
}

#otto img {
	width: 1800px;
}

#otto p {
	position: absolute;
	top: 22%;
	width: 100%;
}

#otto h3 {
	position: absolute;
	text-indent: -99999px;
	background: url(img/icon-gk.png) no-repeat center center transparent;
	background-size: 25px 20px;
	width: 100%;
	margin-top: 3%;
}


/*   S E R V I C E   */

.row.full-width {
  width: 100%;
  max-width: 100%;
	padding-left: calc(20px + 5%);
	padding-right: calc(20px + 5%);
}

#schwerpunkte, #schutzrechte {
	margin-top: 5%;
}

#schutzrechte h2 {
	margin-bottom: calc(20px + 4%);
}

i {
	height: 80px;
	margin-bottom: 35px;
	display: inline-block;
}

body h2 {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

#schwerpunkte h3,
#schutzrechte h3,
#leistungen h3 {
	text-transform: uppercase;
	margin-left: auto;
	margin-right: auto;
}

.column .content-wrap {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 30px calc(30px + 3%) 0;
}

#schutzrechte {
	background: #eaeae9;
	padding-top: calc(20px + 5%);
	padding-bottom: calc(4%);
}

#service {
	margin-top: 80px;
	margin-bottom: calc(50px + 5%);
}

#leistungen {
	margin-top: 80px;
}

#leistungen > .row {
	padding-top: 50px;
	padding-bottom: 30px;
}

#leistungen h2 img {
	width: 210px;
}

#leistungen h2 {
	margin-bottom: 30px;
}

#leistungen ul {
	margin: 0;
}

#leistungen ul li {
	list-style: none;
	margin: 0;
	padding-bottom: 12px;
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}

#leistungen .list-leistungen {
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
}



/*   T E A M   */

#team-teaser {
	padding: 110px 0 60px 0;
}

#team h3 {
	margin-top: 20px;
	margin-bottom: 0;
}

.teammember {
	padding-top: 15px;
	padding-bottom: 15px;
}

.ipa {
	position: relative;
	height: 200px;
	width: 100% !important;
}

.ipa > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.ipa img {
	width: 240px !important;
}

.teamfoto {
	margin-bottom: 15px;
}

.teammember img,
.teammember > a {
	width: 400px;
	margin: 0 auto;
}


.teammember .image_off,
.teammember:hover .image_on {
   display:none
}
.teammember .image_on,
.teammember:hover .image_off{
   display:block
}

.filler-logo img {
	margin-top: 110px;
  	padding: 0 20px;
}

.teamlogo > div {
	background: #42574e;
}

/* Modal */

a.open-modal {
	margin: 0 auto;
	display: block;
	background-color: black;
	position: relative;
	max-width: 100%;
}

a.open-modal:hover img {

}

a.open-modal span {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(img/icon-c_v.png) no-repeat right top transparent;
	background-size: 50px 58px;
	visibility: hidden;
	z-index: 100;
}

a.open-modal:hover span {
	visibility: visible;
	opacity: 1 !important;
}

p.superhead {
	margin-bottom: 0;
}

.close-reveal-modal {
	text-decoration: none;
}

.teamfoto a.open-modal span {
	background: url(img/icon-team.png) no-repeat right top transparent;
	background-size: 50px 58px;
}

/*   K O N T A K T   */

#kontakt-teaser {
	background: #eaeae9;
	margin: 30px 0 0 0;
	padding: 90px 0 50px 0;
}

#kontakt {
	background: #eaeae9;
	padding-bottom: 60px;
}

#kontakt .section {
	max-width: 600px;
}

#kontakt .linkedin {
	margin-top: 40px;
	margin-bottom: 40px;
}

#kontakt .linkedin img {
	width: 200px;
	padding: 0 30px;
}

#kontakt .linkedin p {
	margin-bottom: 0;
}

.standort {
	position: relative;
}

.standort h3 {

}

#imprint-logo img {
	padding: 80px 0 60px 0;
}

#imprint-logo img {
	width: 200px;
}

#imprint {
	background: #4a5854;
	color: white;
	padding: 30px 0 10px 0;
}

#imprint a {
	color: white;
}

/* Back to top button */

.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(187, 153, 23, 0.8) url(img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #bb9917;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 20px;
    bottom: 20px;
  }
}

@media only screen and (min-width: 1151px) {

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}

}





/*   T Y P O G R A F I E   */

#teaser,
#kanzlei h2,
#circles,
#otto,
#service,
#leistungen,
#team-teaser,
#team,
#kontakt-teaser,
#kontakt,
#imprint-logo,
#imprint {
	text-align: center;
}

#imprintcontent,
#datenschutzcontent,
.list-leistungen {
	text-align: left;
}

p, ul, h2, h3 {
	-webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.impressum p,
#team h3 {
	-webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

#team h3 {
	font-size: 1.1em;
}

#leistungen ul li {
	font-size: 0.9em;
}

#team p,
#imprint p strong {
	font-size: 0.8em;
}

.standort h3 {
	font-size: 24px;
}

#otto p {
	font-size: 1.5em;
}

#team h3,
.standort h3,
p.superhead,
#imprint p strong {
	text-transform: uppercase;
}

#leistungen ul {
	line-height: 1.1em;
}

#leistungen ul .moreinfo {
	line-height: 1.3em;
}

p,
ul, ol,
h3 {
	font-weight: 300;
}

#langswitch a {
	font-weight: 600;
}

#otto p,
#imprint h3 {
	color: white;
}



/* -------------------------------------------------------------------------------------------------
   Off-Canvas Navigation (Danke lucidstyle.de)
------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   Open Nav
------------------------------------------------------------------- */

.open-mobile-nav {
	background: url(img/icon-gk.png) no-repeat 25px 16px #222;
	background-size: 50px 40px;
	display: block;
	width: 100%;
	height: 70px;
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
}

.open-nav {
	display: inline-block;
	padding: 5px;
	margin: 13px 25px 0 0;
}

.open-nav .menu-word {
	display: none;
}

.open-nav .menu-icon {
	display: block;
	width: 45px;
}

.open-nav .menu-icon span {
	display: block;
	height: 5px;
	margin-top: 10px;
	background: #4a5854;
}

.open-nav .menu-icon span:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------
   Nav Menu
------------------------------------------------------------------- */

#off-canvas-nav {
	width: 80%;
	max-width: 300px;
	height: 100%;
	overflow-y: auto; /* Makes nav scrollable */
	padding-top: 62px;
	background: #282828;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 150;
	-webkit-transform: translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0);
	    -ms-transform: translate3d(100%, 0, 0);
	     -o-transform: translate3d(100%, 0, 0);
	        transform: translate3d(100%, 0, 0);
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	     -o-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transition: -webkit-transform 300ms ease;
	      -moz-transition: -moz-transform 300ms ease;
	          -o-transition: -o-transform 300ms ease;
	                transition: transform 300ms ease;
}

.nav-open #off-canvas-nav {
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

#off-canvas-nav ul {
	list-style: none;
	margin-left: 0;
}

/* First Level */

#off-canvas-nav .nav li a {
	display: block;
	padding: 15px 40px;
	color: #ccc;
	font-size: 16px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
	text-decoration: none;
}

#off-canvas-nav .nav li a:hover {
	color: white;
	background-color: #303030;
}

#off-canvas-nav .nav > li:first-child > a {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#off-canvas-nav .nav li a span {
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 27px;
	right: 15px;
	border: inset 7px;
	border-color: #aacc34 transparent transparent transparent;
	border-top-style: solid;
}

#langswitch {
	text-align: right;
	padding: 15px 40px;
}

#langswitch a {
	color: #ccc;
	text-decoration: none;
	font-size: 0.8em;
	padding: 3px 5px;
}

#langswitch a.active {
	color: black;
	background: white;
}



/* -------------------------------------------------------------------
   Close Nav
------------------------------------------------------------------- */

.close-nav {
	display: block;
	width: 50px;
	height: 50px;
	background: url(img/close-nav.svg) no-repeat center;
	background-size: 30px;
	position: absolute;
	right: 5px;
	top: 6px;
}

/* -------------------------------------------------------------------
   Page Overlay
------------------------------------------------------------------- */

#wrapcontent:before {
	display: block;
	content: "";
	width: 100%;
	height: 0;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(30, 30, 30, 0.8);
	opacity: 0;
	z-index: 100;
	pointer-events: none; /* Makes elements below clickable */
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	     -o-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	     -o-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transition: opacity 300ms ease, height 1ms 300ms ease;
	   -moz-transition: opacity 300ms ease, height 1ms 300ms ease;
	     -o-transition: opacity 300ms ease, height 1ms 300ms ease;
	        transition: opacity 300ms ease, height 1ms 300ms ease;
}

.nav-open #wrapcontent:before {
	-webkit-transition: opacity 300ms ease;
	   -moz-transition: opacity 300ms ease;
	     -o-transition: opacity 300ms ease;
	        transition: opacity 300ms ease;
	height: 100%;
	opacity: 1;
}





/*########################################################
  - - - - - - - - - - - -
  M E D I A Q U E R I E S
  - - - - - - - - - - - -
########################################################*/

@media only screen and (min-width: 640px)  {

#otto p {
	font-size: 2em;
}

#kanzlei p {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  -ms-solumn-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
  -moz-column-gap: 30px; /* Firefox */
  -ms-column-gap: 30px;
  column-gap: 30px;
}

#buero {
	padding: 15px;
	margin-top: 50px;
}

#leistungen .list-leistungen {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  -ms-solumn-count: 2;
  column-count: 2;
  -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
  -moz-column-gap: 30px; /* Firefox */
  -ms-column-gap: 30px;
  column-gap: 30px;

  padding-left: 20px;
  text-align: left;
}

#leistungen ul li {
	list-style: disc;
}

.reveal-modal h2 {
	font-size: 1.6875rem;
}

}


@media only screen and (min-width: 960px)  {

h2 {
	font-size: 50px;
	margin-bottom: 30px;
}

.reveal-modal h2 {
	font-size: 2.3125rem;
}

#otto p {
	font-size: 3em;
	top: 20%;
}

#otto h3 {
	background-size: 50px 40px;
	margin-top: 5%;
}


.reveal-modal {
	padding: 4rem;
}

.open-mobile-nav {
	background: transparent;
	display: block;
	width: 100px;
	height: 70px;
	position: absolute;
	right: 40px;
	top: 40px;
}

.open-nav {
	display: inline-block;
	padding: 5px;
	margin: 13px 25px 0 0;
}

.open-nav .menu-word {
	display: none;
}

.open-nav .menu-icon {
	display: block;
	width: 45px;
}

}

@media only screen and (min-width: 1024px)  {

.ipa {
	width: 100% !important;
}

.ipa img {
	max-width: 290px;
}

#leistungen .list-leistungen {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  -ms-solumn-count: 3;
  column-count: 3;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  -ms-column-gap: 40px;
  column-gap: 40px;

  padding-left: 30px
}

#leistungen .list-leistungen.schutzrechte {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  -ms-solumn-count: 2;
  column-count: 2;
  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
  -moz-column-gap: 40px; /* Firefox */
  -ms-column-gap: 40px;
  column-gap: 40px;
}

.schutzrechte {
	float: left !important;
}

}