/* 
    Created on : 2019-02-19, 17:25:44
    Author     : Przemysław Filipiak <przemek@jrbnet.com>
*/

@font-face{

font-family: Open Sans;
src:url(fonts/Open_Sans/OpenSans-Regular.ttf);

/*font-family: Open Sans;

src:url(Quicksand_Bold.otf);
*/
}
@font-face{
    font-family: Philosopher;
    src:url(fonts/Philosopher/Philosopher-Regular.ttf);
}

html{
    background-color:#263238;
    background-image:url('images/01-bg-map.png');    
    background-size:100%;
    background-repeat: no-repeat;
}

#main{    
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

#header{
    width: 100%;
    height: 100%;
}

#header img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* language menu */

#lang_menu > a {
        display:inline-block;
        margin-left: 5px;
}

#lang_menu{
    width:100%;
    height:100%;
    text-align:right;
}

.art{    
    color: rgba(255,255,255,0.8);
    border: solid rgba(255,255,255,0.2) 1px;
    border-radius: 5px;
    margin-top:5px;
    display: none;
}

.art p{
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
}

.art ul{
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
}

.art img{
    width: 30em;
    display: block;
    float:left;
    margin-right: 10px;
}

.menu{
    background-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    border: solid rgba(255,255,255,0.2) 1px;
    border-radius: 5px;        
    margin-top: 5px;    
    font-size: 18pt;
    font-weight: 500;
}

.menu .mtitle{
    margin-left: 10%;
    font-family: 'Philosopher', sans-serif;
    float:left;
}

.rotate{
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

.menIcon{
    position: absolute;
    top: -50%;
    left: 50%;
    display: inline-block;
    transform: translateX(50%) translateY(50%) rotate(90.0deg);
}

.menu .rotate{    
    margin-right: 20px;
}

.menu:hover{
    background-color: rgba(255,255,255,0.5);
}

span.clear { clear: left; display: block; }

.topbtn{
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
    
}

.topbtn a{
    color: rgba(255,255,255,0.8);
    text-decoration: none;
}

#footer{
    margin: 0 auto;    
    z-index: -1;    
}

#footer p{
    text-align: center;
    font-size: 10px;
}

.rotate {        
    float:right;        
    
  /* FF3.5+ */
  /*-moz-transform: rotate(-90.0deg);*/
  /* Opera 10.5 */
  /*-o-transform: rotate(-90.0deg);*/
  /* Saf3.1+, Chrome */
  /*-webkit-transform: rotate(-90.0deg);*/
  /* IE6,IE7 */
  /*filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);*/
  /* IE8 */
  /*-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";*/
  /* Standard */
  
}

.Xflag_ico{
	float: right;
	padding: 5px;
}

.bold{
    font-weight: bold;
}

.email{
    text-decoration: none;
    color: rgba(255,255,255,0.8);
}

.email:hover{
    text-shadow: 2px 2px rgba(255,255,255,0.2);
}

@media only screen and (max-device-width:800px) and (orientation:landscape) {
    #main{
        max-width:95%;
    }
    .flag_ico{
		width: 3em;
    }
    #lang_menu{
		margin-bottom:15px;
    }
    #lang_menu > a {
		margin-left:20px;
    }
    .menu{
        font-size:25pt;
        margin-bottom:10px;
    }
}

@media only screen and (max-device-width:400px) and (orientation:portrait){
    #main{
		max-width: 95%;	
    }

    .flag_ico{
	    width: 4em;
    }

    #lang_menu{
	    margin-bottom: 20px;
    }
    #lang_menu>a{
	    margin-left: 30px;
    }

    .art img{
		width: 30em;
    }

    .art p, .art ul{
		font-size: 20pt;
    }

    .menu{
		font-size: 35pt;
		margin-bottom: 20px;
    }

}