/*
 * Theme Name: Audiotranskription
 * Theme URI: https://www.artworx.com
 * Text Domain: awx-theme
 * Theme Description: 
 * Author: Julian Wagner, Lars Zimmermann
 * Author URI: https://www.artworx.com
 * Version: 1.0
 * Tags: artworx. awx, audiotranskription
 * License:
 * License URI:
*/



/******************************************
    CSS Variables
******************************************/

:root {
    --color1: #FF711B; /* Orange */
    --color2: #FF1954; /* Pink */
    --color3: #B3C046; /* Green */
    --color4: #3B4395; /* Blue */
    --color4light: #E2E9F1;
    --color4midlight: #CCDEF3;
    
    --lightgrey: #F6F6F6;
	--grey: #848484;    
    --darkgrey: #2F3235;

	--font-family-standard: "Rubik", sans-serif;
	--font-family-headline: "Montserrat", sans-serif;
}



/******************************************
    Color Classes
******************************************/

.bg-white { background-color: white; }
.bg-lightgrey { background-color: var(--lightgrey); }
.bg-lightblue { background-color: var(--color4light); }
.bg-darkgrey { background-color: var(--darkgrey); }

.bg-color1 { background-color: var(--color1); }
.bg-color2 { background-color: var(--color2); }
.bg-color3 { background-color: var(--color3); }
.bg-color4 { background-color: var(--color4); }
.bg-color4midlight { background-color: var(--color4midlight); }

.white { color: white; }
.color1 { color: var(--color1); }
.color2 { color: var(--color2); }
.color3 { color: var(--color3); }
.color4 { color: var(--color4); }
.color4midlight { color: var(--color4midlight); }
.color4light { color: var(--color4light); }



/******************************************
    General
******************************************/

html { overflow-x: hidden; }

html.nav-open { overflow: hidden; }

body {
	font-family: var(--font-family-standard);
    color: var(--superdarkgrey);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.05px;
    background: white;
    overflow-x: hidden;
}

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

img[src$=".svg"] { width: 100%; }

a {
	position: relative;
	color:var(--color1);
	text-decoration: none;
}

a:focus,
a:active,
a:hover { 
	color:var(--color1);
	text-decoration: none;
}

a[type="tel"] { color:inherit; }

h1, .h1 {
	font-family: var(--font-family-headline);
	font-weight: 700;
	font-size: 28px;
	color: white;	
	margin: 0 0 40px 0;
	line-height: 1.2;
}

h1 span.block, .h1 span.block,
h2 span.block, .h2 span.block {
	display: inline-block;
	margin: 2px 0;
	padding: 5px 10px;
	background: var(--darkgrey);
	color: white;
/* 	white-space: nowrap; */
}

h2, h3, h4, h5 {
	font-family: "Rubik", sans-serif;
	font-weight: 600;
	color: var(--darkgrey);
}

h2:first-of-type, h3:first-of-type, h4:first-of-type { margin-top: 0; }

h2, .h2 {
	font-size: 22px;
	line-height: 1.2;
	font-family: "Rubik", sans-serif;
	font-weight: 600;
	color: var(--darkgrey);
}

h2 strong { font-weight: 600; }

h3, .h3 {
	font-size: 20px;
	line-height: 1.2;
}

h3 strong { font-weight: 600; }

h5 {
	font-size: 15px; 
	line-height: 1.2;
}

h2.line:after, .h2.line:after,
h3.line:after, .h3.line:after,
h4.line:after, .h4.line:after {
	content: "";
	position: relative;
	display: block;
	margin: 9px 0 0;
	width: 42px;
	height: 4px;
	background: var(--grey);
}

h2.line.line-color1:after, .h2.line.line-color1:after, h3.line.line-color1:after, h4.line.line-color1:after { background: var(--color1); }
h2.line.line-color2:after, .h2.line.line-color2:after, h3.line.line-color2:after, h4.line.line-color2:after { background: var(--color2); }
h2.line.line-color3:after, .h2.line.line-color3:after, h3.line.line-color3:after, h4.line.line-color3:after { background: var(--color3); }
h2.line.line-color4:after, .h2.line.line-color4:after, h3.line.line-color4:after, h4.line.line-color4:after { background: var(--color4); }
h2.line.line-color4midlight:after, h3.line.line-color4midlight:after, h4.line.line-color4midlight:after { background: var(--color4midlight); }

.line-color1 small { color: var(--color1); }
.line-color2 small { color: var(--color2); }
.line-color3 small { color: var(--color3); }
.line-color4 small { color: var(--color4); }

p + h2, p + h2:first-of-type, ol + h2, ul + h2, .wp-caption + h2 { margin-top: 60px; }
p + h3, p + h3:first-of-type, ol + h3, ul + h3, .wp-caption + h3 { margin-top: 45px; }
p + h4, p + h4:first-of-type, ol + h4, ul + h4, .wp-caption + h4 { margin-top: 30px; }

p, li, td {
    font-family: var(--font-family-standard);
    color: var(--darkgrey);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    margin: 0 0 20px 0;    
}

small {
	text-transform: uppercase;
	color:var(--grey);
	letter-spacing: 1px;
}

ul { margin-bottom: 5%; }
ul ul { /* margin-top: 3%; */ margin-bottom: 0; }
ol ol { margin-top: 12px; list-style-type: lower-alpha; }

li { margin-bottom: 12px; }

td { vertical-align: top; padding: 10px; }

h1 small {
	display: inline-block;
	font-family: var(--font-family-standard);
	margin-bottom: 10px;
	margin-top: 5%;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--grey);	
	letter-spacing: 1.5px;	
	font-weight: 400;
}

