/*------------------------------------ 

CSS document for responsive onepage template 

dsa Marketing AG 
Im Lipperfeld 22A-24
46047 Oberhausen

Fon: +49208 97070
www.dsa-marketing.ag
info@dsa-marketing.ag

template by
Finn Gutgesell

/*more information visibility wrapper_link*/ 

------------------------------------ */


/*-reset ------------------------------------ */

@import url("normalize.css");

/*-fonts ------------------------------------ */


/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v18-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v18-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v18-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}


/*-all ------------------------------------------------------------------------------------------------------------  */


/******************************* 
Rechtsbündig / Linksbündig / Zentriert
*******************************/

.ta_l {text-align: left}
.ta_c {text-align: center}
.ta_r {text-align: right}

/******************************* 
Ausrichtung
*******************************/

.baseline {vertical-align: baseline}
.bottom {vertical-align: bottom}
.top{vertical-align: top}
.middle{vertical-align: middle}

*{
	/* Allen Elementen wird die Eigenschaft border-box zugeteilt */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box}

html. body, main {
	width: 100%;
	height: 100%}

html, body, input, textarea{
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 27px;
    font-size: 95%}

/******************************* 
links
*******************************/

a { 
    color: #00AA9B;
	text-decoration: none;
	transition: all .5s ease}

a:hover {text-decoration: underline; color:#000}

/******************************* 
padding 
*******************************/

.padme {padding-top: 3.5rem !important}
.nopad {padding: 0}

label {cursor: pointer}


.select-language li {
	display: inline-block;
}
.phone {
	color: black;
}
.phone:hover {
    color: #00AA9B;
}
.fax {
	color: #00AA9B;
}
.german {
	background: url(../images/ger-flag.png);
	width: 30px;
	height: 30px;
	display: inline-block;
}
.facebook {
	background: url(../images/fb-logo.jpg);
	width: 30px;
	height: 30px;
	display: inline-block;
}
.english {
	background: url(../images/eng-flag.png);
	width: 30px;
	height: 30px;
	display: inline-block;
}
	ul.sprachen {
		-webkit-columns: 2;
		-moz-columns: 2;
		-o-columns: 2;
		columns: 2;
		width: 100%;
	}
ul.sprachen li {
	color: #00AA9B;
}
ul.sprachen li span {
	color: #000;
}
/*
ul.sprachen li {
	width: 33%;
}
*/

/*Mobile First*/


/*-head area ------------------------------------------------------------------------------------------------------------  */

header {
    padding: 6rem 0 1rem 0;
    position: relative;
    top: 0;
    background: #fff;
    z-index: 1;
    border-bottom: 2px solid lightgrey}

header .order-sm-1 {
    z-index: 2;
    position: fixed;
    top: 0;
    text-align: center;
    margin: 0 auto;
    border-bottom: 2px solid lightgrey;
    background-color: #fff}

.select-language {
	position: absolute;
	top: 5px;
	right: 70px;
}

/*-main area ------------------------------------------------------------------------------------------------------------  */

main {width: 100%}

/*-navi ------------------------------------ */

nav ul {list-style: none; padding: 0; text-align: left}

nav ul li a {text-decoration: none; color:#000}

nav ul li {
    display: inline-block;
    padding: 0 5px}

nav ul li a:hover {text-decoration: underline; color:#00aa9b}

.button_container {
  position: fixed;
  top: 15px;
  right: 10px;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease}

.button_container:hover {opacity: .7}

.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF}

.button_container.active .middle {
  opacity: 0;
  background: #FFF}

.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF}

.button_container span {
  background: #009999;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer}

.button_container span:nth-of-type(2) {top: 11px}

.button_container span:nth-of-type(3) {top: 22px}

.overlay {
  position: fixed;
  background: #009999;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden}

.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%}

.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s}

.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
          animation-delay: .4s}

.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
          animation-delay: .45s}

.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
          animation-delay: .50s}

.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 400;
  text-align: center}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%}

.overlay ul li {
  display: block;
  height: 25%;
  height: calc(100% / 7);
  min-height: 70px;
  position: relative;
  opacity: 0}

.overlay ul li a {
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden}

.overlay ul li a:hover {text-decoration: none; color:black}

