/*
Theme Name: Vodafix s.r.o.
Author URI: http://mevia.cz
Author: Jakub Novák
*/



/* layout
------------------------------------------- */
html, body { font-family: 'Rubik', sans-serif !important;  }



/* HEADER */
header {heigh t: 100px; width: 100%; padding: 30px 0 0 0;   }
header h1 {text-align: center;    font-weight: 600;  font-family: "Rubik";    text-transform: uppercase;    color: #3d1d31; font-size: 100px; line-height: 100%;  text-shadow: 6px 6px #ded2d2; }


.logo img {margin: 0 auto; width: 100px; display: block; padding: 0 0 30px 0;   }

.index-top  {position: relative;    padding-bottom: 55px;    height: auto; box-sizing: border-box; border-bottom: 1px solid whitesmoke;  overflow: hidden; }

.popis {text-align: center; }
.popis h2 {color:  #f8cd41; font-weight: 600; font-size: 38px;  line-height: 130%; margin-top: 30px;  }
.popis h3 {color: #ec5151; font-weight: 600; font-size: 20px; line-height: 140%; padding: 30px  0;  }
.popis p {color: #5c1e05; font-family: 'Nunito', sans-serif; font-size: 18px;}

.tlac {display: block; margin-top: 40px; }
.tlac .tlacitko {margin: 0 auto;  display: block;  }
.tlacitko {background: #ec5151; font-family: "Rubik"; font-size: 20px; border:#ec5151; padding: 20px 30px;  margin: 0 auto;  }
.tlacitko:hover {background: #a24545; }
.tlacitko:active {background: #a24545 !important;  }
.tlacitko:focus {border: 0px !important; box-shadow: none !important;  }

.formular {background-color: white; float: left; width: 100%; padding: 30px;  margin: 30px 0 50px 0 ; border-radius: 30px;  }
.formular h2 {font-size: 20px; font-weight: 600; padding-top: 20px; color: #ec5151; }
.formular h3 {font-size: 18px; font-weight: 600; padding-top: 20px; color: #967761; }

.formular  ul {margin-left: -20px; color: gray; font-size: 14px;  font-style: italic;}
.popisek {color: gray; font-size: 14px;  font-style: italic; }


#footer_dekorace_vpravo {    content: " ";    background-image: url(//zakazkleci.cz/wp-content/themes/klece/img/footer_dekorace_vpravo.png);    background-size: cover;    display: table;    position: absolute;    height: 380px;    width: 261px;    bottom: 0;    right: 0;    z-index: -10;    filter: grayscale(100%);    filter: grayscale(100%);	}
	
#footer_dekorace_vlevo {    content: " ";    background-image: url(//zakazkleci.cz/wp-content/themes/klece/img/footer_dekorace_vlevo.png);    background-size: cover;    display: table;    position: absolute;
    height: 295px;    width: 222px;    bottom: 0;    left: 0;    z-index: -10;    filter: grayscale(100%);    -webkit-filter: grayscale(100%);}	


#footer_dekorace_vpravo2 {    content: " ";    background-image: url(//zakazkleci.cz/wp-content/themes/klece/img/footer_dekorace_vpravo.png);    background-size: cover;    display: table;    position: absolute;    height: 380px;    width: 261px;    bottom: 0;    right: 0;    z-index: 0;    filter: grayscale(100%);    filter: grayscale(100%);	}
	
#footer_dekorace_vlevo2 {    content: " ";    background-image: url(//zakazkleci.cz/wp-content/themes/klece/img/footer_dekorace_vlevo.png);    background-size: cover;    display: table;    position: absolute;
    height: 295px;    width: 222px;    bottom: 0;    left: 0;    z-index: 1;    filter: grayscale(100%);    -webkit-filter: grayscale(100%);}	

	
	
input[name=firstname]:invalid {  border-bottom: 2px solid #ec5151 !important;}
input[name=lastname]:invalid {  border-bottom: 2px solid #ec5151 !important;}
input[name=phone]:invalid {  border-bottom: 2px solid #ec5151 !important;}
input[name=email]:invalid {  border-bottom: 2px solid #ec5151 !important;}
input[name=obec]:invalid {  border-bottom: 2px solid #ec5151 !important;}
input[name=maps]:invalid {  border-bottom: 2px solid #ec5151 !important;}


input[name=dovolena]:invalid {  border-bottom: 2px solid #ec5151 !important;}



input[name=firstname]:valid {  border-bottom: 2px solid #62ca62 !important;}	
input[name=lastname]:valid {  border-bottom: 2px solid #62ca62 !important;}	
input[name=phone]:valid {  border-bottom: 2px solid #62ca62 !important;}	
input[name=email]:valid {  border-bottom: 2px solid #62ca62 !important;}	
input[name=obec]:valid {  border-bottom: 2px solid #62ca62 !important;}	
input[name=maps]:valid {  border-bottom: 2px solid #62ca62 !important;}	


select[name=kraj]:invalid {  border-bottom: 2px solid #ec5151 !important;}
select[name=kraj]:valid {  border-bottom: 2px solid #62ca62 !important;}	

textarea[name=misto_poznamka]:invalid {  border-bottom: 2px solid #ec5151 !important;}
textarea[name=misto_poznamka]:valid {  border-bottom: 2px solid #62ca62 !important;}		
	
	
	
	
	
/* The container */
.barometr .form-check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.barometr .form-check-label {
cursor: pointer; 
}


/* Hide the browser's default checkbox */
.barometr .form-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.barometr .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
 border: 2px solid #f3a3a3;
 background: whitesmoke; 
}

/* On mouse-over, add a grey background color */
.barometr .form-check:hover input ~ .checkmark {

  border: 2px solid #62ca62;
 background: whitesmoke; 
}

/* When the checkbox is checked, add a blue background */
.barometr .form-check input:checked ~ .checkmark {
  background-color: #62ca62;
  border: 2px solid #62ca62;
}

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

/* Show the checkmark when checked */
.barometr .form-check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.barometr .form-check .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}	
	
	
	
	
	
	
	
	
.form-control {    border: 1px solid #ffffff !important; 	background-color: #eaeaea;}
label {	    margin-bottom: 0px !important; 	}
.form-check-input {ma rgin-left: 0px !important; }	
.card {border: 0px !important; background: transparent;  }
	

#sipka_1 {content: " ";    background-image: url(/wp-content/themes/slepice-reg/pic/sipka_1.png);    background-size: cover;    display: table;    position: absolute;    width: 36px;    height: 80px;    bottom: 70px;    left: calc(50% - 200px);    z-index: 1;    transform: translate(-50%, 0); -ms-transform: rotate(-30deg); /* IE 9 */  -webkit-transform: rotate(-30deg); /* Safari 3-8 */  transform: rotate(-30deg);}

#sipka_2 {content: " ";    background-image: url(/wp-content/themes/slepice-reg/pic/sipka_1.png);    background-size: cover;    display: table;    position: absolute;    width: 36px;    height: 80px;    bottom: 250px;    left: calc(50%);    z-index: 1;    transform: translate(-50%, 0); -ms-transform: rotate(80deg); /* IE 9 */  -webkit-transform: rotate(80deg); /* Safari 3-8 */  transform: rotate(80deg);}

#slepice_1 {content: " ";    background-image: url(/wp-content/themes/slepice-reg/pic/slepice_1.png);    background-size: cover;    dis play: table;    position: absolute;    width: 500px;    height: 500px;    top: 0;    right: calc(50% - 900px);    z-index: 1;   }

#slepice_2 {content: " ";    background-image: url(/wp-content/themes/slepice-reg/pic/slepice_2.png);    background-size: cover;    display: table;    position: absolute;    width: 500px;    height: 500px;    top: 200px;    left: calc(50% - 750px);    z-index: 1;            -ms-filter: "FlipH"; transform: scale(-0.5,0.5); }

#slepice_3 {content: " ";    background-image: url(/wp-content/themes/slepice-reg/pic/slepice_3.png);    background-size: cover;    display: table;    position: absolute;    width: 500px;    height: 500px;    top: -100px;    left: calc(50% - 900px);    z-index: 1;            -ms-filter: "FlipH"; transform: scale(0.8,0.8); }


.zmiz {filter: alpha(opacity=0); /* 50 ze 100 = 50% průhlednost */  opacity: 0;}


.slepice-optin {display: block; margin: 40px 0 40px 0; }
.petition-fox {    transform: scale(0.5);
    width: 200px;    height: 220px;    background: url(/wp-content/themes/slepice-reg/pic/slepice_optin.png) no-repeat center transparent;    position: absolute;    right: -180px;
    top: -65px;
    display: block;    z-index: 1;    -webkit-transition: opacity 0.6s ease;    -moz-transition: opacity 0.6s ease;    -o-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
}
.petition-fox-please {    transform: scale(0.5);
 display: none; width: 200px;    height: 200px;    background: url(/wp-content/themes/slepice-reg/pic/slepice_prosim.png) no-repeat center transparent;    position: absolute;    left: -150px !important;   top: -65px;
  z-index: 1;    -webkit-transition: opacity 0.2s ease;    -moz-transition: opacity 0.6s ease;    -o-transition: opacity 0.2s ease;    transition: opacity 0.2s ease;
}


.jinak  {text-alig n: center; display: block; width: 100%;  margin: 0px; padding: 50px 0; background:  #f8cd41;  }


.souhlas_text {display: block; position: relative; }
.gdpr {display: block;    margin: 40px 0 0px 0;   font-size: 12px; }
.link-podminky { text-decoration: underline !important; cursor: pointer;}
.link-podminky:hover {color: #ec5151 !important; }


.form-podminky {margin: 0 auto;    width: 50%;}
.form-tlacitka {    text-align: center;    width: 60%;    margin: 0 auto;}
.btn-form-jinak {c    color: #927280;
    padding: 0px 0 0 0;
    background: white;
    border: none;
    text-d ecoration: underline;
	cursor: pointer; 
    margin-top: 30px;}
.btn-form-jinak:hover {text-decoration: underline; }

.form-gdpr {text-align: right;}




/* OKNO 2 */
#okno-2 {display: block; position: absolute;    left: 0;    top: 0;    background: #000000b5;    width: 100%;    height: 100%; z-index: 99;     overflow: hidden; }
#okno-2 .obsah {position: absolute;    left: calc(50% - 350px);    top: calc(50% - 300px);    background: #f8cd41;    width: 800px;    height: 420px;    padding: 30px; border-radius: 5px; z-index: 99;      ove rflow: hidden; }	
#okno-2 .obsah h2 {    color: #ffffff;    font-weight: 600;    font-size: 30px;    line-height: 130%;    margin-top: 10px;    padding: 0 30px;    text-align: center;    text-shadow: 1px 2px #e07151; }
#okno-2 .obsah h3 {    color: #ec5151;    font-weight: 600;    font-size: 20px;    line-height: 140%;    padding: 0px 0;    text-align: center;   }
#okno-2 .obsah p {color: #5c1e05; font-family: 'Nunito', sans-serif; font-size: 16px;  text-align: center; }
#okno-2 .obsah a {    color: #3F51B5; font-family: 'Nunito', sans-serif; font-size: 16px;  text-align: center; text-decoration: underline; }
#okno-2 .obsah .zavri-okno { position: absolute;    top: -20px;    right: -20px;    background: #ec5151;    color: white;    padding: 10px;    border-radius: 10px; cursor: pointer;     text-decoration: none; }
#okno-2 .obsah .zavri-okno:hover {background: #5c1e05;  -webkit-transition: .5s;   transition: .5s; }
 .dolu-pridat { cursor: pointer; }
.obsah .dolu-pridat:hover {color: black; }

/* OKNO */
#okno {display: none; position: absolute;    left: 0;    top: 0;    background: #000000b5;    width: 100%;    height: 100%;  }
#okno .obsah {position: absolute;    left: calc(50% - 350px);    top: calc(50% - 150px);    background: white;    width: 800px;    height: 300px;    padding: 30px; border-radius: 5px;  }		
#okno .obsah .text {float: left; width: 540px;}
#okno .obsah .text h2 {    color: #927280;    padding: 10px 0 10px 0;    font-weight: 600;    font-size: 28px; }
#okno .obsah p {padding: 0 0 30px 0; }

#okno .slepicka {float: left; width: 200px;}
#okno .slepicka img {width: 100%;}
	
#okno .btn-okno-souhlas {        background: #ec5151;   font-size: 16px;    border: #ec5151;    padding: 10px 10px;    cursor: pointer;    border-radius: 5px;    color: white;   }
#okno .btn-okno-souhlas:hover {background: #a24545;}
#okno .btn-okno-nesouhlas {    color: #a245459;    margin: 0 0 0 30px;    cursor: pointer;    text-decoration: underline;  }
#okno .btn-okno-nesouhlas:hover {    color: #a24545;    }



.card-body p {}
.card-body h2 {color:  white; font-weight: 600; font-size: 38px;  line-height: 130%; margin-top: 30px;  }
.card-body h3 {color: #ec5151; font-weight: 600; font-size: 20px; line-height: 140%; padding: 30px  0;  }
.card-body p {color: #5c1e05; font-family: 'Nunito', sans-serif; font-size: 18px;}

.odkaz {color: #3F51B5 !important;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    text-align: center;
    text-decoration: underline !important; }

a:not([href]):not([tabindex]) {
    color: #3F51B5;
    text-decoration: underline;
}	
	
.card a {color: #3F51B5;}	

.fa, .fas {    margin-left: 15px;}



#headingOne {text-align: center; margin-top: 30px; }






/* dekujeme */
.dekujeme-top {text-align: center;  overflow: hidden;}
.dekujeme-top h1 {    font-weight: 600;    color: #2ce48b;    text-transform: uppercase;    font-size: 60px;    margin-top: 50px;  }
.dekujeme-top .podnadpis {font-size: 20px; }
.dekujeme-top h2 {color:  #ec5151; font-weight: 600; font-size: 38px;  line-height: 130%; margin-top: 30px;  }



/* informace */
.informace h2 {color:  white; font-weight: 600; font-size: 60px;  line-height: 130%; margin: 30px 0;  text-align: center; text-shadow: 3px 3px #e6795a; text-transform: uppercase;  }
.informace h3 {color: #ec5151; font-weight: 600; font-size: 30px; line-height: 140%; padding: 30px  0 0 0;  text-align: center;  }
.informace p {color: #5c1e05; font-family: 'Nunito', sans-serif; font-size: 18px;     text-align: center;     line-height: 160%; font-weight: 600;}

.rozcesti-reg {display: block; text-align: center;   margin: 40px 0 50px 0;}


.rozcesti {display: block; text-align: center; }
.btn-jinak {    background: #ec5151;    color: white;    padding: 10px 20px;    margin: 10px;}
.btn-jinak:hover {background: #a24545; color: white; }
.btn-jinak:active {background: #a24545 !important;  }
.btn-jinak:focus {border: 0px !important; box-shadow: none !important;  }

.btn-pridat {background: #886575;}
.btn-darovat {background: #b1999e; }

.btn-relative {position: relative !important; margin: 0 0 40px; left: 0 !important; }

.nastred {}


/* zakaz */
.zakaz h2 {color:  white; font-weight: 600; font-size: 60px;  line-height: 130%; margin: 30px 0;  text-shadow: 3px 3px #e6795a; text-transform: uppercase;  }
.zakaz p {color: #5c1e05; font-family: 'Nunito', sans-serif; font-size: 24px;     text-align: center;     line-height: 140%; font-weight: 600;}



/* donate */
.darovani { padding: 50px 0; background:  #f8cd41;}
.darovani h2 {    text-align: center;  color:  white; font-weight: 600; font-size: 60px;  line-height: 130%; margin: 30px 0;  text-shadow: 2px 2px #e6795a; text-transform: uppercase;  }

.shake {
  animation: shake-animation 4.72s ease;
  transform-origin: 50% 50%;
  animation-delay: 2s;
}

@keyframes shake-animation {
  
  0% { transform:translate(0,0) }
  1.78571% { transform:translate(30px,0) }
  3.57143% { transform:translate(0,0) }
  5.35714% { transform:translate(20px,0) }
  7.14286% { transform:translate(0,0) }
  8.92857% { transform:translate(10px,0) }
  10.71429% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}


.darovani-blok { padding-bottom: 80px;    border-radius: 10px;    text-align: center;    margin-bottom: 50px;	background: #fcf9f8; } 
.darovaci-blok h3 { font-weight: 500;  font-size: 20px;    color: #5c1e05  !important; padding: 30px 0  !important; }
.darovani-blok p {      font-weight: 500;    font-size: 24px;    color: #5c1e05; padding: 40px 0 20px 0;  }
.donate-input {width: 50%;    margin: 0 auto;    background: white;    border: 1px solid #ec5151;    border-radius: 5px; }
.donate-input .form-control {background: white;     margin: 10px 0 10px 20px;    font-size: 18px;}
.donate-input .input-group-text {background-color: #ec5151;    border: 1px solid #ec5151;	}	
.donate-input input:valid {    border-bottom: 0px solid #62ca62 !important;}
.donate-input .mena .input-group-text {  background-color: white;    border: 0px solid #ffffff;    margin: 1px;    color: #ec5151;    font-size: 18px;    border-radius: 3px;	}	
.btn-donate {     font-size: 20px;    text-transform: uppercase;    font-weight: 900;    font-family: "Rubik";    color: white;    padding: 25px 45px;    background-color: #ec5151;
    display: table;    margin: 0;    border-radius: 5px;    position: absolute;    top: unset;    bottom: 10px;    left: 50%;    transform: translate(-50%, 0%);}
.donate-prepinac {color: #5c1e0 !important; text-decoration: underline  !important; cursor: pointer  !important;}
	

/* pledge */

.pledge .gdpr {font-size: 13px; }
.pledge .kroky {    margin: 0 auto;    width: 60px;    padding: 20px 0;}

.pledge h3 {font-size: 22px;    font-weight: 600;    padding: 0 0 10px 0; color: #5c1e05; }


#regForm {
  margin: 0 auto;
  width: 50%;
  min-width: 300px;
}


#regForm input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  border: 1px solid white;
  border-radius: 5px;
}

/* Mark input boxes that gets an error on validation: */
.pledge  input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
#regForm .tab {
  display: none;
}

#regForm button {
  background-color: #ec5151;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  width: 100%;
  cursor: pointer;
  border-radius: 5px;
}

#regForm button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.pledge .step {
  height: 15px;
  width: 15px;
  margin: 0 auto;
  background-color: white;
  border: none;  
  border-radius: 50%;
  display: inline-block;
}

.pledge .step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.pledge .step.finish {
  background-color: #4CAF50;
}






/* pata */
footer     {border-top: 1px solid #e2e2e2;      background-color: white;    z-index: 122222; padding: 30px 0;  }
footer p {text-align: center;   font-size: 12px;    color: rgb(102, 102, 102); }

.socky {color: silver;text-align: center; }
.socky a {padding: 0 10px; color: gray; }

.vyhledavani {background: whitesmoke; padding: 20px;  }



.mobile-top {display: none; }
img {max-width: 100%; height: auto;}

@media (max-width: 1000px) { 

	
	header h1 {font-size: 70px;  }
	header h2 {font-size: 30px;  }
	
	
	.col {    flex-basis: auto;}
	
	.informace h2 {font-size: 30px;}
	
	#sipka_1 {display: none; }
	
	#sipka_2 {display: none; }
	
	
	.form-podminky {width: 100%;}
	
	
	.petition-fox {    position: relative;
    right: calc(0%);
    top: 0;
	    transform: scale(0.8);
    margin-bottom: -40px;}
	
	.petition-fox-please {        display: none;
    position: absolute;
    left: calc(50% );
    top: 80px;
    left: calc(50% - 100px) !important;
    transform: scale(0.8);
    margin-bottom: -40px;}
	
	
	
	.form-tlacitka {width: 100%; }
	.form-tlacitka .tlacitko {width: 100%;  font-size: 16px; padding: 20px 0px;}
	
	#okno-2 {height: 200%; }
	#okno-2 .obsah {position: relative;left: 0;    top: 50px;       margin: 0 auto;    width: 90%;    height: auto;    padding: 20px ;    border-radius: 5px;	}
	#okno-2 .obsah h2 {font-size: 24px; }
	
	.donate-input {width: 90%; }
	.darovani-blok p {font-size: 18px; }
	.input-group-text {font-size: 15px; }
	.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {font-size: 15px; }
	.donate-input .mena .input-group-text {font-size: 13px; }
	
	#okno .obsah {
position: relative;
left: 0;
    top: 50px;
    background: white;
    margin: 0 auto;
    width: 80%;
    height: 80%;
    padding: 30px;
    border-radius: 5px;
	}
	
	#okno .btn-okno-souhlas {
	font-size: 14px;
	float: left;
	}
	
	#okno .slepicka {
	display: none;  
	}
	
	
	#okno .btn-okno-nesouhlas {
    
    margin: 30px 0 0 30px;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
   
    float: left;
}
	
	
	#okno .obsah .text {
	width: 100%; 
	}

	.logo a img {margin: 25px 0 0 0;    width: 200px;}
	
	
	
	footer .logo-pata {display: none; }
	footer span {float: left; width: 100%; padding: 0px 0px;  }
	footer span img {display: none; }
	
	.tiraz .napravo {text-align: left; }
	
	
	.nabizime h2 {    font-size: 26px;
    padding: 20px 0;}
	.nab img {width: 50px; margin-left: 30px;  }
	.nab span {width: 200px; }
	
	
	
}

/*


@media (min-width: 1200px) and (max-width: 1399px) { 
.container {width: 1140px !important; backgro und: red; max-width: 1140px !important; }
	
	.nab span {width: 200px; }
	
	
}


@media (min-width: 1400px) { 
.container {width: 1400px !important; max-width: 1400px !important; back ground: green;  }
}