/* ===========================================================
 * Filename: custom.css
 * Version: 0.3
 * Author: web360
 * =========================================================== */

body { background-color: #000; }
 #logo { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9; background-color: #000; padding: 1%; border-radius: 50%;}
 #logo img { border-radius: 50%;}
 .overlayBlack { position: relative; box-shadow:inset 0px 0px 600px 100px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);background: url("http://more-rab.com/images/elements/pattern.png") repeat scroll left top transparent; min-width: 100%; min-height: 100vh; z-index: 1; }

.grandNav { position: absolute; left: 5%; top: 5%; }
.lapidarijNav { position: absolute; right: 5%; bottom: 5%; }
nav ul li { display: block; font-family: 'Audiowide', cursive; margin-bottom: 5px;}
nav ul li a { color: #fff; font-size: 2.5em; display: block; transition: .5s all ease-in-out;}
nav ul li a span { background-color: rgba(0,0,0,0.8); padding: 20px; display: inline-block;}
.lapidarijNav ul li { float: right; clear: right; }
.grandNav a:hover { color: #9E403E; }
.grandNav a.active { color: #9E403E; }
.lapidarijNav a:hover { color: #11195E; }
.lapidarijNav a.active { color: #11195E; }
.closeNav { display: none; }

.sectionTitle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); width: 100%; text-align: center; color: #fff; font-size: 3.5em; font-family: 'Audiowide', cursive; font-weight: bold; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none;   /* Chrome/Safari/Opera */ -khtml-user-select: none;    /* Konqueror */ -moz-user-select: none;      /* Firefox */ -ms-user-select: none;       /* Internet Explorer/Edge */ user-select: none;   }

article { position: relative; z-index: 99; background-color: rgba(0,0,0,0.9); min-height: 100vh; color: #fff; padding: 40px; width: calc(100% - 80px); margin: 0 auto;  font-family: 'Prompt', sans-serif;}
article h1 { font-size: 3em; line-height: 1.4em; color: #fff; padding-bottom: 40px;}
article p { font-size: 1.6em; line-height: 1.4em; color: #fff;}
article iframe { max-width: 100%; width: 100%;}

.fixedLeft { position: fixed; top: 0; left: 0; }
.fixedRight { position: fixed; top: 0; right: 0; }

.gallery { margin-top: 40px; text-align: center;}
.gallery .imageContainer { border: 3px solid #953735; margin: 5px; display: inline-block; transition: .5s all ease-in-out;}
.gallery .imageContainer:hover { border-color: #fff; }
.lapidarijColor .imageContainer { border-color: #11195E; }

.responsive { display: none; }

#languages { position: fixed; top: 0; background-color: #000; padding: 10px; left: 50%; transform: translateX(-50%); z-index: 9;}

form input { width: 60%; font-size: 1.6em; height: 40px; font-family: 'Audiowide', cursive; padding-left: 20px; margin-bottom: 20px;}
form input[type="submit"] { margin-top: 20px; width: calc(100% - 40px); padding-left: 0; cursor: pointer;}
form textarea { width: calc(100% - 40px); height: 200px; font-size: 1.6em; font-family: 'Audiowide', cursive; padding: 20px;}

footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); padding: 10px; background-color: #000; z-index: 120; color: #fff; font-size: 1.8em; font-family: 'Audiowide', cursive; font-weight: bold;  }
footer a { color: #fff; }