body {
margin: 0;
}
#lock_out_screen {
position: relative;
background: #0083E3;
box-sizing: border-box;
height: 100%;
}
#lockout-text {
text-align: center;
z-index: 1;
position: relative;
background: url(https://cbigcapital.com/wp-content/plugins/ithemes-security-pro/core/templates/lockout/lamp-light.svg) no-repeat top left;
background-size: cover;
display: block;
}
#lockout-text h1 {
font-weight: 700;
text-transform: uppercase;
color: #0083e3;
max-width: 40%;
margin: 4em auto 1em;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
#lockout-text p {
max-width: 45%;
margin: 1em auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-weight: 100;
line-height: 1.5em;
}
#lockout-text img {
position: absolute;
top: -1px;
left: 0;
right: 0;
margin: 0px auto;
}
#lockout-computer {
position: relative;
}
#lockout-computer img {
float: left;
width: 93%;
top: 30%;
position: absolute;
max-height: 300px;
}
#spacer {
background: linear-gradient(75deg, #ffffff 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(65deg, #0083e3 60%, #0083e3 60%);
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0% 4%;
padding: 0;
justify-content: center;
background: #0083E3;
}
.box {
flex-grow: 1;
font-size: 18px;
text-align: center;
}
.box2 {
flex-basis: 50%;
}
.box3 {
flex-basis: 50%;
}
.box4 {
flex-basis: 25%;
}
#lock_out_screen .btn {
text-decoration: none;
margin: 1% 2% 10%;
display: inline-block;
padding: 2% 4%;
background: #0083e3;
color: #ffff;
border-radius: 4px;
border: solid 2px transparent;
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
#lock_out_screen .secondary-btn {
border: solid 2px #0083e3;
background: transparent;
color: #0083e3;
}
#lock_out_screen .btn:hover {
background: #0061a8;
color: #fff;
border-color: transparent;
} @media only screen and (max-width: 1200px) {
#lockout-computer.flex.box3 {
flex-basis: 35%
}
#lockout-text.flex.box3 {
flex-basis: 65%
}
#lockout-text h1 {
margin: 6em auto 1em;
}
}
@media only screen and (max-width: 1000px) {
.container {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
margin: 0% 4%;
padding: 0;
justify-content: center;
height: 100%;
}
#lockout-computer img {
float: unset;
width: 100%;
position: unset;
margin-top: 100px;
}
#lockout-text.flex.box3 {
flex-basis: 100%;
background: none;
background-size: unset;
z-index: unset;
position: unset;
}
#lockout-text h1 {
margin: 2em auto 1em;
max-width: 80%;
color: #fff;
}
#lockout-text p {
max-width: 65%;
color: #fdfdfd;
}
#lockout-text p {
max-width: 75%;
}
#lock_out_screen .btn {
background: #ffcd0c;
color: #1d1d1e;
}
}
@media only screen and (min-width: 1300px) {
#lockout-text h1 {
margin: 7em auto 1em;
}
}