.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
}
.overlay ul li a:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  -webkit-transition: .35s;
  transition: .35s}

@-webkit-keyframes fadeInRight {
    
  0% {
    opacity: 0;
    left: 20%}
    
  100% {
    opacity: 1;
    left: 0}
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

/*-headlines ------------------------------------ */

h1, h2, h4 , h3 {
    color:#00aa9b;
    font-weight: 500}

h2 {
    padding-bottom: 1rem; 
    border-bottom: 1px solid lightgrey
}

h4, h3 {margin: 0 auto}

h3 {font-weight: 400}

.bg_cyan h2 {color:#fff}

h1, h2 {
    font-size: calc(26px + 0.25vh); 
    line-height: 2.5rem}

.inhalt h2 {
    font-size: 1.2rem;
    line-height: 1.75rem}

h3 {font-size: 1.25rem; line-height: 1.5rem}

h4 {font-size: 1.2rem; line-height: 1.5rem}

h5 {font-size: 1.1rem; line-height: 1.25rem}

h6 {font-size: 1rem; line-height: 1.25rem}


/*-text ------------------------------------ */

p {font-size: 1rem}

.max-width {max-width: 600px}

li,p {line-height: 1.75rem}

/*
h1 + p,
h2 + p,
h1 + h2,
h2 + h3,
h1 + h3, 
p + h3 {padding-top: 2rem}
*/

p + h4, ul + h4 {padding-top: 2rem}

.list{padding-left: 15px;list-style-position: outside;}
/*
p + p,
img + p,
ul + p  {padding-top: 1.75rem}
*/

.b, strong {font-weight: 500}

.cyan {color: #00aa9b}

/*-images ------------------------------------ */

img {
    max-width: 100%;
    height: auto}

figcaption, figure {display: inline-block}

figure {margin: 1rem 0}

figcaption {
	opacity: 0.9;
	font-size: 0.8rem;
	line-height: 1rem;
	font-style: italic}

p + .box_img {margin-top: 2rem}

.box_img {margin-bottom: 2rem}


/*-list ------------------------------------ */

ul.bull {
	margin: 0;
    padding: 0;
	list-style: none}


ul.bull li {
    padding-left: 0}


ul.bull li::before {
	content: '•';
    position: absolute;
    margin-left: -10px}

/*-content area ------------------------------------------------------------------------------------------------------------  */

section {padding: 2rem 0 4rem 0; position: relative}

/*-background ------------------------------------------------------------------------------------------------------------  */

.bg_wh {background: rgba(255,255,255,0.9)}

.bg_cyan {background: rgba(0,153,153,0.8); color:#fff}

.round {border-radius: 5px}

/*-sections ------------------------------------------------------------------------------------------------------------  */

#start, .wrapper-referenzen, #leistung, #kontakt, #sprachen{
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%}

#start {background-image: url("../images/uebersetzungsdienst-duechting-in-duesseldorf.jpg");
        padding-top: 8rem;
        background-position: -150px center;}

#leistung {
    background-image: url("../images/uebersetzungsdienst-duechting-in-duesseldorf-kommunikation.png");
    background-position: bottom;
    min-height: 500px}

#kontakt {
    background-image: url("../images/uebersetzungsdienst-duechting-in-duesseldorf-web-kontakt.png");
    background-position: top;
    padding-top: 10rem}

#sprachen {
	background-image: url("../images/uebersetzungsdienst-duechting-in-duesseldorf-arbeitssprachen.png");
    background-position: top;
    margin-top: 2rem}

.slider {padding-top: 0rem; margin-top: 2rem;}


/*-uebersetzung ------------------------------------------------------------------------------------------------------------  */

input, input + div{display:none}
.checkbox + div{display:none;}
                            
input:checked + div{display:block}
.checkbox.checked + div{display: block;}

iframe {
	border: none;
	width: 100%;
	height: 700px;
	padding: 15px;
	overflow-y: scroll;
	overflow-x: hidden;
}


.wrapper-referenzen {
    background-image: url("../images/uebersetzungsdienst-duechting-in-duesseldorf-translation-meeting.png");
    margin: 0!important;
    background-position: center}

/*-padding ------------------------------------------------------------------------------------------------------------  */

.padding-top {padding-top: 5rem}


