/*
Theme Name:     wp-aufruf-zum-schutz-des-mittelstands
Description:    Childtheme based on Create.
Author:         SP Schweiz
Template:       themetrust-create

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

.aufruf-slider-title{
	font-size: 250%;
	color: white;
	font-family: 'Istok Web';
	font-weight: 800!important;
	letter-spacing: 3px;
	border-bottom: 7px solid #ee2e2c;
	margin:20px 0;
	display:inline-block;
	line-height:0.9em;
}

.aufruf-slider-button{
	color: white;
	font-family: 'Istok Web';
	font-weight: 600!important;
}

.aufruf-slider-button:hover{
        color: black;
}

.rev-btn{
	border-color:white!important;
	border-width:1px!important;
	border-style:solid!important;
}

.aufruf-slider-subtitle b{
	clear: both;
        font-size: 120%;
        color: white;
        font-family: 'Istok Web';
        font-weight: 800;
	letter-spacing: 1px!important;
}

.aufruf-slider-claim{
	color: white;
	font-size: 120%;
	font-family: 'Istok Web';
	font-weight: 800!important;
	letter-spacing: 1px!important;
	border-bottom: 3px solid #ee2e2c;
	line-height: 24px!important;
}

.aufruf-slider-small{
        color: #c52e2e;
        font-size: 80%;
        font-family: 'Istok Web';
        font-weight: 800!important;
}

p{
	font-size:100%;
	padding-bottom:10px;
}

#site-header{
	background-color: #000000;
}

@media (max-width:480px) {
	#logo .site-title {
		line-height:100%!important;
		font-size:160%!important;
	}
}

.site-title {
    font-family: 'Istok Web';
}

.menu-toggle{
	color: white!important;
}

#logo a {
	color: white;
        border-bottom: 3.5px solid #ee2e2c;
	padding-bottom:6px!important;
}

.entry-title span, .textwidget span{
	border-bottom: 3.5px solid #ee2e2c;
	line-height:0px;
        padding-bottom:0px!important;	
}

span.aufruf-title{
	border-bottom: 3.5px solid #ee2e2c;
	color:#231f20;
	font-family: 'Istok Web';
}

h2.aufruf-title{
        margin-bottom:0px;
}

#footer{
	background-color: white;
}

.textwidget span{
	font-size:80%;
	color:black;
}

li.menu-item a span, .main-nav ul li.menu-item{
	color: white!important;
}

li.menu-item a span:hover, .main-nav ul li.menu-item:hover{
	color:#ee2e2c!important;
}

.aufruf-share a.fb {
background: #3b5998;
}
.aufruf-share a.twitter {
background: #55acee;
}

.aufruf-share a.infos {
background: #000000;
}

.aufruf-share{
max-width: 800px;
}


/**---------------- WPF7 ----------------**/

div.wpcf7{
	background-color: white;
	border:0px solid white;
}

span.wpcf7-list-item {
	display: block;
}

div.todo-item{
	background-color: lightgrey;
	padding: 20px;
	display: inline-block
}

.todo-item div.wpcf7{
	background-color: lightgrey;
}

div.todo-item input.wpcf7-text{
	background-color: white;
}

.wpcf7 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    dimgray;
}
.wpcf7 :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    dimgray;
   opacity:  1;
}
.wpcf7 ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    dimgray;
   opacity:  1;
}
.wpcf7 :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    dimgray;
}

div.wpcf7 .wpcf7-form-control {
	max-width: 100%;
}

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
        width:100%;
}

.form-row{
	width: 100%;
}

.column-half, .column-third, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

input{
	border: 1px solid;
	-webkit-transition: 0.5s;
}

input:focus{
border: #333 1px solid;
background: #fff;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

@media only screen and (min-width: 48em) { 
        .column-third{
                max-width: 33%;
        }
}

/*-----------------------------
Custom CSS für die Flip-Funktion des Kopf Memorys
-----------------------------*/

.flipper, .flipper p{
	line-height: 110%;
}

.flip-container {
	perspective: 1000px;
	font-size: 90%;
}

.flip-container .bezeichnung, .flip-container .ort{
	font-size: 80%;
	
}

.flip-container .name{
	font-weight:600;
	font-size:90%
}

#usr-memory br{
	display: none; 
}
	
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 145px;
	height: 145px;
	margin-left: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
}


@media only screen and (max-width: 370px) { 
        .flip-container, .front, .back {
        	width: 120px;
	        height: 120px;
		margin-right: 6px;
	        margin-bottom: 6px;
        }
}


.flip-container.big, .front.big, .back.big {
       width: 300px;
       height: 145px; 
       max-height: 145px;
       max-width: 100%;
}

@media only screen and (max-width: 370px) { 
	.flip-container.big, .front.big, .back.big {
		width: 246px;
      		height: 120px; 
       		max-height: 120px;
	       max-width: 100%;
	}

}



/* flip speed goes here */
.flipper  {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	text-align: center; 
	display: table;
	background: #f8f8f8;
}

.text-backside {
	display: table-cell; 
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lema-amount-box-amount {
	color: black!important;
}

#lema-container.lema-container .lema-amount-box.lema-active {
	border: #ee2e2c 3px solid!important;
}

.lema-step-number-text {
	background: #ee2e2c!important;
}

#lema-container.lema-container .lema-step-header-text {
	color: black!important;
}