@charset "utf-8";

/* CSS RESET
----------------------------------------------------------------- */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
b, strong { font-weight:bold; }
i, em { font-style:italic; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display:block; }
figure { margin:0; }


/* FONT */
@font-face {
    font-family: 'brandon_grotesquemedium';
    src: url('_include/font/brandon_med-webfont.eot');
    src: url('_include/font/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('_include/font/brandon_med-webfont.woff2') format('woff2'),
         url('_include/font/brandon_med-webfont.woff') format('woff'),
         url('_include/font/brandon_med-webfont.ttf') format('truetype'),
         url('_include/font/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'icomoon';
	src:url('_include/font/icomoon.eot?otp01l');
	src:url('_include/font/icomoon.eot?#iefixotp01l') format('embedded-opentype'),
		url('_include/font/icomoon.woff?otp01l') format('woff'),
		url('_include/font/icomoon.ttf?otp01l') format('truetype'),
		url('_include/font/icomoon.svg?otp01l#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-pikk:before {
	content: "\e600";
}



/* CONTENT 
----------------------------------------------------------------- */

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-backface-visibility: hidden; 
}

html, body { 
    text-rendering:optimizelegibility; 
    -webkit-font-smoothing: antialiased; 
    font-size:16px; 
    height: 100%; 
    font-family: brandon_grotesquemedium, serif;
    color: #FFF;
    background: #FFF; 
}

.container { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 100%; 
}

a { 
    text-decoration:none; 
    transition: all .2s linear; 
    -moz-transition: all .2s linear; 
    -o-transition: all .2s linear; 
    -webkit-transition: all .2s linear; 
}

.line { 
    position: fixed; 
    width: 100%; 
    height: 20px; 
    left: 0; 
    z-index: 999; 
    background: #FFF; 
}

.line-top { 
    top: 0; 
}

.line-bottom { 
    bottom: 0; 
}

#wrapper { 
    position: relative; 
    overflow:auto; 
    width: 100%; 
    min-height: 100%; 
    border: 20px #FFF solid; 
    padding: 50px; 
    transition: all .3s linear; 
    -moz-transition: all .3s linear; 
    -o-transition: all .3s linear; 
    -webkit-transition: all .3s linear; 
}

.logo { 
    width: 100px;
    margin-left: 80px;
    margin-top: 30px;
    margin-bottom: 30px; 
}

.logo i { 
    font-size: 130px;
    margin-left: -10px;
    color: #FFF; 
}

video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

p { 
    line-height: 130%; 
    font-size: 24px; 
    margin-top: 50px; 
    margin-left: 80px;
    width: 550px; 
    position: relative; 
    z-index: 99; 
    color: #fff;
}

.contacts {
    position: absolute;
    bottom: 70px;
    left: 50px;
    border-bottom: 3px solid #fff;
    float: left;
    padding-bottom: 5px;
    width: auto;
}

.contacts a {
    padding-right: 20px;
    color: #FFF;
    text-decoration: none;
}


/* MEDIA QUERIES
----------------------------------------------------------------- */
@media only screen and (min-width: 1480px) {

	p { 
	    font-size: 26px; 
	    width: 550px; 
	}
 
} 

@media only screen and (max-width: 979px) { 
    
    .logo { 
        margin-left: 20px;
        margin-top: 10px;
    }

    .logo i { 
        font-size: 100px; 
    }

	p { 
	    font-size: 1.3em; 
	    width: auto; 
	    margin-top: 30px; 
	    margin-left: 20px; 
	    margin-right: 20px;
	}
 
}
 
@media only screen and (max-width: 767px) { 
	
	#wrapper { 
	    padding: 40px; 
	    border: 15px #FFF solid; 
	}
	
	.line { 
	    height: 15px; 
	}
	
	.logo { 
	    margin: 0; 
	}
	
	p { 
	    font-size: 1.1em; 
	    margin: 30px 0 0 0; 
	}
	
	.contacts {
	    left: 40px;
	    right: 40px;
	    width: auto;
	    float: none;
	    padding-bottom: 10px;
	}
	
	.contacts span {
	    display: block;
	}
	
}

@media only screen and (max-height: 800px) { 

    .container {
        overflow-y: scroll;
    }
    
    .logo { 
            margin-left: 20px;
            margin-top: 10px;
    }

    .logo i { 
        font-size: 100px; 
    }
    
    p { 
        font-size: 1.3em; 
        width: auto; 
        margin-top: 30px; 
        margin-left: 20px; 
        margin-right: 20px;
    }
    
    .contacts {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 50px;
    }

}