/**********************************************************************/
/* ОБЩЕЕ ФОРМАТИРОВАНИЕ */
* { 
    margin: 0px; 
    padding: 0px;
    font-size: 16px;
    box-sizing: border-box;
}
/* ОБЩЕЕ ФОРМАТИРОВАНИЕ */
/**********************************************************************/


body{
    background-color: aquamarine;
}


/**********************************************************************/
/* РАЗМЕР ГЛАВНОЙ ОБЁРТКИ (зависит от размера media) */
@media (max-width: 1099px) {.wrapper{
    width: 532px;                                               
    margin-left: auto;
    margin-right: auto;
    /*border: 1px solid black;*/
}}

@media (min-width: 1100px) {.wrapper{
    width: 1066px;                                               
    margin-left: auto;
    margin-right: auto;
    /*border: 1px solid black;*/
}}

@media (min-width: 1600px) {.wrapper{
    width: 1600px;                                               
    margin-left: auto;
    margin-right: auto;
    /*border: 1px solid black;*/
}}
/* РАЗМЕР ГЛАВНОЙ ОБЁРТКИ (зависит от размера media) */
/**********************************************************************/


/**********************************************************************/
/* ЛОГО */
#logo{                                                              /* лого с position-fixed */
    position: fixed;
    right: 5%;
    top: 5%;
    z-index: -1;
}
/* ЛОГО */
/**********************************************************************/


/**********************************************************************/
/* КНОПКИ */
.buttons{                                                           /* общий стиль для всех кнопок */                                             
    border: 1px solid black;
    width: 472px;
    height: 120px;
    margin: 30px;
    padding: 10px 5px 10px 5px;
    float: left;
}

.buttons:hover{                                                     /* общий стиль для всех кнопок при наведении :hover */
    background-color: lightblue;
    box-shadow: 0 0 15px 15px lightskyblue;;
}

.buttons p{                                                         /* общий стиль для всех кнопок */
    font-size: 1.35em;
    text-align: center;
}

.buttons strong{
    font-size: 1em;
}

.buttons p:first-child{                                             /* общий стиль для всех кнопок */
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    text-transform: uppercase;
    transform: scale(1);
    transition: 1.5s transform;
}

.buttons:hover p:first-child{                                       /* при наведении увеличивается название кнопки */
    transform: scale(1.25);
}

.menu{                                                              /* только кнопки подраздела "меню" */
    background-color: pink;
}

.menu-sass{
    background-image: url(./add/sass-logo.png);
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0;
}

.layout{                                                            /* только кнопки подраздела "макет" */
    background-color: lightgreen;
}

.graphics{                                                          /* только кнопки подраздела "изображения" */
    background-color: violet;
}

.graphics-sass{
    background-image: url(./add/sass-logo.png);
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0;
}

.table{                                                             /* только кнопки подраздела "таблицы" */
    background-color: orange;
}

.web-form{                                                          /* только кнопки подраздела "web-form" */
    background-color: yellow;
}

.buttons_new{                                                       /* только кнопки подраздела "кнопки" */
    background-color: #64FCFC;
}
.buttons-sass{
    background-image: url(./add/sass-logo.png);
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0;
}
#unusual_button{
    background-image: url(./buttons/pictures_button-mostelefilm/unusual_button.png);
    background-size: auto 48%;
    background-repeat: no-repeat;
    background-position: 2% 10%;
}

.adaptive_design{                                                   /* только кнопки подраздела "адаптивный дизайн" */
    background-color: lightgoldenrodyellow;
}

.effects_2d-3d{                                                     /* только кнопки подраздела "2d/3d эффекты" */
    background-image: linear-gradient(to bottom right, 
    lightskyblue, pink);
}

.effects_2d-3d-sass{
    background-image: url(./add/sass-logo.png),
    linear-gradient(to bottom right, lightskyblue, pink);;
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0, 0 0;
}

.skeleton{                                                          /* только кнопки подраздела "skeleton" */
    background-image: linear-gradient(to bottom right, 
    aquamarine, green, aquamarine);
}

.flexbox{                                                          /* только кнопки подраздела "flexbox" */
    background-image: linear-gradient(to bottom right, 
    lightskyblue, darkred, lightskyblue);
}