h2 small, .h2 small,
h3 small, .h3 small {
	display: block;
	font-family: var(--font-family-standard);
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.2;
	color: var(--grey);
	font-weight: 300;
	letter-spacing: 1.5px;
}

h2 small:last-child, .h2 small:last-child,
h3 small:last-child, .h3 small:last-child { margin-bottom: 10px !important;}

p strong, ul strong { font-weight: 700; }

.wpb_text_column li { margin-bottom: 5px; }

.wpb_text_column table { table-layout: auto; }
.wpb_text_column tr:nth-child(odd) { background-color: var(--lightgrey); }

@media only screen and (min-width: 667px) {
	h1, .h1 { font-size: 36px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	p, li, td { font-size: 15px; }
	h1 small { font-size: 16px; }	
	h2 small, .h2 small, h3 small { font-size: 14px; }	
	h2.line:after, .h2.line:after { height: 6px; width: 67px; }
	h1 span.block, .h1 span.block, h2 span.block, .h2 span.block { white-space: nowrap; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	h1, .h1 { font-size: 42px; }
	h2, .h2 { font-size: 24px; }
	h3 { font-size: 22px; }
	h4 { font-size: 20px; }
	h5 { font-size: 17px; }
	p, li, td { font-size: 16px; }
	h1 small { font-size: 14px; }
	h2.line:after, .h2.line:after { height: 6px; width: 67px; }
}

@media only screen and (min-width: 992px) {
	h1, .h1 { font-size: 48px; }
	h2, .h2 { font-size: 28px; }
	h3 { font-size: 24px; }
	h4 { font-size: 22px; }
	h5 { font-size: 18px; }
	p, li, td { font-size: 17px; }
	h1 small { font-size: 16px; }
	h2 small, .h2 small, h3 small  { font-size: 15px; }
}

@media only screen and (min-width: 1200px) {
	h1, .h1 { font-size: 56px; }
	h2, .h2 { font-size: 36px; }
	h3 { font-size: 26px; }
	h4 { font-size: 24px; }
	h5 { font-size: 19px; }
	p, li, td { font-size: 18px; }
}

@media only screen and (min-width: 1600px) {
	h1, .h1 { font-size: 72px; }
	h2, .h2 { font-size: 40px; }
	h3 { font-size: 32px; }
	
}

.bg-darkgrey h2, .bg-darkgrey h3, .bg-darkgrey h4, .bg-darkgrey p, .bg-darkgrey li,
.bg-color1 h2, .bg-color1 h3, .bg-color1 h4, .bg-color1 p, .bg-color1 li, .bg-color1 a, .bg-color1 small,
.bg-color2 h2, .bg-color2 h3, .bg-color2 h4, .bg-color2 p, .bg-color2 li, .bg-color2 a, .bg-color2 small,
.bg-color3 h2, .bg-color3 h3, .bg-color3 h4, .bg-color3 p, .bg-color3 li, .bg-color3 a, .bg-color3 small,
.bg-color4 h2, .bg-color4 h3, .bg-color4 h4, .bg-color4 p, .bg-color4 li, .bg-color4 a, .bg-color4 small {
	color: white;
}

.bg-lightblue h2, .bg-lightblue h3, .bg-lightblue h4, .bg-lightblue p, .bg-lightblue li { color: var(--darkgrey); }

.light { font-weight: 300; }
.normal { font-weight: 400; }
.price { font-size: 225%; }

.max-width-content.container-fluid,
.max-width-content .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
}

.container-fluid {
    margin: 0 auto;    
    padding: 0 15px;
}

.no-mobile { display: none; }

@media only screen and (min-width: 1600px) {
    .no-mobile { display: block; }
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.main { 
    max-width: 1600px;
    margin: 0 auto 0;    
    padding: 0 15px;
    margin-top: 53px;
    min-height: 50vh;
    z-index: 1;
    position: relative;
}

@media only screen and (min-width: 667px) {
	.main {
		margin-top: 53px;
		padding-left: 30px; 
		padding-right: 30px; 
	}	
}

@media only screen and (min-width: 768px) {
	.main { margin-top: 76px; }
}

@media only screen and (min-width: 992px) {
	.main { margin-top: 114px; }
}

@media only screen and (min-width: 1200px) {
	.main { margin-top: 115px; }
}



/******************************************
    Hero
******************************************/

/* Hero Home */

.hero.home { padding-top: 20%; padding-bottom: 75%; }


@media (min-width: 667px) {
	.hero.home { padding-top: 5%; padding-bottom: 35%; }
}

@media (min-width: 992px) {
	.hero.home { padding-top: 10%; padding-bottom: 30%; }
}

@media (min-width: 1200px) {
	.hero.home { padding-bottom: 25%; }
}



/* Hero Home Column */

.hero-col.vc_row {
	margin: 0 30px;
	padding: 30px 15px;
}

.hero-col.vc_row.first { margin-top: -70%; }

@media (min-width: 667px) {
	.hero-col.vc_row, .hero-col.vc_row.first { margin: -100% 7.5px 40px; }
}

@media (min-width: 992px) {
	.hero-col.vc_row,
	.hero-col.vc_row.first {
		margin-top: -70%;
		margin-left: 15px;
		margin-right: 15px;
		padding: 30px 15px;
	}
}

@media (min-width: 1200px) {
	.hero-col.vc_row,
	.hero-col.vc_row.first {
		margin-top: -50%;
		margin-left: 45px;
		margin-right: 45px;
		padding-bottom: 45px;
	}
}

.hero-col h2 {
	margin: 0 0 30px -45px;
	color: white;
	font-size: 24px;
	font-family: var(--font-family-headline);
}

.hero-col h2 span.block { white-space: nowrap; }

@media (min-width: 667px) {
	.hero-col h2 {
		font-size: 20px;
		margin-left: -30px;
	}
}

@media (min-width: 992px) {
	.hero-col h2 {
		font-size: 24px;
		margin-left: -45px;
	}
}

@media (min-width: 1200px) {
	.hero-col h2 {
		margin-left: -60px;
		font-size: 32px;
	}
}

.hero-col img {
	width: 100%;
	box-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.037),
		0 6.7px 5.3px rgba(0, 0, 0, 0.053),
		0 12.5px 10px rgba(0, 0, 0, 0.065),
		0 22.3px 17.9px rgba(0, 0, 0, 0.077),
		0 41.8px 33.4px rgba(0, 0, 0, 0.093),
		0 100px 80px rgba(0, 0, 0, 0.13)
	;
}
	
.hero-col.bg-lightblue img {
	box-shadow:
		0 2.8px 2.2px rgba(25, 67, 100, 0.037),
		0 6.7px 5.3px rgba(25, 67, 100, 0.053),
		0 12.5px 10px rgba(25, 67, 100, 0.065),
		0 22.3px 17.9px rgba(25, 67, 100, 0.077),
		0 41.8px 33.4px rgba(25, 67, 100, 0.093),
		0 100px 80px rgba(25, 67, 100, 0.13)
	;
}



/* Hero Product */

.hero.product.vc_section { padding-top: 10%; }
.hero.product h1 { margin-left: -45px; }

.hero.product img {
	box-shadow:
		0 2.8px 2.2px rgba(0, 0, 0, 0.037),
		0 6.7px 5.3px rgba(0, 0, 0, 0.053),
		0 12.5px 10px rgba(0, 0, 0, 0.065),
		0 22.3px 17.9px rgba(0, 0, 0, 0.077),
		0 41.8px 33.4px rgba(0, 0, 0, 0.093),
		0 100px 80px rgba(0, 0, 0, 0.13)
	;
}

.hero.product .vc_row[data-vc-full-width] { overflow: visible; }

.hero.product blockquote { margin: 0; }
.hero.product blockquote p {
	font-size: 17px; 
	font-style: normal;
}

@media (min-width: 667px) {
	.hero.product.vc_section { padding-top: 15%; }
	.hero.product img { margin-top: -25%; }
	.hero.product h1 { font-size: 32px; }
}

@media (min-width: 992px) {
	.hero.product h1 {
		margin-left: -80px;
		font-size: 42px;
	}
}

@media (min-width: 1200px) {
	.hero.product h1 { font-size: 56px; }
	.hero.product blockquote { margin: 0 15px; }
	.hero.product blockquote p { font-size: 20px; }
}

@media (min-width: 1600px) {
	.hero.product h1 { font-size: 64px; }
	.hero.product blockquote p { font-size: 24px; }
}



/******************************************
    Links
******************************************/

/* Arrow */

a.arrow { cursor: pointer; }

a.arrow:after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	background: url("img/icon-chevron-orange-right.svg") no-repeat center center;
	background-size: contain;
	transition: .2s ease-in-out margin-left;
}

