@import url("reset.css");
@import url("fonts.css");

    body {
        font: normal 16px/1.5em "Helvetica Neue", Arial, sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6, strong {
        font-weight: bold;
    }
    
    nav li,
    nav li a {
        display: inline-block;
    }
    
    ul, ol {
        list-style: none;
    }
    
    abbr {
        
    }
    
    del {
        color: #666;
    }
    
    small {
        display: block;
    }
    
    blockquote cite {
        display: block;
        font-weight: bold;
        font-style: normal;
        margin-top: 1em;
    }
    
/* @end */

/* @group Links */
    a, button {
        text-decoration: none;
        color: #fff;
        -webkit-transition: color .12s linear;
        -moz-transition: color .12s linear;
        -o-transition: color .12s linear;
        transition: color .12s linear;
    }
    
    a:hover,
    a:focus,
	button:hover { 
        color: #11dbf1;
    }


/* @group Layout */
    html {
        background: #000000 url(../bg.jpg) no-repeat fixed center top;
	background-size: cover;
        color: #999;
    }
    
    body {
        overflow-x: hidden;
		/*background: url(../img/shadow.png) no-repeat 50% 150px;*/
    }
    
        @media screen and (max-width: 960px) {
            body {
                overflow-x: auto;
            }
        }
    
    .wrapper {
        max-width: 1000px;
        min-width: 880px;
        margin: 0 auto;
    }
    
    /* @group Header */
        header {
            text-align: center;
        }
        
        header > h1 {
            display: inline-block;
            width: 110px;
            height: 110px;
            margin: 100px 0 100px 0px;
            background: url(../img/button.png) no-repeat left top;
        }
		
		header > h1  span {
            display: inline-block;
            width: 110px;
            height: 110px;
            margin: 0;
            text-indent: -9999em;
            background: url(../img/button2.png) no-repeat left top;
			cursor:pointer;
        }
		
        
    /* @end */

    /* @group Main Navigation */
        #main-nav ol,
        #nav-block {
            width: 600px;
            padding-top: 25px;
            position: fixed;
            top: 10px;
            left: 50%;
            margin-left: -300px;
        }
        
        #main-nav ol {
            background: url(img/nav-bck.png) repeat-x -9px 65px;
            overflow: hidden;
        }
        
            #main-nav ol.sticky {
                position: fixed;
                top: 0;
                z-index: 998;
            }
        
        #nav-block {
            height: 60px;
            z-index: 999;
        }
        
        #main-nav li {
            float: left;
        }
        
            #main-nav li:last-child,
            #main-nav li.last {
                margin-right: 0;
            }
            
            #main-nav li:hover,
            #main-nav li.active {
                *filter: alpha(opacity=100);
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                opacity: 1;
                
                -webkit-transition: opacity .25s ease-in;
                -moz-transition: opacity .25s ease-in;
                -o-transition: opacity .25s ease-in;
                transition: opacity .25s ease-in;
            }
            
            #main-nav li.active {
                background: url(img/nav-sprite.png) no-repeat -1px -68px;
            }
            
            #main-nav li.ie7_class3,
            #main-nav li.ie7_class13 {
                *filter: alpha(opacity=40) !important;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" !important;
            }

                #main-nav li.ie7_class3:hover,
                #main-nav li.ie7_class13:hover,
                #main-nav li.ie7_class3.active,
                #main-nav li.ie7_class13.active {
                    *filter: alpha(opacity=100) !important;
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
                }
        
        #main-nav a {
			position:relative;
			z-index:9;
            display: block;
            width: 120px;
            height: 40px;
            font-size: 11px;
            font-weight: bold;
            background: url(../img/menu.png) no-repeat left bottom;
            zoom: 1;
            text-indent: -9999px;
            overflow: hidden;
        }
		
		#main-nav li div {
            background: url(../img/menu.png) no-repeat left top;
			height:40px;
			margin-bottom: -40px;
			position:relative;
			z-index:10;
			cursor: pointer;
		}
        
            #main-nav a:hover,
            #main-nav a:active,
            #main-nav .active a,
            #main-nav a:focus {
                opacity: 1;
                
                -webkit-transition: opacity .25s ease-in;
                -moz-transition: opacity .25s ease-in;
                -o-transition: opacity .25s ease-in;
                transition: opacity .25s ease-in;
            }
            
            #main-nav a:focus {
                -webkit-transform: translateY(-5px);
                -o-transform: translateY(-5px);
                transform: translateY(-5px);
            }
            
            #main-nav a:active,
            #main-nav .active a {
                -webkit-transform: translateY(0);
                -o-transform: translateY(0);
                transform: translateY(0);
            }
			
            #main-nav a[href="#home"] {
                background-position: 0px bottom;
            }

            #main-nav li.li-1 div {
                background-position: 0px top;
            }
            
            #main-nav a[href="#webdesign"] {
                background-position: -120px bottom;
            }

            #main-nav li.li-2 div {
                background-position: -120px top;
            }
            
            #main-nav a[href="#logo"] {
                background-position: -240px bottom;
            }
			
            #main-nav li.li-3 div {
                background-position: -240px top;
            }
            
            #main-nav a[href="#artworks"] {
                background-position: -360px bottom;
            }
			
            #main-nav li.li-4 div {
                background-position: -360px top;
            }
            
            #main-nav a[href="#kapcsolat"] {
                background-position: -480px bottom;
            }
			
            #main-nav li.li-5 div {
                background-position: -480px top;
            }

    /* @end */

    /* @group Sections */
	section h2 {
		font-family: "AlternateGothicNo2HUNormal";
		font-weight: normal;
		font-size:46px;
		margin: 40px 0;
	}
	
	section p.center {
		text-align: center;
		margin: 0 0 20px 0;
	}
	
	
    section > ol {
            font-size: 27px;
            font-weight: 300;
            line-height: 1.2em;
            text-shadow: 0 2px 1px hsla(0, 0%, 0%, .4);
        }
        
        section > ol > li {
			float:left;
            padding-top: 127px;
            padding-bottom: 270px;
            position: relative;
			clear:both;

        }
        
        section > ol > li:after {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
        }
            
            #watch,
            #share {
                text-align: right;
            }
        
            #discover:after {
                width: 522px;
                height: 563px;
                top: 148px;
                right: -90px;
                background: url(img/popcorn-big.png) no-repeat right top;
            }
            
            #watch:after {
                width: 850px;
                height: 800px;
                top: 50px;
                left: -174px;
                background: url(img/tv-big.png) no-repeat left top;
            }
            
            #enjoy:after {
                width: 800px;
                height: 650px;
                top: 68px;
                right: -187px;
                background: url(img/sofa-big.png) no-repeat left top;
            }
            
            #share:after {
                width: 750px;
                height: 750px;
                top: 54px;
                left: -110px;
                background: url(img/map-big.png) no-repeat left top;
            }
        

        section > ol > li > h3 {
			margin-bottom: 20px;
        }
		
        section > ol > li > a {
            display: block;
            float: left;
			margin: 3px;
            position: relative;
            color: #999;
        }
        
        a.next-btn {
			position:relative;
			z-index:9;
            display: block;
            width: 44px;
            height: 36px;
            font-size: 11px;
            font-weight: bold;
            background: url(../img/arrow_down.png) no-repeat left bottom;
            zoom: 1;
            text-indent: -9999px;
            overflow: hidden;
        }
		
		a.next-btn li div {
            background: url(../img/arrow_down.png) no-repeat left top;
            background: url(../img/arrow_down.png) no-repeat left top;
			height:40px;
			margin-bottom: -40px;
			position:relative;
			z-index:10;
			cursor: pointer;
		}
        

        

        

        
            #discover .hint,
            #enjoy .hint {
                left: 212px;
            }
            
            #watch .hint,
            #share .hint {
                right: 212px;
            }
    /* @end */
    
    /* @group Footer */
        footer {
			clear:both;
			float: left;
			width: 100%;
        }
        
        #kapcsolat {
			padding-top: 127px;
            width: 1000px;
			height: 500px;
			margin: 0 auto;
			position: relative;
        }
		
		#copyrights {
			vertical-align:middle;
			position:absolute;
			right: 0px;
			bottom: 10px;
			white-space: nowrap;
		}
		
		#copyrights a {
			margin-left: 20px;
		}
		
		#copyrights a img {
			vertical-align: middle;
			padding-bottom:15px;
		}		
		
		#copyrights span {
			font-size: 11px;
			color: #5b5b5b;
			margin-right: 10px;
			vertical-align: middle;
		}
		
		#kapcsolat_bubble {
			position: absolute;
			width: 195px;
			top: 240px;
			left: 320px;
			font-size: 12px;
			line-height: 16px;
			color: #5b5b5b;			
		}
		
		#send_mail {
			position: absolute;
			left: 25px;
			top: 98px;
		}
		
		#kapcsolat_form {
			position: absolute;
			top: 218px;
			left: 572px;
			width: 400px;
		}
		
		#kapcsolat_form input[name="nev"] {
			position: absolute;
			top: 0px;
			left: 0px;
			font-size: 12px;
			line-height: 16px;
			padding: 0px 10px;
			width: 170px;
			height: 25px;
			color: #5b5b5b;
			vertical-align:middle;
		}

		#kapcsolat_form input[name="email"] {
			position: absolute;
			top: 0px;
			right: 0px;
			font-size: 12px;
			line-height: 16px;
			padding: 0px 10px;
			width: 170px;
			height: 25px;
			color: #5b5b5b;
			vertical-align:middle;
		}
		
		#kapcsolat_form textarea {
			position: absolute;
			top: 36px;
			left: 0px;
			font-size: 12px;
			padding: 10px;
			width: 380px;
			height: 95px;
			color: #5b5b5b;
			resize: none;
		}

		#kapcsolat_form button {
			position: absolute;
			top:165px;
			right:20px;
			font-size: 12px;
		}
		
		
		
		
		
        
	/* @end */
/* @end */