/*
Theme Name: phyphox
Template: twentysixteen
Author: Sebastian Kuhlen
Version: 1.0
*/

.entry-content a, .entry-content a:hover, .entry-content a:active, .entry-content a:focus,
.site-info a, .site-info a:hover, .site-info a:active, .site-info a:focus {
    box-shadow: 0 1px 0 0 currentColor;
}

#downloads a, a.no-underline,
#downloads a:active, a.no-underline:active,
#downloads a:hover, a.no-underline:hover,
#downloads a:focus, a.no-underline:focus,
#downloads a:visited, a.no-underline:visited {
    box-shadow: none;
}

.site {
    margin: 0;
    overflow-x: hidden;
}

body:not(.custom-background-image):before, body:not(.custom-background-image):after {
    display: none;
}

.site-inner {
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.5);
}

.site-header {
    position: fixed;
    top: 0;
    left: auto;
    right: auto;
    width: 100%;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.5);
    z-index: 1;
    background: #404040;
    padding: 1em 7.6923%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    max-width: 1320px;
}

footer {
    padding: 1em 7.6923%;
}

#support_footer  {
    display: block;
    text-align: left;
}

#support_footer img {
    display: inline-block;
    height: 6em;
    padding: 1em;
    background: white;
}

#rwth_footer  {
    display: block;
    text-align: right;
}

#rwth_footer  img{
    display: inline-block;
    height: 8em;
}

#site-header-menu {
    margin: 0;
}


body:not(.custom-background-image).admin-bar .site-header {
    top: 46px;
}

#content {
    padding-top: 30vh;
    background: #404040;
}

@media screen and (min-width: 48.9375em) {
    body:not(.custom-background-image).admin-bar .site-header {
		top: 32px;
	}
}

@media screen and (min-width: 56.875em) {
    .site-header, footer {
        padding-right: 4.5455%;
		padding-left: 4.5455%;
    }

    .sub-menu li.menu-item {
        background-color: #606060;
    }
}

@media screen and (min-width: 61.5625em) {
	.site-header, footer {
		padding: 2em 4.5455%;
	}
}

.compact-bar-scroll .site-header {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    box-shadow: 0 3px 3px 0px rgba(0,0,0,0.5);
}

@media screen and (max-width: 600px) {
    body:not(.custom-background-image).admin-bar.compact-bar-scroll .site-header {
        top: 0;
    }
}

.site-footer {
    display: block;
    color: #c0c0c0;
    background: #202020;
    padding-top: 2em;
    padding-bottom: 2em;
}

.pagination > .nav-links > .prev, .pagination > .nav-links > .next, .pagination:after, .pagination:before {
    background-color: #404040 !important;
}

#footer-rwth {
    width: 100%;
}

#legal {
    width: 47%;
    margin-right: 4.5455%;
    display: inline-block;
    vertical-align: top;
}

#impressum {
    width: 47%;
    display: inline-block;
    vertical-align: top;
}

#rwth-logo {
    display: block;
    max-width: 60%;
    margin-left: auto;
    margin-top: 1em;
}

@media screen and (max-width: 600px) {
    #legal, #impressum {
        width: 100%;
    }
}

#googlePlay {
    height: 100px;
    display: inline-block;
}

#appleStore {
    height: 100px;
    display: inline-block;
    padding: 17px;
}

body, button, input, select, textarea, .main-navigation, .entry-title, .post-password-form label , .post-navigation, .post-navigation .post-title, .pagination, .image-navigation, .comment-navigation, .site .skip-link, .logged-in .site .skip-link, .widget .widget-title, .widget_recent_entries .post-date, .widget_rss .rss-date, .widget_rss cite, .tagcloud a, .site-title, .entry-footer, .sticky-post, .page-title, .page-links, .comments-title, .comment-reply-title, .comment-metadata, .pingback .edit-link, .comment-reply-link, .comment-form label, .required, .site-footer .site-title, .site-footer .site-title:after, .widecolumn label, .widecolumn .mu_register label {
    font-family: Arial, sans-serif;
}

#submit {
    background-color: #606060;
}

#submit:hover {
    background-color: #ff7e22;
    color: white;
}

@media screen and (min-width: 56.875em) {
    .main-navigation .primary-menu > li.pll-parent-menu-item {
        border-left: 2px solid white;
        margin-left: 1em;
        padding-left: 1em;
    }
}

.home #downloads, .home #social {
    display: block;
    text-align: right;
    margin: 1em -5%;
}

.home #downloads #googlePlay {
    height: 10vh;
}

.home #downloads #appleStore {
    height: 10vh;
    padding: 1.7vh;
}

#home_feature_list, #home_credits {
    list-style: none;
    margin: 0;
}

#home_feature_list a {
    color: inherit;
}

#home_feature_list a:hover > h3 {
    color: #ff7e22;
    box-shadow: 0 1px 0 0 currentColor;
}

#home_feature_list a:hover > p {
    color: #ff7e22;
}