a.arrow:hover { color: var(--color1); }

a.arrow:hover:after { margin-left: 10px; }



/* Big Arrow */

a.big-arrow { cursor: pointer; font-size: 16px; }
a.big-arrow:hover { color: var(--color1); }

a.big-arrow:before {
	content: "";
	display: inline-block;
	margin-right: 7px;
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	background: url("img/icon-chevron-orange-right.svg") no-repeat center center;
	background-size: contain;
	transition: .2s ease-in-out all;
}

a.big-arrow.open:before {
	transform: rotate(90deg);
}

a.big-arrow:not(.open):hover:before { 
	margin-left: 3px;
	margin-right: 4px;
}

@media (min-width: 992px) {
	a.big-arrow { font-size: 22px; }
	
	a.big-arrow:before {
		height: 22px;
		width: 22px;
	}
}

.color2 a.big-arrow { color: var(--color2); }
.color2 a.big-arrow:before { background-image: url("img/icon-chevron-pink-right.svg"); }



/******************************************
    "Read More" Row
******************************************/

.toggle-content {
	display: none;
	transition: none !important;
}


/******************************************
    CTA Buttons
******************************************/

.btn-size-mid {
    padding: 10px 16px;	
    font-size: 18px;
}

.btn-size-big {
    padding: 12px 30px;
    font-size: 18px;
    line-height: 1;
}

/*
.btn-ghost {
	border: 2px solid var(--color1);
	color: var(--color1);
	background-color: transparent;
}

btn-ghost:hover {
	border-color: var(--lightgreen);
	background: var(--lightgreen);
	color: white;
}
*/

@media only screen and (min-width: 992px) {
	.btn-size-mid {	padding: 10px 20px; }
	.btn-size-big {	padding: 12px 30px; font-size: 21px;}
}

@media only screen and (min-width: 1200px) {
	.btn-size-mid { padding: 12px 24px;	font-size: 19px; }
	.btn-size-big { padding: 20px 30px; font-size: 22px; }
}

.btn-size-mid:active, .btn-size-big:active { color: white; }

.btn-first, .btn-second, .btn-third, .btn-fourth, .btn-white {
	display: inline-block;
	color: white;
	transition: .2s ease-in-out all !important;	
}

