/* Прижимаем футер к низу страницы flexbox */
/* Внешние шрифты
	font-family: 'Open Sans Condensed', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Roboto', sans-serif;
*/
/* СПРАВКА :
	1em – текущий размер шрифта. задаёт размер относительно шрифта родителя

	1rem - A relative unit, like em, but it is always relative to the "root" element (i.e. :root {}) В нашем случае html
	vw – 1% ширины окна
	vh – 1% высоты окна
	vmin – наименьшее из (vw, vh), в IE9 обозначается vm
	vmax – наибольшее из (vw, vh)

*/
/*  Разбивка по разрешениям экранов:
	Large desktop
@media (min-width: 1200px) { ... }

 Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

 Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

 Landscape phones and down
@media (max-width: 480px) { ... }

*/
/* * { */
    /* margin: 0; */

    /* /* width: 100%; DO NOT SET 100% to ALL !!! */ */
/* } */

/* html, */
/* body { */
    /* display: block; */
    /* box-sizing: border-box; */
    /* height: 100%; */
    /* font-size: 16px; this 1em = 16px */
    /* font-family: 'Roboto', sans-serif; */
/* } */

#page {
    display: flex;
    flex-direction: column;
    height: auto;	/* height: auto; + min-height: 100%; + box-sizing: content-box; -THIS COMBO
					!most important. to fill all page, not only 100% viewport height */
    min-height: 100%;
    box-sizing: content-box;
    background-image: url(../img/white-grey-back.png);

    /* background: pink */
}

/* header { */
    /* min-height: 70px; */
    /* width: 100%; */
    /* background: lightblue; */
    /* flex-shrink: 0; */
    /* background-image: url(../img/big_stripe.png); */
/* } */

main.rz_maincontent {
    flex-grow: 1;	/* 1 -to fill empty space in parent container */
    flex-shrink: 0; /* обнулить коэф сжатия. я непонял ? */
    flex-basis: auto;
    font-family: Roboto;
    font-size: 13;
    color: #101010;
}

.rz_block {
    background-image: url('../img/block_mark_mini.png');
    background-repeat: no-repeat;
    background-position: right center;
}

.rz_container { /* set concrete block */
    position: relative;
    width: 1200px;
    margin: 0 auto 0 auto;
    background-image: url(../img/cont_bg.png);
    border: 1px solid #A7A6A8;
}

/* .footer { */
    /* height: 40px; */
    /* background: cadetblue; */
    /* flex-grow: 0;	/* !attention */ */
    /* flex-shrink: 0; */
    /* flex-basis: auto; */
    /* background-image: url(../img/big_stripe_ver.png); */
/* } */

/* h1, */
/* h2, */
/* h3, */
/* h4 { */
    /* box-sizing: border-box; */
    /* font-family: 'Open Sans Condensed', sans-serif; */
    /* color: #205493; */
    /* font-weight: 700; */
/* } */

/* h1 { */
    /* font-size: 44px; */
/* } */

/* h2 { */
    /* font-size: 34px; */
/* } */

/* h3 { */
    /* font-size: 26px; */
/* } */

/* h4 { */
    /* font-size: 22px; */
/* } */

/* p { */
    /* font-size: 13px; */
    /* color: #1e1e1e; */
/* } */

/* Alignment classes
Left, center, right  align text */
.rz_txtAlign-left {
    text-align: left;
}

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

.rz_txtAlign-right {
    text-align: right;
}

/* For hide elements */
.rz_hidden {
    display: none!important;
    visibility: hidden;
}

.visuallyHidden { /* Hide an element visually but keep it available to screenreaders. space will not be collapced*/
    height: 1px;
    width: 1px;
    border: 0;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
}

/* Buttons */
.rz_button {
    width: 80px;
    height: 30px;
    color: #ffffff;
    background-color: #2e58a6;
    border-radius: 4px;
    border-style: none;
}

/*  Responsive cols - % -model + MediaQueries  */
[class*="rz_col-"] {
    width: 100%;
    float: left;
    min-height: 1px;
    box-sizing: border-box;
    padding: 8px;
    /* background: rgba(0, 152, 204, 0.32); */
}

.rz_col {
    padding: 1em;
    margin: 8px;
    background: #ff3333;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0,0,0,.3);
    color: #fff;
    text-align: center;
}

/* Making it Responsive. Every Col */
.rz_col-1 {
    width: 8.33333%;
}

.rz_col-2 {
    width: 16.66667%;
}

.rz_col-3 {
    width: 25%;
}

.rz_col-4 {
    width: 33.33333%;
}

.rz_col-5 {
    width: 41.66667%;
}

.rz_col-6 {
    width: 50%;
}

.rz_col-7 {
    width: 58.33333%;
}

.rz_col-8 {
    width: 66.66667%;
}

.rz_col-9 {
    width: 75%;
}

.rz_col-10 {
    width: 83.33333%;
}

.rz_col-11 {
    width: 91.66667%;
}

.rz_col-12 {
    width: 100%;
}

.rz_row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    text-align: left;
}

/* MAIN MEDIA RULEZ */
/* On screens that are 1200px wide or less, set properties */
@media screen and (max-width: 1200px) {
    .rz_container {
        width: 1200px;
    }
}

/* On screens that are 900px wide or less, set properties */
.rz_container {
    width: 900px;
}

.rz_card {
    box-sizing: border-box;
    width: 100%;
}

.card_titled {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

.card_titled a {
    display: block;
    text-align: center;
}

.card_titled h3 {
}

/*Clearfix  -this case we stay here. in near future, description will come

When child elements are floated, their parent element will collapse. To expand the parent again, you must clear those floats with a clearfix. Open dev tools and remove the.cf class from the parent to see how the layout collapses.*/
/* Positioning */
.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.T-Left {
    top: 0;
    left: 0;
}

.T-Right {
    top: 0;
    right: 0;
}

.B-Left {
    bottom: 0;
    left: 0;
}

.B-Right {
    bottom: 0;
    right: 0;
}

/* some colors */
.bg-rzGray {
    background-color: #e0e6ed;
}

/* icons & svg`s */
.icon_color { /* for font avesome */
    color: #1eaca1;
}

/* Amazing Vertical-align  */
.rz_centered {
    margin-left: auto;
    margin-right: auto;
}

.rz_verticallyCenter {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* CSS GRID starts here */
#page_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas: '. . . .' '. . . .' '. . area_n area_n' '. . area_n area_n';
}

.g_text {
    grid-area: 1 / 2 / 2 / 4;
}

/* GRID TWO -page- starts here */
/* attach BLOCKS a b c d - to predefined GRID areas */
#page_grid_two {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'header header header header' 'main main . sidebar' 'footer footer footer footer';
}

.g_text_two {
}

.item-b {
    background-color: #e3ef3f;
    grid-area: main;
}

.item-a {
    background: linear-gradient(90deg, #1488CC, #2B32B2);
    grid-area: header;
}

.item-c {
    background: linear-gradient(276deg, rgb(60, 165, 92) 0%, rgb(181, 172, 73) 100%);
    grid-area: sidebar;
}

.item-d {
    background: linear-gradient(90deg, #AA076B, #61045F);
    grid-area: footer;
}