/*-colorbox ------------------------------------------------------------------------------------------------------------  */

.box_wrap {display: none}

.popup-link {
    background: #fff;
    padding: 3px;
    color: #00aa9b}

#uebersetzung .popup-link,
#referenzen .popup-link,
#unternehmen popup-link {background: none}

.popup-link::after  {
    content: url("../images/read-more.png");
    margin-left: 6px;
    margin-top: 2px;
    position: absolute}

.checkbox h3 {
    margin-left: 30px;
    margin-bottom: 2rem;
    font-size: 1.1rem}

.checkbox h3:hover {color:black;cursor: pointer;}

.checkbox h3::before {
    content: url("../images/read-more.png");
    position: absolute; 
    margin-left: -30px}

.wrapper_link {
    width: 100%;
    margin-top: 4rem;
    text-align: center;
    visibility: hidden;
    pointer-events: none;}

.popup_open-1:hover {text-decoration: none!important}

#colorbox,
#cboxOverlay,
#cboxWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	overflow: hidden}

#cboxOverlay {
	position: fixed;
	width: 100%;
	height: 100%}

#cboxMiddleLeft,
#cboxBottomLeft {clear: left}

#cboxContent {position: relative;  }

#cboxLoadedContent {overflow: auto}

#cboxTitle {margin: 0}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%}
    
.inhalt {padding: 20px; box-sizing: border-box}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {cursor: pointer}

.cboxPhoto {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none}

.cboxIframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0}

#colorbox,
#cboxContent,
#cboxLoadedContent {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box}

#cboxOverlay {background: #000}

#colorbox {outline: 0}

#cboxTopLeft {
	width: 14px;
	height: 14px;
	background: url(../images/controls.png) no-repeat 0 0}

#cboxTopCenter {
	height: 14px;
	background: url(../images/border.png) repeat-x top left}

#cboxTopRight {
	width: 14px;
	height: 14px;
	background: url(../images/controls.png) no-repeat -36px 0}

#cboxBottomLeft {
	width: 14px;
	height: 43px;
	background: url(../images/controls.png) no-repeat 0 -67px}

#cboxBottomCenter {
	height: 43px;
	background: url(../images/border.png) repeat-x 0 -67px}

#cboxBottomRight {
	width: 14px;
	height: 43px;
	background: url(../images/controls.png) no-repeat -36px -67px}

#cboxMiddleLeft {
	width: 14px;
	background: url(../images/controls.png) repeat-y -175px 0}

#cboxMiddleRight {
	width: 14px;
	background: url(../images/controls.png) repeat-y -211px 0}

#cboxContent {
	background: #fff;
	overflow: visible}

.cboxIframe {background: #fff}

#cboxError {
	padding: 50px;
	border: 1px solid #ccc}

#cboxLoadedContent {margin-bottom: 5px}

#cboxLoadingOverlay {background: url(../images/loading_background.png) no-repeat center center}

#cboxLoadingGraphic {background: url(../images/loading.gif) no-repeat center center}

#cboxTitle {
    opacity: 0.9;
	position: absolute;
	bottom: -25px;
	left: 0;
	text-align: center;
	width: 100%;
	color: #00aa9b}

#cboxCurrent {
	position: absolute;
	bottom: -25px;
	left: 0;
	font-weight: normal;
	color: #444}

#cboxPrevious,
#cboxNext,
#cboxSlideshow,
#cboxClose {
	border: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	position: absolute;
	bottom: -26px;
	background: url(../images/controls.png) no-repeat 0px 0px;
	width: 23px;
	height: 23px;
	text-indent: -9999px;
    background-color: #00aa9b}

#cboxPrevious {bottom: 50%}

#cboxNext {
	bottom: 50%;
	right: 0}

#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {outline: 0}

#cboxPrevious {
	left: 0px;
	background-position: -51px -25px}

#cboxPrevious:hover {background-position: -51px 0px}

#cboxNext {
	right: 0;
	background-position: -75px -25px}

#cboxNext:hover {background-position: -75px 0px}

#cboxClose {
	right: 0;
	background-position: -100px -25px}

#cboxClose:hover {background-position: -100px 0px}

.cboxSlideshow_on #cboxSlideshow {
	background-position: -125px 0px;
	right: 27px}