#home_feature_list li {
    display: inline-block;
    width: auto;
    vertical-align: top;
    margin: 10px 0;
}

#home_feature_list li img {
    float: right;
    width: 100px;
    margin: 0 0 1em 1em;
    background: #606060;
    border: 1px solid white;
}

@media screen and (min-width: 900px) {
    #home_feature_list li {
        width: 46%;
        margin: 0 5% 20px 0;
    }

    #home_feature_list li:nth-child(odd) {
        margin: 0 2% 20px 0;
    }

    #home_feature_list li:nth-child(even) {
        margin: 0 0 20px 2%;
    }
}

.home #credits-area, #ambassadors, .home #award-area {
    position: relative;
    background: #f0f0f0;
    margin: 0 -5%;
    color: black;
    padding: 2em 4.5455%;
    overflow: hidden;
}

.home #credits-area a:hover, .home #credits-area a:focus, .home #credits-area a:active, .home #award-area a:hover, .home #award-area a:focus, .home #award-area a:active, #ambassadors a:hover, #ambassadors a:focus, #ambassadors a:active {
    color: black;
} 

.home #support-area {
    padding: 2em 0;
}

.award-title {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-bottom: 0.5em;
}

.award-title emph {
    font-weight: bold;
    font-size: 150%;
}

.award-quote {
    display: block;
    font-style: italic;
    position: relative;
    padding: 0 3em;
}

.award-quote:before {
    display: block;
    content: "“";
    font-size: 400%;
    position: absolute;
    left: 0;
    top: 0;
}

.award-quote:after {
    display: block;
    content: "”";
    font-size: 400%;
    position: absolute;
    right: 0;
    top: 0;
}

.support {
    margin-bottom: 1em;
}

.support > a {
    display: inline-block;
    width: 20%;
    text-decoration: none;
    box-shadow: none;
    background: white;
    text-align: center;
    vertical-align: middle;
}

.support > a img {
    text-decoration: none;
    display: inline-block;
}

.support > span {
    display: inline-block;
    width: 79%;
    padding-left: 2em;
    vertical-align: middle;
}

.contacts li {
    padding-left: 3em;
    display: inline-block;
    width: 350px;
    white-space: nowrap;
    margin: 0 20px 20px 0;
    overflow: visible;
}

.contacts.contactsSingle li {
    display: block;
}

.contacts li {
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
}

.contacts li emph {
    display: block;
    font-weight: bold;
    font-size: 133%;
    line-height: 1;
}

.home #content {
    padding: 0;
    padding-top: 4em;
}

@media screen and (min-width: 61.5625em) {
	.home #content {
        padding-top: 8em;
    }
}

.home article header + div {
    margin-top: 60vh;
}

.home #primary {
    width: auto;
    margin: 0;
    float: none;
}

@media screen and (min-width: 44.375em) {
    .home .entry-content {
        margin-left: 0;
        margin-right: 0;
        padding: 0 4.5455%;
    }
}

.home article header {
    background-image: url("https://phyphox.org/wp-content/uploads/2016/06/banner.jpg");
    background-size: cover;
    background-position: 0 50%;
    background-origin: content-box;
    width: 100%;
    height: 60vh;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    line-height: 60vh;
    position: absolute;
    overflow: hidden;
}

.home article header h1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: 4.5455%;
    padding-right: 30%;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    margin: 0;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #ff7e22;
    background-image: url(https://phyphox.org/wp-content/uploads/2017/05/rwth_weiss_rgb.png);
    background-size: auto 2.1em;
    background-repeat: no-repeat;
    background-position: right bottom;
}

.home article header video {
    width: 100%;
    height: 100%;
}

#movieButton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10%;
    text-align: center;
    opacity: 0.75;
}

#movieButton:hover {
    opacity: 1;
}

#movieButton svg {
    position: absolute;
    left: 0;
    height: 30%;
    bottom: 30%;
    width: 100%;
    transform-origin: 50% 50% 0px;
}

.tribe-common a {
    box-shadow: none;
}

.tribe-common button[disabled]:hover {
    padding: 0;
}

