@import url('https://fonts.googleapis.com/css?family=Pattaya&subset=cyrillic');
html { 
  background: #e5ecf9 no-repeat top left fixed; 
  background-size: cover;
}
h1 {
  font-family: 'Pattaya', sans-serif;
  font-size: 3em;
  margin: 0em 1em;
  color: rgba(128,128,128, 0.8);
}
h2{
  font-family: 'Pattaya', sans-serif;
  font-size: 2em;
  margin:0em 1.5em;
  color: rgba(128,128,128, 0.8);
}
h3{
  font-family: 'Pattaya', sans-serif;
  font-size: 1.5em;
  margin: 2em 2em;
  color: rgba(0,0,0, 0.8);
}
body {
  height: 100%;
  margin: 3em 3em;	
}

@media all and (orientation:landscape) { 

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    width: auto;
    height: 100%;	
	bottom:0px;
}

.fullscreen-bg__video {
    position: fixed;
	min-width: 100%;
    width: auto;
    height: 100%;
	z-index: -50;
	right:0px;
	bottom:0px;
}

#GCalendar {

position: fixed; 
opacity: 0.8; 
margin:0.5em 2em;
min-width:150px;
min-height:300px;
max-height:80%;
height: 60%; 
width: 35%;
bottom: 10%;
z-index: 5;
}

#bg_pattern { 
background-image: url("../img/bg_pattern.png"); 
position: fixed; 
opacity: 0.3; 
left: 0px; 
top: 0px; 
width: auto; 
height: 100%; 
z-index: -1;
}
}

@media all and (orientation:portrait) { 

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: -10%;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    width: auto;
    height: 100%;	
}

.fullscreen-bg__video {
    position: fixed;
	right: -50%;
	min-width: 100%;
    width: auto;
    height: 100%;
	z-index: -50;	
}

#GCalendar {

position: fixed; 
opacity: 0.8; 
margin:0.5em 2em;
min-width:200px;
min-height:300px;
left: 5%;
bottom: 5%;
width: 80%;
max-height:60%;
height: auto; 
z-index: 5;
}

#bg_pattern { 
background-image: url("../img/bg_pattern.png"); 
position: fixed; 
opacity: 0.3; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: -1;
}
}

}