/*
Theme Name: cotube Frontend 2019
Theme URI: https://achtbit.media/
Author: achtbit media Patrick Dressel & Jonas Heß GbR
Author URI: https://achtbit.media/
Description: Theme für das cotube-Frontend
Version: 0.0.1
Text Domain: cotube_frontend_2019
*/

:root {
    --main: #006d84;
    --main-akzent: #6bb3c2;
    --grey: #5d5d5d;
    --lightgrey: #a4a4a4;
    --tablegrey: #8a8a8a;
    --orange: #f9b233;
    --card: 0 3px 6px rgba(0,0,0,0.16);
    --sidebar-bgr:#C6DDE3;
}

html {
    height:100%;
}
* {
    font-family: "Nunito",sans-serif;
}
body {
    margin:0;
    padding:0;
    font-family: "Nunito",sans-serif;
    /*background-color: #006d8422;*/
    height:100%;
    color:var(--grey);
}

a {
    text-decoration: none;
    font-weight:600;
    color:var(--main);
    transition:color 0.2s;
}

a:hover {
    color:var(--main-akzent);
    transition:color 0.2s;
}

.logo {
    width:90px;
    margin-left:25px;
    margin-top:25px;
    float:left;
}

#nav {
    float:left;
    margin-top:54px;
    width:calc(100% - 115px);
}

#nav ul {
    margin:0;
    padding:0;
    padding-left:30px;
}

#nav ul li {
    float:left;
    list-style-type:none;
    margin-left:30px;
    padding-bottom:5px;
}

#nav ul li a {
    text-decoration: none;
    color:white;
    font-size:24px;
    font-weight:600;
    text-transform:uppercase;
}

#nav ul li a:focus {
    outline:none;
}

#nav ul li:not(.current-menu-item) a::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #fff;
    transition: width .3s;
    border-radius:1.5px;
}

.current-menu-item::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    transition: width .3s;
    border-radius:1.5px;
}

#nav ul li a:hover::after {
    width: 100%;
}

.search-icon {
    float:right!important;
    margin-right:60px;
}

.body-background-fade {
    background-color:var(--main);
    height:250px;
    width:100%;
    background: rgb(0,109,132);
background: linear-gradient(to bottom, rgba(0,109,132,1) 0%, rgba(0,109,132, 0.738) 19%, rgba(0,109,132, 0.541) 34%, rgba(0,109,132, 0.382) 47%, rgba(0,109,132, 0.278) 56.5%, rgba(0,109,132, 0.194) 65%, rgba(0,109,132, 0.126) 73%, rgba(0,109,132, 0.075) 80.2%, rgba(0,109,132, 0.042) 86.1%, rgba(0,109,132, 0.021) 91%, rgba(0,109,132, 0.008) 95.2%, rgba(0,109,132, 0.002) 98.2%, transparent 100%);
}

.cnt {
    margin-left:30px;
    margin-right:30px;
    width:calc(100% - 60px);
    margin-top:-50px;
    overflow:auto;
    padding-bottom:200px;
}

.wrapper {
    width:100%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
}

.sidebar {
    float:right;
    width:300px;
}

.main_cnt {
    float:left;
    width:calc(100% - 400px);
}

.sidebar-box-heading {
    padding-left:20px;
}

.sidebar-box-content {
    background-color:var(--sidebar-bgr);
    padding:20px;
    box-shadow:0px 0px 4px 0px rgba(0,0,0,0.16);
    border-radius: 3px;
}

.sidebar-box:not(:first-child) {
    padding-top:30px;
}
#footer {
    width:calc(100% - 60px);
    background-color:var(--sidebar-bgr);
    position: absolute;
    bottom: 0px;
    box-shadow: var(--card);
    padding-left:30px;
    padding-right:30px;
}

