@import "fonts.css";
@import "levvel.css";
@import "levvelex_v1.1.css";

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { font-family: 'Rawline'; font-weight: 400; color: #000; background: #ffffff; }
a { text-decoration: none; border: none; transition: all 0.2s ease; }

#welcome { width: 100%; height: 100vh; margin: 0; padding: 0; position: relative; overflow: hidden; display: block; background: url(../image/hero-offline.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
#welcome .hello { width: 50%; height: 100vh; display: flex; }
#welcome .inner { width: calc(100% - 300px); padding: 0 150px; align-self: center; -webkit-align-self: center; text-align: left; }
#welcome .logo { width: 100%; margin: 0 0 70px; }
#welcome .logo img { vertical-align: middle; border: none; max-height: 66px; }
#welcome .text { font-weight: 400; font-size: 18px; line-height: 28px; margin: 0; padding: 0; }
#welcome .text a { display: inline-block; text-decoration: none; border: none; position: relative; transition: all 0.2s ease; color: #000; }
#welcome .text a:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #999; transition: all 0.2s ease; }
#welcome .text a:hover { color: #888; }
#welcome .text a:hover:before { width: 0px; }
#welcome .contacts { width: 100%; font-size: 14px; line-height: 16px; margin: 20px 0 0; display: flex; align-content: center; }
#welcome .contacts a { display: inline-block; color: #000; font-weight: 400; margin: 0 0 0 15px; }
#welcome .contacts a:first-child { margin: 0; }
#welcome .contacts a:before { font-family: 'levvel'; font-size: 14px; line-height: 16px; margin: 0 5px 0 0; }
#welcome .contacts a.icon-tg:before { font-family: 'levvelex'; }
#welcome .contacts a:hover { color: #777; }
#welcome .soc_list { margin: 70px 0 0; width: 100%; display: flex; align-content: stretch; }
#welcome .soc_list a { display: inline-block; font-size: 14px; line-height: 18px; margin: 0 0 0 20px; color: #000; }
#welcome .soc_list a:first-child { margin: 0; }
#welcome .soc_list a:hover { color: #777; }




@media screen and (max-width: 1440px) {
	#welcome .inner { width: calc(100% - 240px); padding: 0 120px; }
}
@media screen and (max-width: 1200px) {
	html { -webkit-text-size-adjust: none; }
	#welcome .inner { width: calc(100% - 200px); padding: 0 100px; }
}
@media screen and (max-width: 1024px) {
	#welcome { height: 100%; }
	#welcome .hello { height: 100%; }
}
@media screen and (max-width: 960px) {
	#welcome .inner { width: calc(100% - 120px); padding: 0 60px; }
}
@media screen and (max-width: 770px) {
	#welcome { background: url(../image/hero-offline-mobile.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
	#welcome .hello { width: 100%; background: rgba(255,255,255,0.65); -webkit-backdrop-filter: saturate(150%) blur(5px); backdrop-filter: saturate(150%) blur(5px); }
	#welcome .inner { width: 90%; padding: 0 5%; text-align: center; }
    #welcome .logo img { max-height: 55px; }
    #welcome .contacts { justify-content: center; }
    #welcome .soc_list { justify-content: center; }
}
@media screen and (max-width: 570px) {
	#welcome { background: url(../image/hero-offline.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
	#welcome .hello { width: 50%; background: rgba(255,255,255,0.75); -webkit-backdrop-filter: saturate(180%) blur(7px); backdrop-filter: saturate(180%) blur(7px); }
	#welcome .inner { width: calc(100% - 80px); padding: 0 40px; text-align: left; }
    #welcome .contacts { justify-content: flex-start; }
    #welcome .soc_list { justify-content: flex-start; }
    
	#welcome .logo { margin: 0 0 30px; }
	#welcome .logo i:before { font-size: 100px; line-height: 100px; }
	#welcome h1 { font-size: 16px; line-height: 22px; }
}
@media screen and (max-width: 550px) {
	#welcome { background: url(../image/hero-offline-mobile.jpg) no-repeat center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
	#welcome .hello { width: 100%; background: rgba(255,255,255,0.65); -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); }
	#welcome .inner { width: 90%; padding: 0 5%; text-align: center; }
    #welcome .contacts { justify-content: center; }
    #welcome .soc_list { justify-content: center; }
    
	#welcome .logo i:before { font-size: 120px; line-height: 120px; }
	#welcome h1 { font-size: 20px; line-height: 26px; }
}