.flexbox-sass{
    background-image: url(./add/sass-logo.png),
    linear-gradient(to bottom right, lightskyblue, darkred, lightskyblue);
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0, 0 0;
}

.grid{                                                             /* только кнопки подраздела "grid" */
    background-image: linear-gradient(to bottom right, 
    lightgreen, white, lightgreen, white, lightgreen);
}

.grid-sass{
    background-image: url(./add/sass-logo.png),
    linear-gradient(to bottom right, lightgreen, white, lightgreen, white, lightgreen);;
    background-repeat: no-repeat;
    background-size: 18%, cover;
    background-position: 100% 0, 0 0;
}

a{ color: black; text-decoration: none; }
a:active{ color: red; }                                           /* цвет ссылки при нажатии */
/* КНОПКИ */
/**********************************************************************/


.normal_flow{                                                       /* восстановление нормального потока после плавания */
    clear: both;
}


/**********************************************************************/
/* Примеры сайтов */
.wrapper_flex-box{
    display: flex;
    flex-flow: row wrap;
    padding: 0 5%; 
    border-top: 20px solid maroon;
    width: 100%;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}

.wrapper_flex-box a{
    display: block;
    transition: 2s transform ease;
}

.wrapper_flex-box a:hover{
    transform: scale(1.25);
}

html{
    overflow-x: hidden;
}

.example {
    flex: 1 1 750px;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px;
    margin: 20px;
}

.example_first{
    background-image: url(./other/001/pictures/example_first.png);
}

.example_second{
    background-image: url(./other/002/pictures/example_second.png);
}

.example_third{
    background-image: url(./other/003/pictures/bem-logo.png), url(./other/003/pictures/example_third.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_fourth{
    background-image: url(./other/004/pictures/bem-logo.png), url(./other/004/pictures/example_fourth.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_fifth{
    background-image: url(./other/005/add/pictures/bem-logo.png), url(./other/005/add/pictures/sass-logo.png), url(./other/005/add/pictures/example_fifth.png);
    background-size: 20%, 20%, cover;
    background-position: 100% 0, 77.5% 0, 0 0;
}
.example_sixth{
    background-image: url(./other/006/add/pictures/sass-logo.png), url(./other/006/add/pictures/example_sixth.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_seventh{
    background-image: url(./other/007/add/pictures/sass-logo.png), url(./other/007/add/pictures/example_seventh.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_8th{
    background-image: url(./other/008/add/pictures/sass-logo.png), url(./other/008/add/pictures/example_8th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_9th{
    background-image: url(./other/009/add/pictures/sass-logo.png), url(./other/009/add/pictures/example_9th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_10th{
    background-image: url(./other/010/add/pictures/sass-logo.png), url(./other/010/add/pictures/example_10th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_11th{
    background-image: url(./other/011/add/pictures/sass-logo.png), url(./other/011/add/pictures/example_11th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_12th{
    background-image: url(./other/012/add/pictures/sass-logo.png), url(./other/012/add/pictures/example_12th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_13th{
    background-image: url(./other/013/add/pictures/sass-logo.png), url(./other/013/add/pictures/example_13th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_14th{
    background-image: url(./other/014/add/pictures/sass-logo.png), url(./other/014/add/pictures/example_14th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_15th{
    background-image: url(./other/015/add/pictures/sass-logo.png), url(./other/015/add/pictures/example_15th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_16th{
    background-image: url(./other/016/add/pictures/sass-logo.png), url(./other/016/add/pictures/example_16th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_17th{
    background-image: url(./other/017/add/pictures/sass-logo.png), url(./other/017/add/pictures/example_17th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_18th{
    background-image: url(./other/018/add/pictures/sass-logo.png), url(./other/018/add/pictures/example_18th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_19th{
    background-image: url(./other/019/add/pictures/sass-logo.png), url(./other/019/add/pictures/example_19th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_20th{
    background-image: url(./other/020/add/pictures/sass-logo.png), url(./other/020/add/pictures/example_20th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_21th{
    background-image: url(./other/021/add/pictures/sass-logo.png), url(./other/021/add/pictures/example_21th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
.example_22th{
    background-image: url(./other/022/add/pictures/sass-logo.png), url(./other/022/add/pictures/example_22th.png);
    background-size: 20%, cover;
    background-position: 100% 0, 0 0;
}
/* Примеры сайтов */
/**********************************************************************/