.footer-patch {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

.footer-cnt {
    width:100%;
    max-width:1300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    margin-bottom:50px;
}

.footer-cnt::after {
  content: "";
  clear: both;
  display: table;
}

.footer-left {
    float:left;
    margin-top:3px;
}

.footer-right {
    float:right;
    margin-bottom:-50px;
    margin-top:40px;
}

.heading {
    color:var(--main);
    font-size:25px;
    text-transform:uppercase;
    font-weight:bold;
    padding-bottom:10px;
    padding-left: 20px;
}


.footer-logo-np {
    width:130px;
    margin-bottom:10px;
    margin-right:10px;
}

.footer-logo-nectv {
    width:50px;
}

.news_entry {
    color:var(--grey);
    font-weight:normal;
}
.news_entry:hover {
    color:var(--grey);
}

.news-entry-thumbnail {
    float:left;
    margin-right:15px;
    border-radius: 3px;
}


.entry-header {
    color:var(--main);
    font-size:25px;
    font-weight:600;
    margin-left:20px;
}

.entry-header-info {
    font-size:14px;
    color:var(--grey);
    font-weight:normal;
    text-transform: none;
}
.news-single-image {
    width:500px;
    height:auto;
    max-width:100%;
    margin-right:10px;
    margin-top:3px;
    margin-bottom:15px;
    border-radius:3px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px auto;
}
.widget-title {
    color:var(--grey);
    font-size:25px;
    font-weight:600;
    margin-bottom:-20px;
    margin-top:20px!important;
}

.team-card {
    width:calc(100% - 40px);
    position:relative;
    height:80px;
    border-radius: 3px;
    background-color:var(--sidebar-bgr);
    margin-top:30px;
    padding:20px;
    box-shadow: var(--card);
}
.team-image {
    position:absolute;
    top:20px;
    left:20px;
    height:calc(100% - 40px);
    border-radius:3px;
}
.team-name {
    margin-left:94px;
    color:var(--main);
    font-weight:bold;
}
.team-desc {
    margin-left:94px;
}

@media (max-width: 1068px) and (min-width:971px), (max-width: 850px) and (min-width:641px), (max-width:400px) {
    .topic-card-overlay-text {
        font-size:20px!important;
    }
    .topic-card-overlay-arrows {
        font-size:20px!important;
    }
    .cnt-card-overlay-text {
        font-size:20px!important;
    }
    .cnt-card-overlay-arrows {
        font-size:20px!important;
    }
}


@media (min-width: 1141px) {

    .channel-container {
        width:calc(100% - 30px);
        position:relative;
        margin-bottom:30px;
        padding:15px;
        border-radius:3px;
        box-shadow:var(--card);
		display:flex;
		align-items:center;
    }

    .channel-main-kuerzel {
        background-color:white;
        padding-left:30px;
        width:90px;
		display:block;
		flex-grow:0;
		flex-shrink:0;
    }

    .channel-main-kuerzel-font {
        font-size:80px;
        font-weight:bold;
        font-family:'Montserrat', sans-seif;
        margin-right:-10px;
		float:right;
    }

    .channel-main-kuerzel-font {

    }

    .channel-main-info {
        color:white;
		margin-left:15px;
		margin-right:15px;
		overflow:hidden;
		width:100%;
    }

    .channel-main-info-name {
        font-size:30px;
        font-weight:600;

    word-break: break-all;
    line-height: 0.9;
    margin-bottom: 15px;
    }

    .channel-main-image {
        border-radius:3px;
		width:275px;
    }
}

@media (max-width: 1140px) {
    .channel-main-image {
        max-width:500px;
        width:100%;
        border-radius:3px;
    }
    .channel-container {
        margin-bottom:30px;
        padding:20px;
        padding-bottom:15px;
        border-radius:3px;
        display:block;
    }
    .channel-main-kuerzel {
        background-color:white;
        padding-left:30px;
        width:90px;
        overflow:hidden;
    }

    .channel-main-kuerzel-font {
        font-size:80px;
        font-weight:bold;
        font-family:'Montserrat', sans-serif;
        margin-right:-10px;
        float:right;
    }
    .channel-main-info {
        color:white;
        margin-top:15px;
        margin-bottom:15px;
    }

    .channel-main-info-name {
        font-size:30px;
        font-weight:600;
    }
}

.vjs-poster {
    border-radius: 3px;
}
.vjs-control-bar {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.videoJSvideo {
    border-radius: 3px;
}
.vjs-tech {
    border-radius: 3px;
}

@media (min-width: 971px) {
    .nav_mobile_close {
        display:none;
    }
    .mobile_headMenu {
        display:none;
    }
    .box h3 {
        margin-left:0;
        margin-right:0;
    }
}

@media (max-width: 970px) {
    .textwidget p {
        margin-right:0;
        margin-left: 0;
    }
    .so-widget-sow-editor h3 {
        margin-left:0;
        margin-right:0;
    }
    #nav {
        position:absolute;
        height:100%;
        width:100%;
        background-color:#006d84cc;
        top:0;
        left:0;
        margin-top:0;
        z-index:100;
        opacity:0;
        visibility: hidden;
        transition: visibility .3s, opacity .3s;
    }

    #nav ul {
        margin-top:60px;
    }

    #nav ul li {
        float:left;
        clear:left;
        display:inline-block;
    }
    .search-icon {
        display:none!important;
    }
    #nav:target {
        opacity:1;
        visibility:visible;
        transition: visibility .3s, opacity .3s;
    }
    .nav_mobile_close {
        color:white!important;
        font-size:35px;
        position:absolute;
        top:45px;
        right:30px;
        cursor:pointer;
    }
    #nav a {
        color:white;
    }

    .mobile_headMenu {
        float:right;
        color:white;
        font-size:30px;
        margin-top:48px;
        margin-right:30px;
    }
    .mobile_headMenu a {
        color:white;
    }

    .search_mobile {
        margin-right:5px;
    }

    .main_cnt {
        float:none;
        width:100%;
    }

    .sidebar {
        float:none;
        width:100%;
    }

    .cnt {
        margin-left:0;
        margin-right:0;
        margin-top:-80px;
        width:100%;
        padding-bottom:250px;
    }

    .footer-left {
        float:none;
        margin-top:0;
        margin-bottom:-5px;
    }

    .footer-right {
        float:none;
        margin-bottom: 20px;
    }

    .footer-cnt {
        margin:30px;
        width:calc(100% - 60px);
    }

    .footer-logo-nectv {
        float:left;
    }
    .footer-logo-np {
        margin-top:11px;
        margin-left:15px;
    }
    #footer {
        padding:0!important;
        width:100%;
    }
    p {
        margin-left:30px;
        margin-right:30px;
    }
    .heading {
        /*margin-left:30px;*/
    }
    .sidebar-box-heading {
        margin-left:0;
    }
}

