.asm-o2-repair-header {
width: 100%;
height: 100vh;
text-align: center;
color: #FFFFFF;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#131d40+0,1f2460+19,1e3680+40,1b529d+59,1967b0+80,0e7bc1+100 */
background: #131d40; /* Old browsers */
background: -moz-linear-gradient(top, #131d40 0%, #1f2460 19.96%, #1e3680 40.01%, #1b529d 59.98%, #1967b0 80.03%, #0e7bc1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #131d40 0%, #1f2460 19.96%, #1e3680 40.01%, #1b529d 59.98%, #1967b0 80.03%, #0e7bc1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #131d40 0%, #1f2460 19.96%, #1e3680 40.01%, #1b529d 59.98%, #1967b0 80.03%, #0e7bc1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131d40', endColorstr='#0e7bc1', GradientType=0); /* IE6-9 */
position: relative;
overflow: hidden;
}
.links {
list-style: none;
clear: both;
padding: 0 30px;
margin-top: 40px;
}
.links a {
width: 100%;
}
.background-images {
padding-top: 50px;
width: 100%;
position: relative;
pointer-events: none;
}
.img-left {
position: absolute;
left: 0;
}
.img-right {
position: absolute;
right: 0;
}
.content {
padding: 0 30px;
}
.content .info:before {
color: #FFFFFF;
}
.headline {
color: #FFFFFF;
padding-top: 150px;
}
.sub-heading {
color: #FFFFFF;
}
/*mobile*/
@media (max-width: 480px) {
.content {
font-size: 14px;
}
.img-left {
max-width: 170px;
}
.img-right {
max-width: 170px;
}
.sub-heading {
padding: 0 20px;
}
}
/*mobile big*/
@media (min-width: 480px) and (max-width: 768px) {
.headline {
font-size: 48px;
padding-top: 190px;
}
.sub-heading {
font-size: 24px;
padding: 0 40px;
}
.content {
font-size: 16px;
max-width: 750px;
}
.img-left {
max-width: 230px;
}
.img-right {
max-width: 230px;
}
.links {
padding: 0 80px;
}
}
/*tablet*/
@media (min-width: 769px) and (max-width: 1024px) {
.headline {
margin: 0;
padding-top: 200px
}
.background-images {
padding-top: 400px;
position: absolute;
}
.sub-heading {
margin-top: 40px;
}
.content {
line-height: 24px;
font-size: 16px;
max-width: 580px;
margin: 40px auto;
}
.img-left {
max-width: 350px;
}
.img-right {
max-width: 350px;
}
.links {
width: 420px;
margin: 0 auto;
}
}
/*desktop*/
@media (min-width: 1025px) and (max-width: 1480px) {
.headline {
padding-top: 200px
}
.background-images {
padding-top: 380px;
position: absolute;
}
.sub-heading {
margin-top: 40px;
}
.content {
max-width: 580px;
margin: 40px auto;
}
.img-left {
max-width: 480px;
}
.img-right {
max-width: 460px;
}
.links {
width: 420px;
margin: 0 auto;
}
}
/*infinity*/
@media (min-width: 1481px) {
.headline {
margin: 0;
padding-top: 200px
}
.background-images {
padding: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.img-left {
top: 0;
left: unset;
margin: 0 auto 0 -950px;
padding: 0
}
.img-right {
right: unset;
margin: 0 auto 0 350px;
bottom: -1px;
position: absolute;
}
.sub-heading {
margin-top: 40px;
}
.content {
max-width: 580px;
margin: 40px auto;
}
.img-left {
width: 600px;
}
.img-right {
width: 315px;
}
.links {
width: 420px;
margin: 0 auto;
}
}