/* Vlastni fonty */
@font-face {
    font-family: 'Proxima Nova Bold';
    src: url('fonty/proximanova-bold.woff2') format('woff2'),
         url('fonty/proximanova-bold.woff') format('woff'),
         url('fonty/proximanova-bold.svg#proxima_nova_rgbold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Proxima Nova';
    src: url('fonty/proximanova-reg.woff2') format('woff2'),
         url('fonty/proximanova-reg.woff') format('woff'),
         url('fonty/proximanova-reg.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'Proxima Nova Semibold';
    src: url('fonty/proximanova-semibold.woff2') format('woff2'),
         url('fonty/proximanova-semibold.woff') format('woff'),
         url('fonty/proximanova-semibold.svg#proxima_novasemibold') format('svg');
    font-weight: normal;
    font-style: normal;}

/* CSS reset */
html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
       padding: 0;
       border: 0;
       outline: 0;
       font-weight: inherit;
       font-style: inherit;
       font-size: 100%;
       font-family: inherit;
       vertical-align: baseline; }       

*:focus, *:active {outline: 0;}     
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}

/* Vlastni kod */

body, html {
  font: normal 18px/1 'Proxima Nova', sans-serif;
  background: #fff;
  color: #111;
	margin: 0px;
	padding: 0;
	text-align: center;
  -webkit-font-smoothing: antialiased;
	width: auto;
	height: 100%;}

.hidden{
	visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;} 
  
.obsah {
  width: auto;
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 60px;}
  
h1 {
  font: normal 35px/1.15 'Proxima Nova Bold', sans-serif;
  color: #97c848;
  text-transform: uppercase;
  margin: 0 auto 30px;
  position: relative;}   

/* formulare */

.formular {width: 100%; margin: -50px auto 0 auto; max-width: 640px; display: block; z-index: 1; position: relative;}
.formular .predobjednavky {width: 100%; z-index: 1; color: #fff; margin: 0 auto 40px auto;} 
.formular form {width: 100%; z-index: 1;} 
.formradek {padding: 0; margin: 0 0 10px 0; width: 100%; z-index: 1;} 
.formradektextarea {padding: 0; margin: 0 0 20px 0; width: 100%;} 

label {
	color: #111;
	font: normal 17px/1.15 'Proxima Nova Semibold', sans-serif;
  padding: 8px 0 0 0;
  width: 40%;
  display: block;
  text-align: left;
  float: left;}

label span {color: #f73f77; font: normal 30px/18px 'Proxima Nova', sans-serif; position: relative; top : .25em;}

.error {background: #f73e51; color: #fff; display: block; padding: 15px 30px; text-align: left; margin: 0 auto 10px auto; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.error:after {
  background: #f73e51;
  position: absolute;
  bottom: -4px; 
  left: 15px;
  width: 10px;
  height: 10px;
  content: '';
  -moz-transform:rotate(45deg);  
  -webkit-transform:rotate(45deg);  
  -o-transform:rotate(45deg);  
  -ms-transform:rotate(45deg);
  transform: rotate(45deg);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;}
  
.uspech {color: #111; padding: 60px 40px; margin: 0 auto;}  
.uspech h2 {font: normal 48px/1.15 'Proxima Nova', sans-serif; margin: 0 auto 30px;} 
a.zavrit {
  padding: 20px 30px 20px 30px;
  margin: 30px auto 0;
  font: normal 21px/1 'Proxima Nova', sans-serif;
  color: #111;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.1);
  -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
  -webkit-border-radius: 4px;
  border-radius: 4px;}
  
a:hover.zavrit {color: #97c848; border: 1px solid #97c848;}  

.formprvek input, .formprvek select, .formprvek textarea {
	border: 1px solid #fff;
	background: #eee;
  outline: none;
  color: #111;
  display: block;
  float: left;
  position: relative;
  width: 60%;
	padding: 0px 15px;
	font: normal 17px/44px 'Proxima Nova', sans-serif;
  height: 44px;
  overflow: hidden;
  -webkit-box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.05); 
  box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.05);}  
  
.formprvek textarea {height: 120px;}  

.popisek {width: 60%; float: left; display: block; color: #666; margin: 20px 0 0 40%; text-align: left; font-size: 15px;} 

.formprvek input:focus, .formprveknumber input:focus, .formprvek select:focus, .formprvek textarea:focus {
  background: #fff; 
  -webkit-box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.05), 0px 0px 0px 2px #97c848; 
  box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.05), 0px 0px 0px 2px #97c848;}
  
.pole {
  width: auto;
  display: block;
  margin: 0 0 30px 0;}  
  
.pole label {font-family: 'Proxima Nova', sans-serif;}   
  
.tlacitko {
  padding: 28px 35px 25px 35px;
  font: normal 21px/1 'Proxima Nova Bold', sans-serif;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  float: left;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: #97c848;
  box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
  margin: 10px 0 20px 40%;}
  
.tlacitko:hover {background-color: #79a13a;}    
  
/* responsivni design */
@media screen and (max-width: 1160px) {
h1 {font-size: 27px;} 
}

@media screen and (max-width: 640px) {
.obsah {padding: 30px 15px;}
label {
  font: normal 16px/1.15 'Proxima Nova Semibold', sans-serif;
  padding: 0;
  width: 100%;
  float: none;}
.formprvek input, .formprvek select, .formprvek textarea {
  float: none;
  width: 100%;
	font-size: 16px;}  
.popisek {width: 100%; float: none; margin: 15px 0 0 0; font-size: 14px;}  
.tlacitko {
  padding: 23px 30px 20px 30px;
  float: none;
  margin: 20px auto 10px;}
.pole {margin: 0 0 15px 0;}  
.uspech {padding: 20px 30px;}  
.uspech h2 {font-size: 32px; margin: 0 auto 20px;}  
}