.btn-first:hover, .btn-second:hover, .btn-third:hover, .btn-fourth:hover, .btn-white:hover
.btn-first:active, .btn-second:active, .btn-third:active, .btn-fourth:active, .btn-white:active,
.btn-first:focus, .btn-second:focus, .btn-third:focus, .btn-fourth:focus, .btn-white:focus {
	color: white;
	opacity: .85;
}

.btn-first:active, .btn-second:active, .btn-third:active, .btn-fourth:active, .btn-white:active { transform: scale(0.95); }

.btn-first { background-color: var(--color1); }
.btn-second { background-color: var(--color2); }
.btn-third { background-color: var(--color3); }
.btn-fourth { background-color: var(--color4); }
.btn-white {background-color: white; color: var(--darkgrey) !important; }

.btn-first.nomargin,
.btn-second.nomargin,
.btn-third.nomargin,
.btn-fourth.nomargin,
.btn-white.nomargin { margin: 0; }

.btn-first.btn-link,
.btn-second.btn-link,
.btn-third.btn-link,
.btn-fourth.btn-link { 
	background: none;
	text-decoration: underline;
}

.btn-link:hover { text-decoration: none; }

.btn-first.btn-ghost,
.btn-second.btn-ghost,
.btn-third.btn-ghost,
.btn-fourth.btn-ghost,
.btn-white.btn-ghost { 
	border: 2px solid transparent;
	box-sizing: content-box;
	background-color: transparent;
}

.btn-first.btn-ghost { border-color: var(--color1); color: var(--color1); }
.btn-second.btn-ghost { border-color: var(--color2); color: var(--color2); }
.btn-third.btn-ghost { border-color: var(--color3); color: var(--color3); }
.btn-fourth.btn-ghost { border-color: var(--color4); color: var(--color4); }
.btn-white.btn-ghost { border-color: white; color: white !important; }

.btn-ghost:hover { color: white; opacity: 1; }
.btn-first.btn-ghost:hover { background-color: var(--color1); }
.btn-second.btn-ghost:hover { background-color: var(--color2); }
.btn-third.btn-ghost:hover { background-color: var(--color3); }
.btn-fourth.btn-ghost:hover { background-color: var(--color4); }
.btn-white.btn-ghost:hover { background-color: white; color: var(--darkgrey) !important; }



/* .vc_btn3-container.vc_btn3-inline { display: block !important; } */

@media only screen and (min-width: 992px) {
	.vc_btn3-container.vc_btn3-inline+ .vc_btn3-container.vc_btn3-inline { margin-left: 15px; }
}




/******************************************
	Pricing Tables
******************************************/

table.prices {
	table-layout: fixed;
	width: 100%;
	margin: 0;
}

table.prices tr { display: block; }

table.prices th {
	display: block;
	background: var(--darkgrey);
	color: white;
	margin: 20px 0 2px;
	padding: 15px 7px;
	font-size: 18px;
	font-weight: 600;
	flex-wrap: wrap;
}

table.prices th.top,
table.prices .empty { display: none; }

table.prices td {
	display: flex;
	background: white;
	justify-content: space-between;
	padding: 15px 7px;
	font-size: 16px;
	margin-bottom: 2px;
	flex-wrap: wrap;
}

table.prices td:before {
    content: attr(data-label);
    display: flex;
	flex: 0 0 50%;
    font-weight: 600;
}

table.prices td:after {
	content: attr(data-info);
    display: block;
	flex: 0 0 100%;
    font-size: 12px;
    font-style: italic;
    order: -1;
}

table.prices .arrow { display: none; } 

table.prices td.bg-color1, table.prices th.bg-color1 { background-color: var(--color1); color: white; font-weight: 600; }
table.prices td.bg-color2, table.prices th.bg-color2 { background-color: var(--color2); color: white; font-weight: 600; }
table.prices td.bg-color3, table.prices th.bg-color3 { background-color: var(--color3); color: white; font-weight: 600; }
table.prices td.bg-color4, table.prices th.bg-color4 { background-color: var(--color4); color: white; font-weight: 600; }
table.prices td.bg-color4midlight, table.prices th.bg-color4midlight { background-color: var(--color4midlight); color: white; font-weight: 600; }

@media only screen and (min-width: 667px) {
	table.prices tr {
		display: table-row;
	}
	
	table.prices th,
	table.prices th.empty,
	table.prices th.top {
		display: table-cell;
		font-size: 14px;
		font-weight: 400;
	}
	
/* 	table.prices th.top { white-space: nowrap; } */
	
	table.prices td,
	table.prices td.empty {
		display: table-cell;
		white-space: nowrap;
		text-align: center;
		font-size: 17px;
	}
	
	table.prices .empty { background: none; }
	
	table.prices td:before,
	table.prices td:after { display: none; }
}

@media only screen and (min-width: 992px) {
	table.prices .arrow {
		float: left;
		display: block;
		margin: 0 10px 0 0;
		width: 21px;
		height: 42px;
		background: url("img/arrow-white-down.svg") no-repeat;
		background-size: contain;
		font-weight: 700;
	}
}


@media only screen and (min-width: 1440px) {
	table.prices th,
	table.prices th.top {
		padding: 20px 15px;
		font-size: 18px;
	}
	
	table.prices td {
		padding: 20px 15px;
		font-size: 20px;
	}
}