.widget-title {
    margin-left:20px;
    margin-right:20px;
    color:var(--main);
}

@media (max-width: 640px) {
    .content-main-channel {
        margin-left:30px;
    }
    .content-main-meta {
        margin-left:30px;
    }
    .channel-overview-desc {
        margin-left:20px;
        margin-right:20px;
    }
    .cnt-card-home {
        padding-bottom: 28.125%!important;
        padding-bottom: calc(1 / (16 / 9) * 100%)!important;
    }
    .sidebar-box-content {
        border-radius: 0;
    }
    .topic-card {
        width:100%!important;
        border-radius: 0!important;
    }
    .cnt-card {
        margin-left: 0 !important;
        float: none !important;
        display: block !important;
        width:100%!important;
        border-radius: 0!important;
        padding-bottom: 56.25%!important;
        padding-bottom: calc(1 / (16 / 9) * 100%)!important;
    }
    .topic-card-image {
        border-radius: 0!important;
    }
    .topic-card-overlay {
        border-radius: 0!important;
    }
    .cnt-card-image {
        border-radius: 0!important;
    }
    .cnt-card-overlay {
        border-radius: 0!important;
    }

    .team-card {
        border-radius:0;
    }
    .channel-container {
        border-radius:0px!important;
    }
    .box {
        border-radius:0!important;
    }
    .vjs-poster {
        border-radius: 0px;
    }
    .vjs-control-bar {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .videoJSvideo {
        border-radius: 0px;
    }
    .vjs-tech {
        border-radius: 0px;
    }
    .content-main-channel {
        margin-left:0;
    }
    .content-main-meta {
        margin-left:0;
    }
    .content-main-desc p {
        margin-left:0;
        margin-right:0;
    }
}
@media (min-width: 641px) and (max-width: 970px) {
    .wrapper {
        margin-left:30px;
        margin-right:30px;
        width:calc(100% - 60px);
    }
    .content-main-desc p {
        margin-left:0;
    }
}


.events {
	overflow: hidden;
}

.events img {
	border-radius: 3px;
	float: left;
	margin-right: 15px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
}

.single-event-infos {
	min-height: 80px;
    margin-left:95px;
}

.single-event-infos h3 {
	color: var(--main);
	margin: 0px;
	padding-top: 5px;
}

.single-event-infos p {
	margin: 0px !important;
	font-weight: bold;
}
.single-event {
    position:relative;
}

.button {
	background-color:var(--main);
	padding:10px 15px 10px 15px;
	border-radius:3px;
	text-transform: uppercase;
	color:var(--orange);
	font-weight:bold;
	font-size:18px;
	text-decoration: none;
	display: inline-block;
	width: calc(100% - 30px);
}

.button:after {
	content: "\f0da";
	font-family: "Font Awesome 5 Free";
	margin-left: 8px;
}

.topic-heading {
	color:var(--grey);
	font-size: 1.17em;
	font-weight: bold;
	padding-bottom:15px;
	padding-left: 20px;
	margin-top: -12px;
}

.topic-card {
    width:calc(50% - 12.5px);
    float:left;
    margin-bottom:25px;
    position:relative;
}
.topic-card:nth-child(odd) {
    margin-left:25px;
    float:right;
}
.topic-card-image {
    width:100%;
    border-radius: 3px;
    box-shadow: var(--card);
    margin-bottom:-5px;
}
.topic-card-overlay {
    position:absolute;
    height:100%;
    width:100%;
    border-radius:3px;
    bottom:0;
    left:0;
    background: linear-gradient(to top, rgba(0,109,132,1) 0%, rgba(0,109,132, 0.738) 19%, rgba(0,109,132, 0.541) 34%, rgba(0,109,132, 0.382) 47%, rgba(0,109,132, 0.278) 56.5%, rgba(0,109,132, 0.194) 65%, rgba(0,109,132, 0.126) 73%, rgba(0,109,132, 0.075) 80.2%, rgba(0,109,132, 0.042) 86.1%, rgba(0,109,132, 0.021) 91%, rgba(0,109,132, 0.008) 95.2%, rgba(0,109,132, 0.002) 98.2%, transparent 100%);
    box-shadow: var(--card);
}
.topic-card-overlay-text {
    position:absolute;
    bottom:8px;
    left:20px;
    color:white;
    font-size:30px;
    font-weight:600;
    margin-right:50px;
}
.topic-card-overlay-arrows {
    position:absolute;
    bottom:8px;
    right:20px;
    color:var(--orange);
    font-size:30px;
}

.cnt-card {
    width:calc(50% - 12.5px);
    float:left;
    margin-bottom:25px;
    position:relative;
    overflow: hidden;
    padding-bottom: 28.125%;
    padding-bottom: calc(1 / (16 / 9) * calc(50% - 12.5px));
    box-shadow: var(--card);
}
.cnt-card:nth-child(odd) {
    margin-left:25px;
    float:right;
}
.cnt-card-image {
    width:100%;
    height:100%;
    border-radius: 3px;
    box-shadow: var(--card);
    margin-bottom:-5px;
    position:absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center center;
}
.cnt-card-overlay {
    position:absolute;
    height:100%;
    width:100%;
    border-radius:3px;
    bottom:0;
    left:0;
    box-shadow: var(--card);
}
.cnt-card-overlay-text {
    position:absolute;
    bottom:23px;
    left:20px;
    color:white;
    font-size:30px;
    font-weight:600;
    margin-right:50px;
}
.cnt-card-overlay-arrows {
    position:absolute;
    bottom:8px;
    right:20px;
    color:var(--orange);
    font-size:30px;
}

.tcr-sidebar-shortname {
	/*padding-left:30px;*/
	width:50px;
    overflow:hidden;
	/*top:50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);*/
    float:left;
    height:40px;
    margin-right:15px;
}

.tcr-sidebar-shortname-text {
	color: white;
	font-family: 'Montserrat', sans-serif;
	font-size:30px;
	font-weight:bold;
	margin-right:-3px;
	float:right;
    line-height:40px;
    vertical-align: middle;
}
.tcr-sidebar {
    min-height:40px;
}

.tcr-sidebar:not(:last-child) {
    margin-bottom:10px;
}
.tcr-sidebar-name {
    line-height:40px;
    vertical-align: middle;
    font-weight:bold;
    font-size:20px;
}
.button-tcr-sidebar {
    margin-top:10px;
}

.box {
	background-color:var(--sidebar-bgr);
	padding:20px;
	box-shadow:0px 0px 4px 0px rgba(0,0,0,0.16);
	border-radius: 3px;
    margin-bottom:30px;
}

.box h3 {
	color: var(--main);
	margin-top: 0px !important;
	margin-bottom: 16px !important;
}

.box p:last-child {
	margin-bottom: 0px;
}

input.wpcf7-form-control, input[tpye="email"] {
	border: none;
	border-radius: 3px;
	padding: 10px;
	width: 100%;
	max-width: calc(100% - 20px);
	font-size: 13px;
	background-color: white;
	margin-top: 3px;
	font-family: 'Nunito', sans-serif;
}

textarea {
	border: none;
	border-radius: 3px;
	padding: 10px;
	width: 100%;
	max-width: calc(100% - 20px);
	font-size: 13px;
	background-color: white;
	margin-top: 3px;
	font-family: 'Nunito', sans-serif;
}

input:focus, textarea:focus {
	outline: none;
}

input[type="submit"] {
	-webkit-appearance: none;
	text-align: left;
	background-color: var(--main);
	border: none;
	border-radius: 3px;
	width: 100%;
	max-width: 100%;
	cursor: pointer;
	padding:10px 15px 10px 15px;
	text-transform: uppercase;
	color:var(--orange);
	font-weight:bold;
	font-size:18px;
	text-decoration: none;
	display: inline-block;
	font-family: 'Nunito', sans-serif;
}

input[type="submit"]:disabled {
	-webkit-appearance: none;
	text-align: left;
	background-color: var(--lightgrey);
	border: none;
	border-radius: 3px;
	width: 100%;
	max-width: 100%;
	padding: 10px 15px 10px 15px;
	color: white;
	cursor: not-allowed;
}

.wpcf7-list-item {
margin-left: 0px !important;
}

.wpcf7-list-item-label {
color: var(--grey);
}

input[type=checkbox] {
width: auto;
padding: 10px;
}

.wpcf7-list-item-label {
	display: inline;
	font-size: 13px;
}

span.wpcf7-list-item {
	width: 500px;
	max-width: calc(100% - 23px);
}

.wpcf7-select {
	padding: 10px;
	margin-top: 3px;
	background-color: #e7e7e7;
	border: none;
	border-radius: 3px;
	font-size: 13px;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.wpcf7-select:focus {
	outline: 0;
}

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
	border-color: var(--orange);
	margin: 0px;
	font-weight: bold;
}

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: #3ba931;
	margin: 0px;
	font-weight: bold;
}

