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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,textarea,input{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@font-face
{
  font-family:        Roboto;
  src:                url('../fonty/Roboto-Regular.ttf');
}

@font-face
{
  font-family:        RobotoBold;
  src:                url('../fonty/Roboto-Bold.ttf');
}

@font-face
{
  font-family:        Oswald;
  src:                url('../fonty/Oswald-Bold.ttf');
}

*
{
  margin:             0;
  padding:            0;
}

html, body
{
  height:             100%;
  min-height:         100%;
  text-align:         center;
}

html
{
  font-size:          62.5%;
}

body
{
  margin:             0;
  padding:            0;
  font-family:        'Roboto', sans-serif;;
  font-size:          1em;
  color:              #000000;
  background:         url('../obrazky/sunrise.jpg') center top repeat;
  background-size:    cover;
  background-attachment: fixed;
}

body>div
{
  position:           relative;
  height:             400%;
  min-height:         400%;
}

header
{
  height:             100%;
  min-height:         100%;
}

footer
{
  background:         #261A17 url('../obrazky/pozadi-hneda.png') left top repeat;
  height:             100%;
  position:           relative;
  color:              #4F3220;
}

hr
{
  display:            block;
  height:             1px;
  border:             0;
  border-top:         1px solid #4F3220;
  margin:             1em 0;
  padding:            0;
}

table
{
  border-top:         1px solid #4F3220;
  margin:             3em 0 0;
  text-align:         left;
  width:              100%;
}

#tabulka
{
  margin:             0 auto;
  width:              70em;
  padding:            0 1em;
}


th, td
{
  padding:            0.4em 0;
  border-bottom:      1px solid #4F3220;
}

th:first-child, td:first-child
{
  padding-right:      3.2em;
}

th:nth-child(2), td:nth-child(2)
{
  text-align:         right;
}

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p
{ 
  text-indent:        0;
}

h1, h2, h3
{
  font-family:        'RobotoBold', sans-serif;;
  /*color:              #FFF; */
  /*text-align:         left;*/
}

h1
{
  font-size:          4.8em; /* 56px/(62,5%/100%*16px) */
  line-height:        1.5em; /* 84px / 56px */
  padding:            0.5em 0 0;
  text-align:         left;
  color:              #FFFFFF;
  opacity:            90%;
}

h1>span
{
  display:            block;
  font-size:          0.5em;
  line-height:        1.5em;
  font-weight:        lighter;
  letter-spacing:     2px;
  /*color:              #cccccc;*/
  opacity:            50%;
  /*padding-top:        0.2em;   */
}

h1>span>a
{
  color:              /*#825B42*/#FFFFFF;
}

.header-wrapper
{
  padding:            35em 0 0 46.9%;
  text-align:         left;
  /*border-left:        5px solid white */
}

h2
{
  font-size:          4em; /* 30px/(62,5%/100%*16px) */
  line-height:        1.333333333333333333333333333333em; /* 40px/30px */
  padding:            4.5em 0 0.9090900909090909090909090909091em; /* 40px/44px */
}

h3
{
  font-size:          2.6em; /* 20px/(62,5%/100%*16px) */
  line-height:        1.5em; /* 30px / 20px */
  padding-bottom:     0.277777777777777777778em;  /* 5px / 18 px*/
  /*padding-top:        0.5em;  */
}

p, li, td
{
  font-size:          1.8em; /* 18px/(62,5%/100%*16px) */
  line-height:        1.5em; /* 27px / 18px */
  padding-bottom:     0.444444444444444444444em; /* 8px / 18 px*/
}

a
{
  text-decoration:    none;
  color:              #B54F6A/*#824D5B*/;
}

a:hover
{
  text-decoration:    underline;
}

#portfolio ul>li, .sluzba, .cena
{
  display:            inline-block;
  margin:             0 1em 0.055555555555555555556em;
  vertical-align:     top;
  /*border:1px solid red */
}

#portfolio ul>li
{
  width:              30em;
}

.sluzba, .cena
{
  width:              33em;
  min-height:         25em;
  padding:            3em;
  text-align:         left;
  background-color:   rgba(255, 255, 255, 0.25);
  
}

.cena
{
  background-color:   rgba(255, 255, 255, 0.15);
}

.sluzba, .cena, #portfolio ul>li>a>img
{
  border-radius:      25px;
}

.cena>ul
{
  list-style-type:    circle;
  list-style-position:outside;
  padding-left:       20px;
}

.cenovka
{
  font-size:          2.4em;
  color:              #d61364;
  font-weight:        bold;
}

.cenik
{
  width:              50em;
}

#portfolio ul>li>a
{
  opacity:            0.25;
  transition:         opacity 0.5s;
}

#portfolio ul>li>a:hover
{
  opacity:            1;
}

#portfolio ul>li>a>img
{
  /*width:              300px;
  height:             225px;*/
  max-width:          100%;
  height:             auto;
  border:             3px solid #E6E6E6;
}

.box:nth-child(even)
{
  background-color:   #313131/*#005275*/;
  color:              #FFFFFF;
}

.box:nth-child(odd)
{
  /*background:         #FFFFFF url('../obrazky/pozadi-cervena.png') left top repeat;*/
  background-color:   rgba(255, 255, 255, 0.55);
  color:              #313131;
}

.box
{
  position:           relative;
  padding:            0;
  height:             auto !important; /* real browsers */
  height:             25%; /* IE6: treaded as min-height*/
  min-height:         25%; /* real browsers */
  text-align:         center;
}

/*formular*/

form
{
  display: block;
}

fieldset
{
  width:              100em;
  color:              #FFFFFF;
  margin-left:        auto;
  margin-right:       auto;
  /*margin-bottom:      20px;  */
  text-align:         center;    
}

#jmeno, #email, #message, .tlacitko, #antispam
{
  padding:            1em 0 1em 2%;
  border-radius:      10px;
}

#jmeno
{
  margin-right:       0;
}

#email
{
  float:              right;
}

#jmeno, #email, #antispam
{
  width:              47%;
  margin-bottom:      1em;
}

#antispam
{
  width:              10em;
}

#message
{
  display:            block;
  height:             15em;
  width:              98.2%;
  resize:             none;
  overflow:           hidden;
  margin-bottom:      1em;
  padding-left:       1.8%;
}

.tlacitko
{
  width:              49%;
  background-color:   white;
  cursor:             pointer;
}

.prave
{
  float:              right;
}

/*.clear
{
  clear: both;
}*/

.tlacitko:hover
{
  background-color:   #64A3B0;
}

.vnitrni
{
  font-size:          1.4em;
  text-align:         left;
  margin-left:        auto;
  margin-right:       auto;
  /*width:              30em; */
  /*overflow:           auto;  */
}

.sipka-dolu, .sipka-nahoru, #go-to-top
{
  width:              49px;
  height:             49px;
  background:         url('../obrazky/pozadi-sipky.png') center no-repeat;
  opacity:            0.5;
}

.sipka-dolu, .sipka-nahoru
{
  position:           absolute;
  left:               50%;
  margin-left:        -25px;
  opacity:            0.5;
  transition:         opacity 0.25s;
}

.sipka-dolu:hover, .sipka-nahoru:hover
{
  opacity:            1;
}

.sipka-nahoru-hneda, .sipka-dolu-hneda
{
  background:         url('../obrazky/pozadi-sipky-hneda.png') center no-repeat;
}

.sipka-dolu
{
  bottom:             4em;
}

.sipka-nahoru, .sipka-nahoru-hneda
{
  top:                4em;
}

.sipka-dolu>img, .sipka-nahoru>img, #go-to-top>img
{
  position:           relative;
  /*top:                15px; */
}

#go-to-top
{
  position:           fixed;
  display:            none;
  bottom:             4em;
  right:              2em;
}

footer>div
{
  text-align:         center;
}

#vizitka
{
  /*border:             1px solid #4F3220;
 /* border-radius:      25px; */
  width:              25em;
  padding:            2em 2em 1em;
  margin:             0 auto;
}

#social
{
  padding:            5em 0;
}

#social>li
{
  display:            inline-block;
}

#social>li>a>i
{
	background-color:   #68422B;
	color:              #9D6340;
	width:              80px;
	height:             80px;
  border-radius:      40px;
  font-size:          50px;
	text-align:         center;
  line-height:        1.5em;
	margin:             0 0.2em;
  transition:         color 0.25s, background-color 0.25s;
}

#social>li>a>i:hover
{
  color:              #4F3220;
  background-color:   transparent;
}


/*chyby formulare*/
.is-invalid
{
  background: #e6abc1;
}

.error-summary
{
  margin-top: 1rem;
  text-align: left;
  width:      100em;
  margin-left:auto;
  margin-right:auto;
}

.error-summary a
{
  color:#FFFFFF;
}

/*responsive design*/

@media (max-width: 1250px)
{
  #portfolio ul>li, .sluzba, .cena
  {
    display:            block;
    text-align:         center;
    margin:             2em auto;
  }

  #portfolio ul>li
  {
    width:              25em;
    margin-bottom:      0;
    margin-top:         0;
  }

  .sluzba, .cena
  {
    width:              50em;
    min-height:         auto;
    padding:            3em;
    text-align:         left;
    background-color:   rgba(255, 255, 255, 0.25);
    
  }

  fieldset
  {
    width:              50em;
  }
}


@media (max-width: 840px)
{
  /*body>div
  {
    height:auto;
  }

  footer
  {
    height: auto;
    clear: right;
  }*/

  td
  {
    font-size:          1.4em;
  }
  
  /*.sluzba
  {
    width:              80%;
    display:            block;
    padding:            0 2em 2em;
    margin:             0 auto;
  }*/
  
  .vnitrni-box
  {
    text-align:         center;
  }

  .header-wrapper
  {
    padding:            10em 0 0;
    text-align:         center;
  }

  h1
  {
    text-align:         center;
    font-size:          4em;
    padding:            1em 0 1em;
  }
  
  /*#sluzby h3
  {
    font-size:          1.8em;
  }
  
  #sluzby p
  {
    font-size:          1.6em;
  }*/
}

@media (max-width: 750px) /*mobily*/
{
  body
  {
    font-size:          0.75em;
  }

  p, li, td
  {
    font-size:          2.2em;
  }

  /*footer
  {
    height: auto;
    clear: both;
  }*/

  h2
  {
    padding-top:        1em;
  }

  .sipka-nahoru, .sipka-dolu
  {
    display:            none;
  }

  /*header
  {
    height:             auto;
  }*/
  
  /*body>div
  {
    height:             auto;
  }*/
  
  /*.box
  {
    height:             auto;
    padding-bottom:     3em;
  }*/

  /*h2
  {
    font-size:          3em;
  }

  h3
  {
    font-size:          2em;
  }

  p, li, td
  {
    font-size:          1.35em;
  }*/

  .sluzba, .cena
  {
    width:              40em;
  }

  #portfolio ul>li
  {
    width:              20em;
    margin-bottom:      0;
    margin-top:         0;
  }
  
  fieldset
  {
    width:              40em;
  }

  #email
  {
    float:              none;
  }

  #jmeno, #email
  {
    width:              98%;
  }
}

/*@media (max-width: 480px)
{
  header
  {
    background:         url('../obrazky/jae-m.png') center 30em no-repeat,
                        url('../obrazky/pozadi-modra.png') left top repeat;
  }
}*/

/*@media (max-height: 860px)
{
  #message
  {
    height:             10em;
  }
}*/

@media (max-height: 820px)
{
  .sipka-nahoru, .sipka-dolu
  {
    display:            none;
  }

  header
  {
    height:             auto;
    min-height:         auto;
  }
  
  h2
  {
    padding-top:        1em;
  }
  
  body>div
  {
    height:             auto;
    min-height:         auto;
  }
  
  .box
  {
    height:             auto;
    min-height:         auto;
    padding-bottom:     3em;
  }
}

/*@media (max-height: 640px)
{
  header
  {
    min-height:         640px;
    background:         url('../obrazky/jae-m.png') center 28em no-repeat,
                        url('../obrazky/pozadi-modra.png') left top repeat; 
  }
} */

/*@media (max-height: 540px)
{
  footer
  {
    min-height:         540px;
  }
}*/


/*------------------------------------------*/
/*Magnific Popup styl*/
/*------------------------------------------*/

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out; 
	-moz-transition: all 0.3s ease-out; 
	-o-transition: all 0.3s ease-out; 
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}