.cboxSlideshow_on #cboxSlideshow:hover {background-position: -150px 0px}

.cboxSlideshow_off #cboxSlideshow {
	background-position: -150px -25px;
	right: 27px}

.cboxSlideshow_off #cboxSlideshow:hover {background-position: -125px 0px}

.mw-50{max-width: 50%;}
p + .box_img{margin-top: 0px;}
.mobile-padding-top{padding-top: calc(80vw - 108px);;background-size: auto 80vw;background-position: top;}
.tipp1::before, .tipp2::before{position: absolute;bottom: 20px;display: block;padding: 2px;background-color: rgb(0,170,155);color: rgb(255,255,255);opacity: 0;transition: all 0.7s ease;text-decoration: none;}
.tipp1::before{content:"Außenansicht Standort Düsseldorf";}
.tipp2::before{content:"Blick in die Fach-Bibliothek";}
.tipp1:hover::before, .tipp2:hover::before{opacity: 0;}

/*-footer ------------------------------------------------------------------------------------------------------------  */
.datenschutz {position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; height: 50px; border-top: 2px solid #D3D3D3; padding: 10px; z-index: 999999;}
.datenschutz a {color: #000; padding-right: 15px}

/*-aside ------------------------------------------------------------------------------------------------------------  */


/*---------------------------------------------------------------------------------
MEDIA Queries | Desktop
---------------------------------------------------------------------------------*/
@media screen and (min-width: 470px) {
		.mw-50{max-width:inherit;}
		p + .box_img {margin-top: 2rem;}
		.mobile-padding-top{background-image: url(../images/uebersetzungsdienst-duechting-in-duesseldorf-translation-meeting.png);
	margin: 0 !important;
	background-position: center;
			background-size: cover;
	padding-top:400px;
	-ms-flex-align: end !important;
	-webkit-box-align: end !important;
	align-items: flex-end !important;
	}

}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #referenzen{margin-top:500px;}
}

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

/*-sections ------------------------------------------------------------------------------------------------------------  */
ul.sprachen {
	-webkit-columns: 3;
	-moz-columns: 3;
	-o-columns: 3;
	columns: 3;
	width: 100%;
}	
	
.overlay ul li {
  min-height: 70px;
}
    
.overlay nav {
    font-size: 2.5rem;
    }
    

    #start {
            padding-top: 15rem;
            background-position: center;}

}


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

    .select-language {
		position: absolute;
		top: 10px;
		right: 70px;
	}
    
.round-left {border-radius: 15px 0  0 15px}
    
.round-right {border-radius:  0 15px 15px 0 } 
    
section {padding: 3rem 0 5rem 0}
    .tipp1:hover::before, .tipp2:hover::before{opacity: 1;}
    
/*-header ------------------------------------------------------------------------------------------------------------  */
    
    header {
        padding: 1rem 0;
        position: fixed;
        top: 0;
        background: #fff;
        z-index: 1}

        header .order-sm-1 {
            position: relative;
            border: none}
    
/*-navi ------------------------------------------------------------------------------------------------------------  */
    
    .button_container {
      top: 30px;
        right: 20px}   
    
    nav ul {text-align: center}  
    
/*-sections ------------------------------------------------------------------------------------------------------------  */
    
        #start {
            min-height:500px}

        .box_img {margin-top: 2rem}
    
        #leistung {min-height: 500px}    
    
/*-colorbox ------------------------------------------------------------------------------------------------------------  */

.wrapper_link {text-align: right}

}

@media screen and (min-width: 992px) {
    
.mobile-padding-top{padding-top:inherit;}
section {padding: 6rem 0 8rem 0}    
    
/*-sections ------------------------------------------------------------------------------------------------------------  */
    
    html, body, input, textarea{font-size: 100%}

    .wrapper-referenzen  {min-height: 1250px}

     #leistung {
         min-height:600px;
         background-position: bottom}    
}

@media screen and (min-width: 1200px) {
    
/*-sections ------------------------------------------------------------------------------------------------------------  */
    
      #start {
            min-height:700px;
            background-position: center}  

     #leistung {
         min-height:1000px;
         background-position: top}   
    
    label h3 {font-size: 1.251rem}   
    
    .round {border-radius: 15px}
}