:root {
	--gray: #99a2a5;
	--background: #ffffff;
}
@font-face { font-family: 'charteroakurwdnorregular'; src: url('fonts/charteroakurwdnor-webfont.woff2') format('woff2'), url('fonts/charteroakurwdnor-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
body, HTML { margin: 0px; background-color:#CCC; }
body { height:100%; }
#frame { margin: 0; width: 100vw; max-width: 950px; border: 1px solid #CCC; background-color: #ffffff; }
#header { position: sticky; top: 0; height: 99px; z-index: 1000; display: flex; border-bottom: 1px solid #b69fd2; background-color: #ffffff; }
#logo { position: fixed; top: 15px; left: 20px; }
#logo img { width: 60%; }
#globe { display: none;}
#independent { position: absolute; top: 70px; left: 20px; padding-top: 5px; font-size: 1.5em; color: #6B53A2; opacity: .8; letter-spacing: .5px; display: inline-flex; }
#ind_bullet { font-size: 30px; line-height: 10px; }
#main { top: 0; padding-top: 5vw; padding-left: 5vw; width: 90vw; margin-left: 0; margin-right: 0; position: relative; z-index: 100; min-height: 486px; }
#footer { background-color: #6b4a93; height: 23px; margin-top: 30px; background-repeat: no-repeat; padding: 12px 0 0 30px; font-size: 18px; font-weight: 900; color: #BcBEC0; font-family: 'charteroakurwdnorregular', sans-serif; }
#leftcolumn { float: left; width: 100%; max-width: 660px; position: relative; }
#rightcolumn { float: left; position: relative; margin: 0; z-index: 100; }
#leftblock { float: left; width: 100%; }
#leftblock2 { float: left; width: 100%; }
#rightblock { float: left; position: relative; width: 100%; border-top: 1px solid #b69fd2; margin: 20px auto; padding-top: 20px; display: block; font-size: 1em; }
#rightblock p { margin: 0px; padding: 0px; color: #6b4a93; font-style: italic; }
.exp { bottom: 0; }
#rightblock2 { float: left; position: relative; width: 100%; margin: -40px auto 0; padding-top: 20px; display: block; font-size: 1em; }
.world { background-image: url(../images/image_bubble_background.jpeg); background-repeat: no-repeat; background-position: center top; background-size: cover; width: 305px; height: 287px; margin: 20px auto; }
.world .quote { padding: 20px 40px 0 25px; font-size: 13px; line-height: 15px; color: #6b4a93; font-style: italic; vertical-align: middle; }
.world .author { text-align: right; font-size: 10px; padding-right: 40px; }

/* nav */
#nav { display: none; background-image: url(../images/background_nav.jpg); background-repeat: repeat-x; background-position: left top; position: absolute; bottom: 0px; width: 950px; z-index: 100; text-transform: uppercase; }
#nav ul { list-style: none; margin: 0px; font-size: 1.4em; line-height: 2.6em; margin-left: 0px; padding-left: 10px; }
#nav li { float: left; padding: 0px; background-image: none; }
#nav li a { text-decoration: none; display: block; padding: 0px 10px 0px 25px; color: #ffffff; }
#nav li a:hover { color: #c5c5c7; }

/* Mobile Navigation Menu - Start */
#mobile_navi_cont { display: block; position: fixed; top: 101px; right: -100%; width: 100%; height: calc(100% - 80px); background-color: #ffffff; z-index: 1000; -webkit-transition: 1s; transition: 1s; padding-top: 20px; overflow-x: hidden; overflow-y: auto; }
#mobile_navi { padding-bottom: 40px; font-size: 14px; }
#menu_mobile_cont { display: block; position: fixed; top: 23px; right: 13px; }
#menu_mobile_cont .mtext { visibility: hidden; color: var(--gray); font-size: 12px; margin: 0; padding-left: 12px; }
#menu_mobile_cont:hover .mtext { visibility: visible; }
.mobile_navi_item { margin: 0 20px; padding: 20px 0; text-align: center; line-height: 20px; border-bottom: solid 1px transparent; text-transform: uppercase; font-weight: 600; font-size: 14px; color: var(--gray); }
.mobile_navi_item img { height: 20px; padding: 0; vertical-align: middle; margin-top: -2px; }
.mobile_navi_item a { font-size: 14px; color: #6b4a93; text-decoration: none; }
.highlite { background: var(--red); }
.highlite a { color: #ffffff; }
.mobile_dropdown_item { margin: 0; padding: 20px 0; text-align: center; background: var(--red); }
.mobile_dropdown_item a { color: #ffffff; font-size: 14px; }
a .mobile_dropdown_item:last-child { padding-bottom: 20px; border-bottom: solid 1px #ffffff; }
.mobile_dropdown_second_cont { display: none; }
.mobileDropDownButton { cursor: pointer; border-bottom: solid 1px #ffffff; }
.fas { color: var(--gray); float: right; opacity: .5; }
.ctaIcons { position: absolute; top: 51%; transform: translateY(-50%); right: 79px; margin-top: 3px; }
.c-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; width: 60px; height: 34px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; transition: background 0.3s; }
.c-hamburger:focus { outline: none; }
.c-hamburger span { display: block; position: absolute; top: 15px; left: 10px; right: 10px; height: 4px; background: var(--gray); }
.c-hamburger span::before, .c-hamburger span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: var(--gray); content: ""; }
.c-hamburger span::before { top: -10px; }
.c-hamburger span::after { bottom: -10px; }
.c-hamburger--htx { background-color: transparent; }
.c-hamburger--htx span { transition: background 0s 0.3s; }
.c-hamburger--htx span::before, .c-hamburger--htx span::after { transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s; }
.c-hamburger--htx span::before { transition-property: top, transform; }
.c-hamburger--htx span::after { transition-property: bottom, transform; }
.c-hamburger--htx.is-active { background-color: transparent; }
.c-hamburger--htx.is-active span { background: none; }
.c-hamburger--htx.is-active span::before { top: 0; transform: rotate(45deg); }
.c-hamburger--htx.is-active span::after { bottom: 0; transform: rotate(-45deg); }
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { transition-delay: 0s, 0.3s; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: var(--gray); -webkit-transition: 1s; transition: 1s; }
/* Mobile Navigation Menu - End */

.home { background-image: url(../images/image_building.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; width: 100%; height: 50vw; }
.experience { background-image: url(../images/image_people.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; width: 100%; height: 50vw; }
.services { background-image: url(../images/image_services.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; width: 100%; height: 50vw; }
.clients { background-image: url(../images/image_services.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; width: 100%; height: 50vw; }
.tel { background-image: url(../images/image_telecom.jpg); background-repeat: no-repeat; background-position: left top; background-size: cover; width: 100%; height: 50vw; }

@media(min-width: 700px) {
	#header { position: relative; height: 214px; border-bottom: 0px; z-index: 100; }
	#logo { position: absolute; top: 20px; left: 30px; }
	#logo img { width: 100%; }
	#independent { top: 120px; left: 30px; padding-top: 5px; font-size: 22px; }
	#main { top: 0; }
	#footer { margin-top: 30px; }
	#leftblock2 { float: left; width: 365px; }
	#rightblock2 { position: absolute; right: 0px; bottom: 0; width: 320px; padding-left: 20px; padding-top: 0; border-top: 0px; margin-left: 40px; margin-top: 20px;  }
	#nav { display: block; }
	#menu_mobile_cont { display: none; }
	#mobile_navi_cont { display: none; }
}  

@media(min-width: 950px) {
	#frame { margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 40px; }
	#globe { display: block; position: absolute; top: -230px; right: -20px; z-index: 6000; }
	#main { padding-top: 30px; padding-left: 30px; width: 920px; margin-left: auto; margin-right: auto; position:relative; z-index: 4000; min-height: 486px; }
	#rightcolumn { position: absolute; top: -35px; right: 0px; }
	#leftblock { float: left; width: 405px; }
	#rightblock { position: absolute; right: 0px; bottom: 0px; width: 200px; padding-left: 20px; padding-top: 0; border-left: 1px solid #b69fd2; border-top: 0px; margin-left: 40px; margin-top: 20px; }
	.exp { bottom: 420px !important; }
	.home { width: 232px; height: 630px; }
	.experience { width: 232px; height: 1072px; }
	.services { width: 232px; height: 840px; }
	.clients { width: 232px; height: 1254px; }
	.tel { width: 232px; height: 615px; }
}