/* CSS Document - Main Layout */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    height: 100%;
		margin:0;
		padding:0;
    background-color: #EED6AE; /*#E2CAA4 #E4F1D7*/
    font-family: 'Encode Sans Expanded', sans-serif;
    font-size:1.8vw;
    color: black;
	}

.mezera {margin-top: 20px;}
.mezera2 {margin-top: 50px;}
  
/* ------------------------- H E A D E R ---------------------------------------*/
header {
    width: 100%;
    height: auto;
    padding: 0;
    flex: 0 0 auto;
    /*margin-bottom: 0.5vw;*/
}

.main-text-header {
    text-align: left;
    font-size: 5vw;
    background:#0f0f0f;
    color: #74522d;
    padding: 0.8vw 2.5vw 1.2vw 2.5vw;
  }

.section-header {
    font-size:2.6vw;
    text-align: center;
    font-weight: bold;
    margin-bottom: 2vw;
}
/* ------------------ M A I N _ C O N T E N T ----------------------------------*/
main { 
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    flex: 1 0 auto;
}

section {
    margin-top: 1.5vw;
    padding: 0 20px 20px 20px;    
}

details { margin-top: 1.5vw; font-size: 1.8vw; }
/* ------------------------- F O O T E R ---------------------------------------*/
footer {
		width:100%;
    text-align: center;
    color: #0f0f0f;
    margin: 0;
    flex: 0 0 auto;
}

.footer-wrapper { display: flex; font-size: 1.6vw; }
.footer-home, .footer-top, .footer-copyright { padding: 0.5vw 0 0.8vw 0; } 
.footer-home, .footer-top {
    flex: 1;
    background: #99764F;
    text-align: left;
    font-weight: 200;
}
.footer-copyright {
    flex: 7;
    background: #0f0f0f;
    color: #99764F;
    text-align: center;
}
.footer-home a, .footer-top a {color: #0f0f0f; text-decoration:none;}
.footer-home a:hover, .footer-top a:hover {color: #0f0f0f; text-decoration:underline;}
/*------------------------------------------------------------------------------*/

.center { text-align: center;}
.font200 { font-weight: 200; }
.smaller {font-size: smaller; font-weight: 200; }
.img-auto {width: 100%; height:auto; margin: auto; display: block;}

/* ############ _ I C O N _ F O N T _ S T Y L E S _ ########################## */
@font-face {
      font-family: 'icofont';
      src: url('../fontello/font/icofont.eot?36886330');
      src: url('../fontello/font/icofont.eot?36886330#iefix') format('embedded-opentype'),
           url('../fontello/font/icofont.woff?36886330') format('woff'),
           url('../fontello/font/icofont.ttf?36886330') format('truetype'),
           url('../fontello/font/icofont.svg?36886330#icofont') format('svg');
      font-weight: normal;
      font-style: normal;
    }

.icon-font
    {
      font-family: "icofont";
      font-style: normal;
      font-weight: normal;
      speak: none;
      font-size: 2.2vw;
      color: #0f0f0f;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      //text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      /*line-height: 1em;*/
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .4em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }

/* ############ _ M E D I A _ S C R E E N _ Q U E R Y _ ###################### */

@media only screen and (min-width: 320px) {  

  /* Small screen, non-retina */
  body { font-size: 3vw; }
  .main-text-header { font-size: 5vw; }
  .section-header { font-size: 3.2vw; }
  .footer-wrapper { flex-direction: column; font-size: 3.2vw; }
  .footer-home {order: 2; text-align: center;}
  .footer-top {order: 1; text-align: center;}
  .footer-copyright {order: 3;}
  .icon-font {font-size: 3.2vw}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2.6/2)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (                min-resolution: 124.8dpi) and (min-width: 320px),
only screen and (                min-resolution: 1.3dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query - iphone SE */
  body {font-size: 4vw;}
  .main-text-header { font-size: 10vw; }
  section {	padding: 0 8px 8px 8px;}
  .section-header { font-size: 6vw; }  
  .footer-wrapper {font-size: 4.5vw;}
  .icon-font {font-size: 4.5vw}
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */
  body {
    font-size: 1.8vw;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .main-text-header { font-size: 5vw; }
  .section-header { font-size: 2.6vw; }  
  .footer-wrapper {
      display: flex;
      flex-direction: row;
      font-size: 1.6vw
  }
  .footer-home {flex: 1; order: 1; text-align: left;}
  .footer-top {flex: 1; order: 3; text-align: left;}
  .footer-copyright {flex: 7; order: 2;}
  .icon-font {font-size: 2.2vw}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */
  body { font-size: 1.2vw; } 
  .main-text-header { font-size: 5vw; }
  .section-header { font-size: 2.4vw; }  
  footer { font-size: 1.5vw; }  
  .icon-font {font-size: 2.2vw}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

/* ########################################################################### */