/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

h2 {
  letter-spacing: -1px;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/*--- General Styles ---*/
html{
	background:#fff;
}
body{
	min-height: 600px;
    padding: 100px 0 50px;
	font:14px 'Open Sans', sans-serif, Arial;
	box-shadow:0 0 25px rgba(0,0,0,0.3) inset;
	height:100%;
    color:#555;
}
a, a:visited {
	text-decoration:none;
	outline:none;
	color:#444;
}

a:hover{
	text-decoration:none;
    color: #910100;
}

section, footer{
	display: block;
}
/* COMMON STEP STYLES */
.step {
    width: 900px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;
}

.step {
    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;
}

/* fade out inactive slides */
.step:not(.active) {
    opacity: 0.3;
}

/*--- Styling the presentation ---*/
#impress { pointer-events: auto; }
#impress:not(.impress-not-supported) .step{
	opacity:0.4;
}

#impress .step{
	width:700px;
	height: 600px;
	position:relative;
	margin:0 auto;
	-moz-transition:1s opacity;
	-webkit-transition:1s opacity;
	-o-transition:1s opacity;
	transition:1s opacity;
}

#impress .step.active{
	opacity:1;
}

#impress h2{
	font: normal 30px 'Open Sans', sans-serif;
	color:#555;
	position:absolute;
	z-index:10;
}

#impress p{
	font: normal 14px 'Open Sans', sans-serif;
	color:#646464;
	position:absolute;
	z-index:10;
    text-align: justify;
}

#impress img{
	position:absolute;
	z-index:1;
}

.arrow{
	width:32px;
	height:54px;
	background:url('../img/arrows.png') no-repeat;
	position:fixed;
	top:50%;
	margin-top:-27px;
	cursor:pointer;
	text-indent:-9999px;
	overflow:hidden;
	opacity:0.8;
	border:none !important;
	text-decoration:none !important;
	-moz-transition:0.2s opacity;
	-webkit-transition:0.2s opacity;
	-o-transition:0.2s opacity;
	transition:0.2s opacity;
}

.arrow:hover{
	opacity:1;
}

#arrowLeft{
	left:45px;
    z-index:200;
}

#arrowRight{
	right:45px;
	background-position:top right;
    z-index:200;
}

/* Hide the arrows if impress is not supported */
#impress.impress-not-supported + .arrow,
#impress.impress-not-supported + .arrow + .arrow{
	display:none;
}

/*--- Slide 1 - Main page ---*/
#impress #intro{
	width: 702px;
}

#intro h2{
    left: 100px;
	text-align: left;
    width: 300px;
}

#intro p{
    right: 0px;
    bottom: 15px;
}

#intro img{
	top: 70px;
}

/*---- Slide 2 - About ---*/
#impress #about{
	width: 810px;
}

#about h2{
	left: 155px;
	top: 530px;
	width: 100px;
}

#about p{
	left: 505px;
    top: 520px;
    width: 410px;
}

#about img{
	right: 0;
    top: 30px;
}

/*--- Slide 3 - Weddings ---*/
#impress #weddings{
	width: 734px;
}

#weddings h2{
	left: 0;
	top: 300px;
	width: 100%;
	text-align:left;
}

#weddings p{
	left:20px;
    top: 350px;
    width: 410px;
}

#weddings img{
	right: 0;
    top: 20px;
}

/*--- Slide 4 - Contacts ---*/
#impress #contacts{
	width: 670px;
}

#contacts h2{
	left: 0;
    top: 320px;
    text-align: left;
}

#contacts p{
	left: 0px;
    top: 420px;
    width: 400px;
}

#contacts img{
	right: 0;
    top: 50px;
}

/*---	Slide 5 - Photos ---*/
#impress #photos{
	width: 880px;
}

#photos h2{
	left: 80px;
    top: 550px;
    text-align: left;
    width: 150px;
}

#photos p{
    left: 350px;
    top: 575px;
    width: 510px;
}

#photos img{
	right: 0;
    top: 100px;
}

/*---	Slide 6 - Photoschool ---*/
#impress #photoschool{
	width: 768px;
}

#photoschool h2{
	left: 500px;
    top: 420px;
    text-align: left;
    width: 200px;
}

#photoschool p{
    left: 500px;
    top: 260px;
    width: 285px;
}

#photoschool img{
	left: 50px;
    top: 100px;
}

/* IMPRESS NOT SUPPORTED STYLES */
.fallback-message {
    color: #fff;
    line-height: 1.3;
    display: none;
    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;
    border-radius: 10px;
    border: 1px solid #555;
    background: rgba(255, 0, 0, 0.5);
}

.fallback-message p {
    margin-bottom: 8px;
}

.impress-disabled .step,
.impress-not-supported .step {
    position: relative;
    opacity: 1;
    margin: 20px auto;
}

.impress-not-supported .fallback-message {
    display: block;
}
/*--- menu & logo ---*/
#roman-rybaleov-logo {
  border: 0px solid red;
  position: absolute;
  top: 80px;
  left: 40px;
  width: 305px;
  height: 56px;
  z-index:99;
}
#site-menu {
  border: 0px solid green;
  position: absolute;
  top: 180px;
  left: 80px;
  font-size: 25px;
  z-index:100;
}
#menu-photos {
  width: 84px;
  height: 32px;
}
#menu-weddings {
  width: 115px;
  height: 32px;
}
#menu-about {
  width: 72px;
  height: 32px;
  padding-top: 85px;
}
#menu-contacts {
  width: 100px;
  height: 32px;
}
#menu-photoschool {
  width: 195px;
  height: 32px;
  padding-top: 60px;
}
#map {
    position: absolute;
    width: 400px;
    height: 450px;
    right: 0;
    top: 50px;
    background-color: #fff;
    outline: 1px solid #c7c7c7;
}
#site-left {
  position: absolute;
  top:0;
  left:0;
  border: 1px dotted red;
  z-index:101;
}