:root {
    --tec-color-accent-primary: #ff7e22;
    --tec-color-text-primary: #ffffff;
    --tec-color-text-primary-light: #cccccc;
    --tec-color-text-secondary:#cccccc;
    --tec-color-text-disabled:#aaaaaa;
    --tec-color-icon-primary:#bbbbbb;
    --tec-color-icon-primary-alt:#999999;
    --tec-color-icon-secondary:#aaaaaa;
    --tec-color-icon-active:#ff7e22;
    --tec-color-icon-disabled:#777777;
    --tec-color-icon-focus:#ffffff;
    --tec-color-icon-error:#da394d;
    --tec-color-event-icon:#dddddd;
    --tec-color-event-icon-hover:#ffffff;
    --tec-color-accent-primary:#ff7e22;
    --tec-color-accent-primary-hover:#ff7e22;
    --tec-color-accent-primary-active:#ff7e22;
    --tec-color-accent-primary-background:transparent;
    --tec-color-accent-secondary:#ff7e22;
    --tec-color-accent-secondary-hover:#ff7e22;
    --tec-color-accent-secondary-active:#ff7e22;
    --tec-color-accent-secondary-background:transparent;
    --tec-color-link-accent-hover:#ff7e22;
    --tec-color-border-default:#cccccc;
    --tec-color-border-secondary:#888888;
    --tec-color-border-tertiary:#666666;
    --tec-color-border-hover:#dddddd;
    --tec-color-border-active:#ffffff;
    --tec-color-background:#505050;
    --tec-color-background-events:transparent;
    --tec-color-background-transparent:rgba(20,20,20,0.5);
    --tec-color-background-secondary:#303030;
    --tec-color-background-messages:#303030;
    --tec-color-background-secondary-hover:#404040;
}

.faq.faq_extended > div, .faq:target > div {
    max-height: 2000px;
}

.faq > div {
    max-height: 0;
    transition: 0.5s;
    overflow: hidden;
    padding-left: 1em;
}

.faq.faq_extended > h4, .faq:target > h4 {
    font-weight: bold;
    color: #ff7e22;
}

.faq > h4 {
    text-transform: none;
    margin-bottom: 0.5em;
    letter-spacing: 0;
    font-weight: normal;
}

.faq {
    cursor: pointer;
    margin: 0;
    transition: 0.5s;
}

.faq.faq_extended, .faq:target {
    margin: 2em 0 2em 0;
}

.faq:hover h4 {
    color: #ff7e22;
}

article.experiment {
    margin-bottom: 2em;
}

article.experiment .titletext {
    display: inline-block;
    vertical-align: top;
}

article.experiment h2 {
    margin: 0;
    display: inline;
}

article.experiment .post-thumbnail {
    display: inline-block;
    background: #ff7e22;
    margin: 0;
}

article.experiment .titleicon {
    display: inline-block;
    vertical-align: top;
    margin-right: 1em;
    margin-bottom: 1em;
    width: 3rem;
    height: 3rem;
}

article.experiment .post-thumbnail img {
    height: 3rem;
    width: auto;
}

article.experiment .experiment-meta {
    font-size: 75%;
}

article.experiment .experiment-meta > ul {
    border-top: 1px #a0a0a0 solid;
    border-bottom: 1px #a0a0a0 solid;
}

article.experiment .experiment-meta > ul > li {
    display: inline-block;
    list-style: none;
    padding: 0 1em;
}

article.experiment .experiment-meta > ul > li:first-child {
    padding-left: 0;
}

article.experiment .experiment-meta > ul > li:last-child {
    padding-right: 0;
}

.experiment-list article.experiment .sharedaddy {
    display: none;
}

.experiment-list article.experiment footer {
    display: none;
}

.experiment-list article.experiment h2 {
    font-size: 150%;
}

.experiment-list article.experiment .titleicon {
    width: 2rem;
    height: 2rem;
}

.experiment-list article.experiment .post-thumbnail img {
    height: 2rem;
    width: 2rem;
}

.experiment-list article.experiment p {
    margin: 0;
}

.experiment-list .page-header h1 {
    display: none;
}

.featuredExperiment {
    display: inline-block;
    width: 45%;
    min-width: 300px;
    margin: 2%;
}

.featuredExperiment p {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.featuredExperiment p iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.experimentLink {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 250px;
    margin-bottom: 1em;
}

.experimentLink img {
    border: 1px solid white;
    margin: 0 auto;
}

.anchor:before {
    display: block;
    content: "";
    position: relative;
    width: 0;
    height: 8em;
    margin-top: -8em;
}

*:focus {
    outline: none;
}

.anchor:target {
    color: #ff7e22;
}

:target:before {
  content:"";
  display:block;
  height: 200px;
  margin: -200px 0 0;
}

.home #social {
    padding-right: 1.7vh;
}

#social img {
    display: inline-block;
    height: 2em;
}

#social a {
    text-decoration: none;
    margin: 0.3em;
    box-shadow: none;
}

#social a:hover img {
    box-shadow: 0 0 2px 2px #ff7e22;
}

#contribute {
    background: #ff7e22;
    padding: 0.5em 2em;
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    box-shadow: -1px 1px 0 0 rgba(0,0,0,0.5), inset 0 1px 0 0 rgba(0,0,0,0.5);
    border-radius: 0 0 0 2em;
    color: white;
    font-size: 80%;
    transition: 0.5s;
    font-weight: bold;
}

#contribute:hover {
    background: #ff8e32;
}

.compact-bar-scroll #contribute {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5), inset 0 2px 2px 0 rgba(0,0,0,0.5);
    padding: 0.1em 2em;
    background: #404040;
    font-size: 80%;
    color: white;
    font-weight: normal;
}

.compact-bar-scroll #contribute:hover {
    background: #606060;
}