/*
	Description: This is the Stylesheet for the subscription-form
	Version: 2.0.0
	Author: Martin Neitz
	Author URI: https://www.kongress-suite.com/kontakt/
	License: Martin Neitz
*/


/*----------------------------------------------------------------------------*/
/*  VIVO Online Marketing                                                     */
/*  Subscription Form                                                         */
/*----------------------------------------------------------------------------*/


.vivo_sf-form-element input,
.vivo_sf-fb-text,
.vivo_sf-fb-logo {
  width: 100%;
  border-radius: 5px;
  border: 1px solid #D4D0D0;
  padding-left: 15px;
  color:#6e6e6e;
}

.vivo_sf-form-element-checkbox input[type='checkbox'] { display: none; }

.vivo_sf-checkbox-element {
  clear: both;
  display: block;
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.vivo_sf-checkmark {
  position: absolute;
  top: .2em;
  left: 0;
  height: 1em;
  width: 1em;
  background-color: #eee;
  border-radius: 2px;
  border: 1px solid;
}

/* On mouse-over, add a grey background color */
.vivo_sf-checkbox-element:hover input ~ .vivo_sf-checkmark { background-color: #eee; }

/* When the checkbox is checked, add a blue background */
.vivo_sf-checkbox-element input:checked ~ .vivo_sf-checkmark { background-color: #eee; }

/* Create the checkmark/indicator (hidden when not checked) */
.vivo_sf-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.vivo_sf-checkbox-element input:checked ~ .vivo_sf-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.vivo_sf-checkbox-element .vivo_sf-checkmark:after {
    left: .35em;
    top: .15em;
    width: .3em;
    height: .6em;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



.vivo_sf-form-element-input { height: 46px; line-height: 46px; box-sizing: border-box;}

.vivo_sf-fb-logo span   {    font-size: 35px; margin-right: 10px;  margin-top: 6px;}

.vivo_sf-form-element .vivo_sf-submit-element,
.vivo_sf-fb-text,
.vivo_sf-fb-logo {
  background-color: #abba05;
  font-weight: bold;
  color: #ffffff;
  border: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;  
}

.vivo_sf-submit-element,
.vivo_sf-submit-element-facebook {
  cursor: pointer;
}

/* Facebook button general style */
.vivo_sf-submit-element-facebook { position: relative; display: inline-block; width: 100%;}
.vivo_sf-fb-text { text-align: center; }

.vivo_sf-fb-logo {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 10%;
  min-width: 50px;
  text-align: center;
  padding-left: 0px;
  background-color: #3b5998;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.vivo_sf-form-element input, .vivo_sf-fb-text, .vivo_sf-fb-logo, .vivo_sf-fb-logo span {
    height: 46px;
}
.vivo_sf-fb-text { line-height: 46px; }

/*  TODO: if the browser jumps to responsive  padding: 0 5% 0 5%; */
.form-sf-v1-wrapper,
.form-sf-v2-wrapper,
.form-sf-v3-wrapper { width: 100%; overflow: hidden;}

.form-sf-v1-wrapper .vivo_sf-form-element { width: 100%; margin-bottom: 10px;}


/*--- VERSION 2 ---*/
.form-sf-v2-wrapper.vivo_num-total_5 div.vivo_sf-form-element  {width: 19.2%;   margin-right: 1%; float:left;}
.form-sf-v2-wrapper.vivo_num-total_4 div.vivo_sf-form-element  {width: 24.25%;  margin-right: 1%; float:left;}
.form-sf-v2-wrapper.vivo_num-total_3 div.vivo_sf-form-element  {width: 32.66%;  margin-right: 1%; float:left;}
.form-sf-v2-wrapper.vivo_num-total_2 div.vivo_sf-form-element  {width: 49.5%;   margin-right: 1%; float:left;}



.form-sf-v2-wrapper.vivo_num-total_5 div.vivo_sf-form-element:last-child,
.form-sf-v2-wrapper.vivo_num-total_4 div.vivo_sf-form-element:last-child,
.form-sf-v2-wrapper.vivo_num-total_3 div.vivo_sf-form-element:last-child,
.form-sf-v2-wrapper.vivo_num-total_2 div.vivo_sf-form-element:last-child   {margin-right: 0%;}

/*--- VERSION 3 ---*/
.form-sf-v3-wrapper.vivo_num-inp_3 div.vivo_sf-form-element-input  {width: 32.66%;  margin-right: 1%; float:left;}
.form-sf-v3-wrapper.vivo_num-inp_2 div.vivo_sf-form-element-input  {width: 49.5%;   margin-right: 1%; float:left;}
.form-sf-v3-wrapper.vivo_num-inp_1 div.vivo_sf-form-element-input  {width: 100%;}

.form-sf-v3-wrapper.vivo_num-inp_3 div.vivo_sf-form-element-input:nth-of-type(3),
.form-sf-v3-wrapper.vivo_num-inp_2 div.vivo_sf-form-element-input:nth-of-type(2),
.form-sf-v3-wrapper.vivo_num-inp_1 div.vivo_sf-form-element-input:nth-of-type(1)  {margin-right: 0%;}

.form-sf-v3-wrapper .vivo_sf-form-element { margin-bottom: 10px;}

@media screen and (max-width: 950px) {
  .form-sf-v2-wrapper.vivo_num-total_5 div.vivo_sf-form-element { width: 100%; margin-bottom: 10px; }
}

@media screen and (max-width: 850px) {
  .form-sf-v2-wrapper.vivo_num-total_4 div.vivo_sf-form-element { width: 100%; margin-bottom: 10px; }
}

@media screen and (max-width: 700px) {
  .form-sf-v2-wrapper.vivo_num-total_3 div.vivo_sf-form-element { width: 100%; margin-bottom: 10px; }
  .form-sf-v3-wrapper.vivo_num-inp_3  div.vivo_sf-form-element  { width: 100%; margin-bottom: 10px; }

}

@media screen and (max-width: 500px) {
  .form-sf-v2-wrapper.vivo_num-total_2 div.vivo_sf-form-element { width: 100%; margin-bottom: 10px; }
  .form-sf-v3-wrapper.vivo_num-inp_2  div.vivo_sf-form-element  { width: 100%; margin-bottom: 10px; }
}