* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
    line-height: 1.4em;
    color: #000000;
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #000000;
}

p{
	-webkit-hyphens: auto; 
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.anchor {
  position: relative;
  display: block;
  top: -4em;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}
.l-box-rl {
    padding: 0 0.3em;
}
.l-box-s {
    padding:0.4em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}

.is-left {
    text-align: left;
}

.is-right {
    float: right;
}

.pure-g {
    -ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content:center;
}

/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 1px solid #999;
	box-shadow: inset 0 1px 6px #bebebe;
    font-size: 100%;
    width: 100%;
    margin-bottom: 0.5pxem;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #0773b9;
    color: white!important;
    padding: 0.6em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #0773b9;
    border-radius: 5px;
    font-size: 120%;
}

 .button-order {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
 .button-order {
	background: rgb(191, 25, 24);
}

 .button-down {
  display: block;
  width: 3em;  height: 3em;
  border: 1px outset #bbbbbb;
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;
  border-radius: 3em;
  background-color: transparent;
  color: transparent; margin:4em 0 0.3em 0;
  background: url(../img/arrow.svg ) no-repeat -9em -3em;
 }

.big{ font-size:150%; font-weight:400;   margin:0.3em 0; }

/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em 1.5em;
    text-align: center;
}
.home-menu {
    background: #ffffff;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.pure-menu.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: 1px solid #999;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    float:left;
	color: #000000;
	padding:0.5em 0.2em 0.0em 0.2em;
	width: 48px; height: 48px;
	background-image: url(../img/logo_small.svg);
	background-repeat: no-repeat; 
}

.home-menu .pure-menu-selected a {
    color: #000000;
}

.home-menu a {
    color: #000000;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #97bfe0;
}

/* This is the phone_block 4 header.*/
.phone_block {
	margin: 1.0em 0 0 0;
}
.phone_block .phone_number {
	display: inline;	
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
    background-color: #0773b9;
    z-index: 1;
	padding:6em 0 1em 0;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
	background-image: url(../img/top-fon.svg), url(../img/top-fon1.svg);
	background-repeat: no-repeat, repeat-y ;
	background-position: 10% 20%, 100% 0%;
	
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 96%;
    margin: auto;
    text-align: center;
}

