* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
img {border:0;}
html {height:100%;}
body {height: auto !important; min-height: 100%; position: relative; background:#fff; font:16px 'Roboto', Arial, Helvetica, sans-serif; color:#000;}
h1, h2, h3, h4, h5, h6 {font-family: 'MagistralC Bold', Arial, Helvetica, sans-serif;}
h2 {font-size: 64px; color: #1C0749;}
h3 {font-size: 36px; color: #1C0749;}
.container { width:1190px; min-width:320px; margin:0 auto; padding:0 10px; position:relative;}

.block {margin: 150px auto;}
.mini-block {margin: 100px auto}
.title {text-align: center}

.header {background: url(../images/header-bg.jpg) no-repeat center; background-size: cover ; height: 440px}
.header__title {color: #fff; text-align: center; font-size: 120px; padding-top: 150px}

.logos-block {display: flex; justify-content: center; align-items: center; }
.logos-desc {max-width: 480px; margin: 20px}
.logos-desc__title {padding: 30px 0 10px}
.logos-desc__text {font-weight: 300; line-height: 24px; color: #535072;}
.logos-pic {max-width: 383px; margin: 20px}

.colors-wrap {margin: 50px auto; font-size: 0}
.colors-var {width: 25%; display: inline-block; margin: 10px auto}
.colors-var__head {text-align: center; margin: 10px auto; line-height: 24px; color: #535072; font-size: 16px}
.colors-var__img {border: 0.2px solid #C6C6C6;display: block; margin: auto }

.colors-wrap {margin: 70px auto; font-size: 0}
.colors-comp {width: 25%; display: inline-block; height: 250px}
.colors-comp__text {text-align: center; line-height: 250px; font-size: 16px; color: #fff}
#color-1 {background: #2F0B51}
#color-2 {background: #42278A}
#color-3 {background: #1C0749}
#color-4 {background: #4F3371}
#color-5 {background: #535072}
#color-6 {background: #B49ECD}
#color-7 {background: #DFDDE2}
#color-8 {background: #FFFFFF; border: 1px solid #C6C6C6; margin-top: -1px}
#color-7 .colors-comp__text, #color-8 .colors-comp__text { color: #1C0749}

.gradient { height: 50px; width: 100%}
.gradient__text {font-size: 16px; line-height: 50px; color: #fff; margin: 0 35px}
.gradient__text-left { float: left}
.gradient__text-right { float: right}
#gradient-1 {background: linear-gradient(90deg, #FFDB35 0%, #F9001F 100%);}
#gradient-2 {background: linear-gradient(90deg, #FF8A2F 0%, #FF2646 100%);}
#gradient-3 {background: linear-gradient(90deg, #FFAB69 0%, #EE2F5B 100%);}
#gradient-4 {background: linear-gradient(90deg, #1D046A 0%, #4B1B7A 100%);}
#gradient-5 {background: linear-gradient(90deg, #6A1FC0 0%, #2207A9 100%);}

.fonts-wrap {display: flex; justify-content: space-between; margin: 70px auto}
.block-last {margin-bottom: 70px}

.back-button {display: block; background: linear-gradient(90deg, #4B2F87 0%, #3F248C 100%); border-radius: 7px; text-transform: uppercase; font-size: 13px; height: 60px;width: 200px; line-height: 60px; color: #fff; text-align: center; text-decoration: none; font-family: 'MagistralC Bold', Arial, Helvetica, sans-serif; float: right; margin-bottom: 70px }
.back-button:hover {opacity: 0.8}



/*Responsive*/
@media (max-width: 1210px) {
    .container {width:1000px;}
    .colors-var {width: 50%; margin: 30px auto}
    .fonts-wrap {display: inline-block; text-align: center}
    .fonts {margin: 10px auto;}
}
@media (max-width: 999px) {
    .container {width:768px;}
    .header__title {font-size: 86px}
}

@media (max-width: 767px) {
    .container {width:auto;}
    .logos-block {display: block;}
    .logos-desc {margin: 20px auto; text-align: center}
    .logos-pic {margin: 20px auto}
    .colors-var {width: 100%;}
    .colors-comp {width: 50%;}
    .fonts {width: 100%; max-width: 570px}
    .block-last {margin-bottom: 50px}
}

@media (max-width: 576px) {
    .header__title {font-size: 70px}
}
	
@media (max-width: 480px) {
    .title, .logos-desc__title {font-size: 52px}
    .mini-title {font-size: 36px}
    .header__title {font-size: 46px}
    .logos-pic__img {width: 100%}
    .back-button {float: none; margin: 0 auto 70px }
}