/*
@media only screen and (min-width: 667px) {
	.table.prices th,
	.table.prices td {
		width: 20%;
		height: 100px;
		padding: 20px 10px;
		border: 2.5px solid var(--lightblue);
		background: #fff;
		text-align: center;
		vertical-align: middle;
	}
}

.table.prices td:before {
    content: attr(data-label);
    display: block;
    width: 100%;
    text-align: center;
    color: var(--superdarkgrey);
    font-weight: 400;
    font-size: 13px;
}

.table.prices td.green,
.table.prices th.green {
	color: #fff;
	background: var(--green);
}

.table.prices th.green.top {
	min-width: 150px;
}

.table.prices td.orange {
	vertical-align: bottom;
	padding-left: 0;
	padding-right: 0;
}

.table.prices td.orange a {
	background: var(--orange);
	display: block;
	height: 65px;
	width: 100%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-style: normal;
	line-height: 65px;
}

.table.prices th {
	color: #fff;
	font-weight: 400;
	background: var(--darkgrey);
}

.table.prices th.top {
	border-bottom-width: 7.5px;
}

table.prices th.left {
	border-right-width: 7.5px;
}

table.prices th.empty,
table.prices td.empty {
	background: transparent;
	font-size: 14px;
	font-style: italic;
}

table.prices .arrow {
	float: left;
	display: block;
	margin: 6px 10px 0 0;
	width: 21px;
	height: 42px;
	background: url("../img/arrow-white-down.svg") no-repeat;
	background-size: contain;
	font-weight: 700;
}

table.prices div {
	display: inline-block;
	margin: 0 0 30px 0;
}

table.prices .bold {
	float: left;
	font-weight: bold;
}*/



/******************************************
  General Styles
******************************************/

.caption {
	padding-left: 80px;
	position: relative;
}

.caption:before {
	content:"";
	position: absolute;
	top:10px;
	left:0;
	height:2px;
	width:60px;
	background-color: var(--color2);
}

@media only screen and (min-width: 960px) {
	.caption:before { top:14px;	}
}

@media only screen and (min-width: 1200px) {
	.caption:before { top:16px;	}
}


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.intro h3 {
	margin-bottom: 1%;
	margin-top: 5%;
}

.top-green-line img { border-top: 7px solid #00b5a5; }

.initial-line {
	position: relative;
	padding-left: 75px;
	text-decoration: none;
}

.initial-line:before {
	content:"";
	height: 3px;
	width: 50px;	
	background-color: var(--color1);
	position: absolute;
	left: 7.5px;
	top: 12px;
}

.bg-darkgrey .initial-line:before { background-color: white; }

@media only screen and (min-width: 667px) {
 	.initial-line { padding-left: 115px; }
 	.initial-line:before { width: 75px; }
}
 
@media only screen and (min-width: 992px) {
	.initial-line:before { top: 20px; }
}

.logos .wpb_wrapper {
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items: flex-start;
}

.logos .wpb_wrapper img {
	flex: 0 0 30%;
 	width:30%;	
	margin: 5px;

}

@media only screen and (min-width: 667px) {
	.logos .wpb_wrapper img { flex: 0 0 18%; width:18%; }
}

@media only screen and (min-width: 768px) {
	.logos .wpb_wrapper img { flex: 0 0 14%; width:14%;}
}

@media only screen and (min-width: 992px) {
	.logos .wpb_wrapper img { flex: 0 0 11%; width:11%;}
}


@media only screen and (min-width: 768px) {
	.fancybox-slide--html .fancybox-close-small {
	    right: 10px;
	    top: 10px;
	}
}



/******************************************
  Visual Composer
******************************************/

.wpb_content_element:last-of-type { margin-bottom: 0; }

/*.vc_section[data-vc-full-width] > .vc_row {
	padding-left: 7.5px !important;
	padding-right: 7.5px !important;
}*/

/* .vc_section { padding-top: 0 !important; } */

.vc_column_container:not(:first-of-type) > .vc_column-inner { padding-top: 30px; }

@media only screen and (min-width: 667px) {
	.vc_column_container > .vc_column-inner,
	.vc_column_container:not(:first-of-type) > .vc_column-inner { padding-top: 0 !important; }
}

.vc_box_shadow img { box-shadow: 0 0 40px rgba(0, 0, 0, .2) !important; }

.vc_row.bg-top { background-position: top center !important; }

.colorbox {
	background-color: var(--darkgrey);
	background-color: var(--color1);
	padding: 15px 25px;
}

.colorbox p {
	color:white;
	line-height: 1.5;
	font-size:14px;	
}

.colorbox p strong { font-size: 110%; }

@media only screen and (min-width: 992px) {
	.colorbox {	padding: 20px 45px;	}
	.colorbox p {	font-size:16px;		}
}




/******************************************
  Full Border
******************************************/

/*
.full-border:before {
	content: "";
	display: block !important;
	position: absolute;
	height: 100%;
	width: 200vw;
	z-index: -1;
	top: 0;
	left: -50vw;
}

@media only screen and (min-width: 667px) {
	.full-border-left:before {
		right: 0;
	}
	
	.full-border-right:before {
		left: 0;
	}	
}

.full-border-blue:before {
	background: var(--blue);
}

.full-border-lightgrey:before {
	background: var(--lightgrey);
}
*/



/******************************************
	Icon Lists
******************************************/

/* Bullet */

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

ul.bullet li {
	margin-bottom: 15px;
	display: block;
	padding-left: 20px;
	position: relative;
}

ul.bullet li:before {
 	content: "";
 	display: block;
 	height: 6px;
 	width:6px;
 	position: absolute;
 	top:0;
 	left:0;
 	border-radius: 50%;
 	background-color: var(--color1);
 	margin-top: 9px;
    margin-right: 15px;
}

@media only screen and (min-width: 992px) {
	ul.bullet li:before {
		margin-top: 11px;
		margin-right: 20px;
	}
}

ol li { margin-bottom: 12px; }



/* Ticks & Arrow */

ul.ticks, ul.arrow, ul.arrow-long {
	list-style: none;
	margin-top: 0;
	padding: 0;
}

ul.ticks li, ul.arrow li, ul.arrow-long li {
	position: relative;
	height: auto;
	line-height: 1.5;
	margin: 0 0 17px 0;
	padding: 0 0 0 30px;
}

ul.ticks li:last-child, ul.arrow li:last-child, ul.arrow-long li:last-child {
	margin-bottom: 17px;
}

ul.arrow li { padding-left: 22px; }
ul.arrow-long li { padding-left: 45px; }

ul.ticks li:before, ul.arrow li:before, ul.arrow-long li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: inline-block;
	height: 20px;
	width: 20px;
	background: url("img/list-tick.svg") no-repeat center center;
	background-size: contain;
}