/* This is the main heading that appears on the blue section */
.splash-head {
    font-size: 20px;
    color: white;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1,4em;
	margin:0 0 1em 0;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* This is the indent4 right slide */
.indent{ padding:0em 0 0 0;}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
 
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: relative;
    width: 100%;
    min-height: 12%;
    z-index: 2;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.content-wrapper-head {
    /* These styles are required for the "scroll-over" effect */
	margin-top: 6em;
    position: relative;
    width: 100%;
}

.content {
        padding: 1em; 	
    }

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
	margin: 2em 0 1em;
	line-height: 1.4em;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #2b8bca;
	font-weight:400;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used table-container */
.table-container{
	width: 100%;
	overflow-y: auto;
	_overflow: auto;
	margin: 0 0 1em;
}
.table-container::-webkit-scrollbar{
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
}
.table-container::-webkit-scrollbar-thumb{
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}	

/* This is the class used color and picture background */
.pic-coffe {
  background-image: url(../img/slides/coffe.jpg);
  background-repeat: no-repeat;  background-position: center center;
  padding: 4em 0!important;
}
.white{ background-color: #ffffff;}
.gray{ background-color: #dce3e7;}
.blue{background-color: #0773b9;}

.whitetxt{color: #ffffff;}
.bluetxt{color: #0773b9!important;}
.redtxt{color: rgb(191, 25, 24);}

.privacy_policy{font-size:75%;}
.neon{text-shadow: 0px 3px 4px #014899;
/*text-shadow: 0 0 5px #0773b9, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff;*/}

/* This is the class used for the tabs */
.tabs_nav{list-style: none; margin:3em 0 0 0;}
.tabs_nav li{
	display: inline-block;
    text-align: center;
	font-weight:600;
    cursor: pointer;
	margin:0 0.5em 0.5em;
	border-bottom: 3px solid transparent;
}
.tabs_nav .active, .tabs_nav li:hover{
	 border-bottom: 3px solid #0773b9;
}
.tabs_meat{
	display: none;
}
.tabs_meat.active{
	display: block;
}

/* This is the class used for the big icon */
.top_pic{
  width: 7.5em;
  height: 7.5em;
  margin: 0 auto 0.0em auto;
  }
.on_ivr{ background-image: url(../img/on_ivr.svg);}
.on_softphone{ background-image: url(../img/on_softphone.svg);}
.on_record{ background-image: url(../img/on_record.svg);}
.on_voismail{ background-image: url(../img/on_voismail.svg);}
.on_cheap_call{ background-image: url(../img/on_cheap_call.svg);}
.on_call_forward{ background-image: url(../img/on_call_forward.svg);}
.on_queue{ background-image: url(../img/on_queue.svg);}
.on_fax{ background-image: url(../img/on_fax.svg);}
.on_scenario{ background-image: url(../img/on_scenario.svg);}
.on_manage{ background-image: url(../img/on_manage.svg);}
.on_increase{ background-image: url(../img/on_increase.svg);}
.on_missed{ background-image: url(../img/on_missed.svg);}
.on_call2custom{ background-image: url(../img/on_call2custom.svg);}
.on_quality{ background-image: url(../img/on_quality.svg);}
.on_economize{ background-image: url(../img/on_economize.svg);}
.header_fon{background-image: url(../img/monitor.svg), url(../img/price.svg); background-size:contain, 54px 36px; background-repeat: no-repeat, no-repeat; background-position: center right, 95% 10%;}
.stripes {background-color: #0773b9; background-image: url(../img/top-fon1.svg); background-repeat:repeat-y; background-position:100% 0%;}

.map_fon{background-image: url(../img/worldmap.gif); background-size:cover; background-repeat: no-repeat; background-position: center center;}
.gift_fon{background-image: url(../img/gift.svg); background-repeat: no-repeat; background-position: center center;}
.action{background-image: url(../img/action.svg); background-size:54px 36px; background-repeat:no-repeat; background-position: 95% 10%;}

/* This is the class used for the clients logos */
.logo-baltjem{background-image: url(../img/clients/logo-baltjem.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-continental{background-image: url(../img/clients/logo-continental.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-elimk{background-image: url(../img/clients/logo-elimk.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-rusradio{background-image: url(../img/clients/logo-rusradio.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-saintpetersburg{background-image: url(../img/clients/logo-saintpetersburg.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-sb{background-image: url(../img/clients/logo-sb.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-severentelecom{background-image: url(../img/clients/logo-severentelecom.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-spiba{background-image: url(../img/clients/logo-spiba.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-ugra{background-image: url(../img/clients/logo-ugra.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-uralsib{background-image: url(../img/clients/logo-uralsib.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-vozovoz{background-image: url(../img/clients/logo-vozovoz.png); background-repeat: no-repeat;  width:225px; height:140px;}
.logo-yvesdelorme{background-image: url(../img/clients/logo-yvesdelorme.png); background-repeat: no-repeat;  width:225px; height:140px;}

/* This is the class used for hide some blocks */
.hide{display:block;}
.show{display:none;}

/* This is the class used for the FAQ */
.faq{}
.faq section { margin:0 0 0 0; 
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;}
.faq h3 {cursor:pointer; margin:0 0 0 0;}
.faq p { padding: 0.5em;   	
}

/* This is the class used for the footer */
.footer {
    background: #6d8597;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	font-size:70%;
}
.footer_t {
	position: fixed; bottom: 0px; width: 100%;
    background: #6d8597;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
	font-size:70%;   z-index: 2;
}

.indent{
}
margin-top:3em;

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 26em) {
 	.home-menu .pure-menu-heading {
	padding:0.5em 1em;
	width: 140px; height: 48px;
	background-image: url(../img/logo.svg);
	background-repeat: no-repeat; 
	}
 }
 
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    /* We want to give the content area some more padding */
	.indent{ padding:4em 0 0 0;}
 	.home-menu .pure-menu-heading {
	padding:0.5em 0em;
	width: 140px; height: 48px;
	background-image: url(../img/logo.svg);
	background-repeat: no-repeat; 
	}

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: center;
    }
        .home-menu ul {
           /* float: right;*/
		/*border-top: 1px dashed #000000;*/
        }

		
    /* We increase the height of the splash-container */
/*    .splash-container {
        height: 500px;
    }*/

    .splash-head {
        font-size: 180%;
    }

    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }
	
	.big{ font-size:180%; font-weight:400; line-height:0.9em; margin:0.4em 0;}
	.hide{display:none;}
	.show{display:block;}
	.header_fon{background-image: url(../img/monitor.svg); background-size:contain; background-repeat: no-repeat; background-position: center right; height:400px;}
	.splash-container {padding:7.5em 0 1em 0;}
}


/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 250%;
    }

.splash-container {
    background-color: #0773b9;
    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed !important;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 96%;
    height: 80%;
    margin: auto;
    position: absolute;
    top: 7.5em; left: 0;right: 0;
    text-align: center;
}

.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: relative;
    margin-top: 48em;
    width: 100%;
    min-height: 12%;
}
.content-wrapper-head {
    /* These styles are required for the "scroll-over" effect */
	margin-top: 6em;
    position: relative;
    width: 100%;
}

	
}

@media (max-width: 64em) {
    /* We increase the header font size even more */
	.phone_block {	margin: 0.5em 0 0 0;}
	.phone_block .phone_number {margin:-0.8em 0 0.5em 0; font-size:80%;}
}

@media (max-width: 48em) {
    /* We increase the header font size even more */
	.button-small{font-size: 70%; padding: 0.6em 0.5em; margin:0.5em 0 0 0; } 
	.phone_block  span { display:none;}
	.phone_block {	margin: 0.5em 0 0 0;}
	.phone_block .phone_number {display: block; margin:-0.8em 0 0.5em 0; font-size:80%; line-height:1.4em;}
}

@media (max-width: 20em) {
    /* We increase the header font size even more */
	.phone_block .phone_number {display: block; margin:-0.8em 0 0.5em 0; font-size:80%;}
	.phone_block {	margin: 0.5em 0 0 0;}
}

@media(min-aspect-ratio: 16/9) and (max-width: 86em) {
    /* We increase the header font size even more */
.header_fon{ height:300px;}
.content-wrapper {  margin-top: 42em;}
	
}