div.wpcf7-mail-sent-ng {
	border-color: #b60a0a;
	margin: 0px;
	font-weight: bold;
}

div.wpcf7-spam-blocked {
	border-color: var(--orange);
	margin: 0px;
	font-weight: bold;
}

.wpcf7-not-valid-tip {
	color: #b60a0a !important;
}

.channel-overview-desc {
    margin-bottom:30px;
}

.cnt-card-overlay-desc {
    position:absolute;
    bottom:10px;
    left:20px;
    color:white;
    font-size:12px;
    margin-right:50px;
}

.content-main-cnt {
    margin-bottom:30px;
}

.content-main-channel {
    margin-bottom:20px;
}



.content-main-coloroverlay {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 3px;
}

.entry-content p:first-child {
    margin-top:0;
}

.entry-content p {
    margin-left:0;
    margin-right:0;
}

.heading-news {
    padding-left:0;
    text-transform: none!important;
}

.heading-fix-news-team:first-of-type {
    margin-top:20px!important;
}
.cnt-card-home {
    width:100%;
    border-radius: 0;
    padding-bottom: 56.25%;
    padding-bottom: calc(1 / (21 / 9) * 100%);
    float: none !important;
    display: block !important;
    margin-bottom:25px;
    position:relative;
    overflow: hidden;
    box-shadow: var(--card);
}