ul.arrow li:before {
	width: 10px;
	top: 1px;
	background-image: url("img/list-arrow.svg");
}

ul.arrow-long li:before {
	width: 30px;
	top: 0px;
	background-image: url("img/list-arrow-long.svg");
}

@media (min-width: 1200px) {
	ul.ticks li, ul.arrow li, ul.arrow-long li {
		padding-left: 45px;
		margin-bottom: 24px;
	}
	
	ul.arrow li { padding-left: 25px; }
	ul.arrow-long li { padding-left: 60px; }
	
	ul.ticks li:before, ul.arrow li:before, ul.arrow-long li:before {
		height: 30px;
		width: 30px;
		top: -3px;
	}
	
	ul.arrow li:before { width: 12px; }
	ul.arrow-long li:before { width: 45px; top: -2px; }
}


 
/******************************************
	Quote
******************************************/

blockquote { margin: 30px; }

blockquote p {
	color: var(--darkgrey);
	font-style: italic;
}


/******************************************
	Card
******************************************/

/*
.card-wrapper .wpb_wrapper {
	display: flex;
	flex-wrap:wrap;
}

a.card {
	display: block;
	margin: 15px 7.5px;
	padding-bottom: 110%;
	background-size: cover;
	background-color: var(--darkgrey);
	background-position: center center;
	box-shadow: 0 0 45px rgba( 0, 0, 0, .25);
	transition: .2s ease-in-out all;
}


a.card:not(.link-no):hover {
	transform: scale(1.02) translateY(-10px);
	box-shadow: 0 0 55px rgba( 0, 0, 0, .5);
	cursor: pointer;
}

a.card .card-text {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
	padding: 15px 15px;
	color: white;
	background: rgba(0, 0, 0, 0.75);
}

a.card.green .card-text { background: rgba(42, 70, 5, 0.75); }
a.card.blue .card-text { background: rgba(20, 67, 92, 0.75); }
a.card.gold .card-text { background: rgba(130, 115, 74, 0.75); }
a.card.red .card-text { background: rgba(66, 24, 24, 0.75); }

a.card .card-text h3 {
	color: white;
	text-transform: none;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
	font-size: 16px;
}

a.card .card-text h3:after {
	position: relative;
	content: "";
	display: block;
	background: white;
	height: 2px;
	width: 33%;
	margin-top: 20px;
	bottom: 0;
}

a.card .card-text h3:before { display: none; }

a.card .card-text h3 small {
	display: block;
	text-transform: none;
	color: white;
	font-weight: 400;
	font-size: 75%;
}

a.card.simple {
	background-color: var(--color1); 
	padding: 25px;
	flex: 0 0 95%;
}

a.card.simple .card-text { background: none; position: relative; }

a.card.simple .card-text h3 { font-size: 22px; hyphens: auto;}

a.card.simple .card-text h3:after {
	content: url("img/icon-arrow-white-right.svg");
	height: auto;
	width: auto;
	max-width: 15%;
	background: none;
}

@media only screen and (min-width: 667px) {
	a.card .card-text { padding: 25px 15px;	}	
	a.card .card-text h3 { font-size: 19px; }
	a.card.simple .card-text h3 { font-size: 16px; }
	a.card.simple .card-text h3:after {	max-width: 25%; }
	a.card.simple {	flex: 0 0 29.5%; 	padding: 20px; }
}

@media only screen and (min-width: 992px) {
	a.card { padding-bottom: 125%; }
	a.card .card-text h3 { font-size: 24px; }	
	a.card.simple .card-text h3 { font-size: 20px; }	
	a.card.simple {	padding: 15px; }	
}

@media only screen and (min-width: 1200px) {
	a.card .card-text { padding: 35px 30px;	}
	a.card .card-text h3  { font-size: 26px; }	
	a.card.simple .card-text h3 { font-size: 22px; }	
}

@media only screen and (min-width: 1400px) {
	a.card.simple .card-text h3 { font-size: 26px; }	
}
*/


/******************************************
	Contact Buttons
******************************************/

/*
#contact-buttons {
	display: none;
	position: fixed;
	z-index: 1;
	right: 0;
	bottom: 20%;
	list-style: none;
	padding: 0;
	margin: 0;
}

#contact-buttons li {
	display: block;
	margin: 1px 0;
	font-size: 14px;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

#contact-buttons li a {
	display: block;
	margin: 0;
	padding: 10px 15px;
	background: var(--color1);
	color: white;
	line-height: 1;
	transition: .3s ease-in-out all;
}

#contact-buttons li a:hover { opacity: .85; }

#contact-buttons li a:before {
	display: inline-block;
	content: "";
	height: 26px;
	width: 26px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	vertical-align: -7px;
	margin-right: 10px;
}

#contact-buttons li.cal a:before { background-image: url("img/icon-cal.svg"); }
#contact-buttons li.phone a:before { background-image: url("img/icon-phone.svg"); }


@media only screen and (min-width: 992px) {
	#contact-buttons { display: block; }
}

@media only screen and (min-width: 1200px) {
	#contact-buttons li { font-size: 17px; }
	#contact-buttons li a:before {
		height: 30px;
		width: 30px;
		vertical-align: -9px;
		margin-right: 10px;
	}
}
*/


/******************************************
	Tabs
******************************************/

.vc_tta-tabs .vc_tta-panel { margin: 0; }

.vc_tta-tabs .vc_tta-panels {
	background-color: var(--superlightgrey) !important;
	padding: 10% 0;
}

@media only screen and (min-width: 992px) {
	.vc_tta-tabs .vc_tta-panels { padding: 5%; }
}

.vc_tta-tabs .vc_tta-panels:before,
.vc_tta-tabs .vc_tta-panels:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 100vw;
	background: var(--superlightgrey);
}

.vc_tta-tabs .vc_tta-panels:before { left: -100vw; }
.vc_tta-tabs .vc_tta-panels:after { right: -100vw; }

.vc_tta-tabs .vc_tta-tab > a {
	color: var(--superdarkgrey) !important;
	background-color: var(--lightgrey) !important;
}

.vc_tta-tabs .vc_tta-tab.vc_active > a {
	background-color: var(--superlightgrey) !important;
	color: var(--superdarkgrey);
}

.vc_tta-tabs .vc_tta-panel-title > a { color: var(--color1) !important; }
.vc_tta-tabs .vc_active .vc_tta-panel-title > a { color: var(--superdarkgrey) !important; }


.vc_tta-container { margin-bottom: 0 !important; }

.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel.teamslider .vc_tta-panel-heading,
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel.vc_active.teamslider .vc_tta-panel-heading,
.vc_tta-color-grey.vc_tta-style-flat .vc_tta-panel.teamslider .vc_tta-panel-body { background: transparent; }



/******************************************
	VC Grid Item
******************************************/

/*
.vc_grid-item-mini {
	background: white;
	box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.1); 
}

.vc_grid-item-mini .vc_gitem_row .vc_gitem-col { padding: 30px; }

.vc_grid-item-mini .vc_gitem_row .vc_gitem-col .vc_btn3-container { margin: 0; }

.vc_grid-item-mini .vc_gitem_row .vc_gitem-col .vc_gitem-link {
	padding-left: 0;
	font-size: 18px;
	color: var(--color1);
}

.vc_gitem-post-data p { font-size: 18px; }

.vc_gitem-animated-block { max-height: 250px; }

@media only screen and (min-width: 992px) {
	.vc_grid-item-mini .vc_gitem_row .vc_gitem-col .vc_gitem-link { font-size: 21px; }
}
*/



/******************************************
	Lightbox
******************************************/

.lightbox .fancybox-content { padding: 30px; }

@media only screen and (min-width: 992px) {
	.lightbox .fancybox-content { 
		max-width: 960px;
		padding: 90px;
	}
}

.lightbox .fancybox-close-small {
	width: 60px;
	height: 60px;
	opacity: .4;
	transition: .3s ease-in-out opacity;
}

.lightbox .fancybox-close-small:hover { opacity: 1; }

.lightbox .hidden { opacity: 1; }



/******************************************
	Count Up
******************************************/

/*
.countup-box { padding: 15px 0; }
.countup-box span { font-size: 48px; }

.countup-box p {
	margin-bottom: 5px;
	font-size: 18px;
	line-height: 1.2;
}

.countup {
	color: var(--superdarkgrey);
	font-weight: 600;
}

@media only screen and (min-width: 667px) {
	.countup-box span { font-size: 32px; }
	.countup-box p { font-size: 14px; }
}

@media only screen and (min-width: 992px) {
	.countup-box span { font-size: 36px; }
	.countup-box p { font-size: 16px; }
}

@media only screen and (min-width: 1200px) {
	.countup-box span { font-size: 42px; }
	.countup-box p { font-size: 18px; }
}
*/


/******************************************
    Search
******************************************/

/* Search Form */

#searchform { display: flex; }

#searchform input.field {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	height: 36px;
	padding: 5px 10px;
	font-family: var(--font-family-standard);
	color: var(--darkgrey);
	outline: none;
	border: 1px solid white;
	transition: .2s ease all;
}

#searchform input.field:focus {
	outline: none;
	border-color: var(--color1);
}

#searchform input.submit {
	flex: 0 36px;
	background: var(--color1) url("img/icon-search-white.svg") no-repeat center center;
	background-size: 50%;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: .2s ease all;
}

#searchform input.submit:hover,
#searchform input.submit:active,
#searchform input.submit:focus {
	background-size: 47%;
	outline: none;
}



/******************************************
    Download Dropdowns
******************************************/

/* Dropdowns */

.select-download {
	display: block;
	width: 100%;
	height: 75px;
	margin: 0 0 12px 0;
	padding: 0;
	border: 1px solid var(--grey);
	font-family: var(--font-family-headline);
	font-size: 20px;
	font-weight: 800;
	color: var(--grey);
	line-height: 76px;
	text-align: center;
}

@media (min-width: 992px) {
	.select-download { width: 80%; }
}

.select-download .sod_label {
	height: 100%;
	color: var(--grey);
}

.select-download.open,
.select-download:hover {
	border-color: var(--grey);
}