.sponsors {
    margin-top: -23px;
}

.sponsors img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: var(--card);
}
.cotube_pagination_button {
    display:inline-block;
    margin-right:5px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.cotube_pagination_button:not(.clickable) {
    padding:7px 10px;
    background-color:var(--main);
    color:white;
}
.cotube_pagination_button.current {
    background-color:var(--main-akzent);
 }
.cotube_pagination_button a {
    padding:7px 10px;
    display:inline-block;
    background-color:var(--main);
    color:white;
    font-weight: normal;
    border-radius: 3px;
    transition: background-color .3s;
}
.cotube_pagination_button.clickable a:hover {
    background-color:var(--main-akzent);
}

.pagination-wrapper-cotube {
    clear:both;
    margin-bottom:10px;
}
@media (max-width: 640px) {
    .pagination-wrapper-cotube {
        margin-left: 20px;
        margin-right: 20px;
    }
}

.navigation.pagination h2 {
    display:none;
}

.page-numbers {
    margin:0;
    padding:0;
}
.page-numbers li {
    list-style-type: none;
    display:inline-block;
    margin-bottom: 10px;
}
.page-numbers li .page-numbers {
    padding:7px 10px;
    border-radius:3px;
    margin-right:5px;
    background-color:var(--main);
    color:white;
    font-weight: normal;
    transition: background-color .3s;
}
.page-numbers li .page-numbers.current {
    background-color: var(--main-akzent);
}

.page-numbers li a.page-numbers:hover {
    background-color: var(--main-akzent);
}