/* .select-download.open { box-shadow: 0 0 30px rgba(0, 0, 0, .15); } */

.select-download:before { display: none; }

.select-download:after {
	content:"";
	width: 25px;
	height: 25px;
	border: 0;
	background-image: url("img/icon-chevron-grey-down.svg");
	background-size: contain;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.select-download .sod_list_wrapper {
	width: 100%;
	margin: 0 0 0 -1px;
	border: 0;
	box-shadow: 0 0 30px rgba(0, 0, 0, .15);
	box-sizing: content-box;
}

.select-download .sod_option {
	padding: 0;
	color: var(--grey);
}

.select-download .sod_option.selected { 
	padding: 0;
	color: var(--darkgrey);
}

.select-download .sod_option.selected:before {
	right: 32px;
	height: 15px;
	width: 18px;
	color: var(--grey);
	background-size: cover;
}

.select-download .sod_option:after,
.select-download .sod_label:after {
	content: " ";
	position: absolute;
	left: 20px;
	top: 50%;
	margin: -15px 0 0;
	display: block;
	height: 30px;
	width: 30px;
	background-repeat: no-repeat;
}

.select-download .sod_option small,
.select-download .sod_label small {
	font-size: 75%;
	text-transform: none;
}

.select-download .sod_option.macos:after,
.select-download[data-os="macos"] .sod_label:after {
	background-image: url("img/icon-macos.svg");
}

.select-download .sod_option.linux:after,
.select-download[data-os="linux"] .sod_label:after {
	background-image: url("img/icon-linux.svg");
}

.select-download .sod_option.windows:after,
.select-download[data-os="windows"] .sod_label:after {
	background-image: url("img/icon-windows.svg");
}


/* Button */

.btn-download {
	width: 100%;
	padding-top: 26px;
	padding-bottom: 26px;
	text-align: center;
}

@media (min-width: 992px) {
	.btn-download { width: 80%; }
}



/******************************************
	Toggle Element
******************************************/

/* .vc_toggle { margin-top: 30px !important; } */

.vc_toggle.vc_toggle_simple .vc_toggle_icon::after, .vc_toggle_simple .vc_toggle_icon::before { background-color: var(--color1) !important; }

.vc_toggle.vc_toggle_simple {
	margin: 0;
	padding-block: 20px;
	border-bottom: 1px solid var(--lightgrey);
}

.vc_toggle.vc_toggle_simple h4 {
	font-size: 16px;
	font-weight: 500;
}

@media only screen and (min-width: 667px) {
	.vc_toggle.vc_toggle_simple h4 { font-size: 18px; }
}



/******************************************
	Extra
******************************************/

.singlesubtitle .wpb_content_element { margin-bottom: 15px; }

@media only screen and (min-width: 992px) {
	.offset-left { margin-left: -12.5%; }
	.offset-right { margin-right: -12.5%; }
}

audio { outline: none; }


/******************************************
	Full Column Backgrounds
******************************************/

.full-bgimg-right .prepend,
.full-bgimg-left .prepend {
	position: absolute;
	height: 100%;
	min-width: 100%;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: left center;
}

.full-bgimg-left .prepend {
	right: 0;
	left: auto;
	background-position: right center;
}

.full-bgcolor-left:after,
.full-bgcolor-right:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100vw;
	top: 0;
	right: 0;
	z-index: -1;
}

.full-bgcolor-right:after { left: 0; }

.col-lightgrey:after { background-color: var(--lightgrey); }
.col-darkgrey:after { background-color: var(--darkgrey); }
.col-color1:after { background-color: var(--color1); }
.col-color2:after { background-color: var(--color2); }
.col-color3:after { background-color: var(--color3); }
.col-color4:after { background-color: var(--color4); }
.col-color4midlight:after { background-color: var(--color4midlight); }
.col-lightblue:after { background-color: var(--color4light); }



/******************************************
	Full Column Backgrounds
******************************************/

.xoo-wsc-ft-btn { border-radius: 0; }



/******************************************
	404
******************************************/

.bg-404 { 
	background-image: url("https://www.audiotranskription.de/wp-content/uploads/2020/11/download.jpg");
	background-size: cover;
	
}



/************************
	Borlabs
************************/

/* Box */

#BorlabsCookieBox ._brlbs-box { padding: 30px 15px !important; }
#BorlabsCookieBox p { line-height: 1.5; }
//#BorlabsCookieBox ._brlbs-block-content._brlbs-bg-dark { background-color: rgba(255,255,255,.6); }
#BorlabsCookieBox ._brlbs-refuse-btn a { font-size: 1.4em !important; line-height: 1 !important; }
#BorlabsCookieBox ._brlbs-h3 { text-align: left !important; }
#BorlabsCookieBox td { color: white; }



/* Cookie Table */

.BorlabsCookie table._brlbs { margin-bottom: 45px; }

/* .BorlabsCookie table._brlbs tr:nth-child(odd){ background-color: $color-grey5; } */

.BorlabsCookie table._brlbs td,
.BorlabsCookie table._brlbs th {
	padding: 5px 10px;
}



/* Content Block */

.BorlabsCookie ._brlbs-content-blocker ._brlbs-caption p,
.BorlabsCookie ._brlbs-content-blocker small { color: white !important; }

.BorlabsCookie ._brlbs-content-blocker ._brlbs-embed {
	position: absolute !important;
	top: 0;
}



.wpb_single_image .vc_figure .vc_figure-caption {
	margin-top: 8px;
	color: var(--grey);
	font-style: italic;
	font-size: 13px;
}