Warning: include(../../../styles/core/reset.css): failed to open stream: No such file or directory in /var/www/rvland/data/www/rvland.ru/wp-content/themes/rvl/specials/vanlifequest/styles/load.php on line 10
Warning: include(): Failed opening '../../../styles/core/reset.css' for inclusion (include_path='.:/opt/php74') in /var/www/rvland/data/www/rvland.ru/wp-content/themes/rvl/specials/vanlifequest/styles/load.php on line 10
/*//////////////////////////////////////////*/
/* Progress */
/*//////////////////////////////////////////*/
@-webkit-keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 60px 0; }
}
@-moz-keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 60px 0; }
}
@keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 60px 0; }
}
/*//////////////////////////////////////////*/
/* Core */
/*//////////////////////////////////////////*/
html{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-overflow-scrolling:touch;
}
body{
min-width:300px;
font-family: 'Roboto Flex', sans-serif;
font-size: 16px;
font-weight: 400;
overflow-x: hidden;
position: relative;
background: #ebf3fa url('../images/bg_leaves.jpg') no-repeat top center;
}
*,
:before,
:after{
-webkit-box-sizing:inherit;
-moz-box-sizing:inherit;
box-sizing:inherit;
}
/*//////////////////////////////////////////*/
/* Layout */
/*//////////////////////////////////////////*/
.wrapper{
display: flex;
align-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
width:100%;
min-height:100vh;
overflow: hidden;
padding:30px 0;
}
.wrapper .title{
margin-bottom:30px;
text-align: center;
color:#2b478b;
}
.wrapper .title h1{
font-size: 80px;
font-family: 'Neucha', cursive;
}
.wrapper .title p{
font-size: 20px;
line-height: 24px;
width:390px;
max-width:100%;
margin:15px auto 0;
}
.wrapper .title .progress{
width:280px;
max-width:100%;
margin:15px auto 0;
border: 2px solid #cddff5;
border-radius: 20px;
position: relative;
}
.wrapper .title .progress span{
display: block;
font-size: 12px;
line-height: 30px;
text-transform: uppercase;
position: relative;
z-index: 10;
}
.wrapper .title .progress div{
height:100%;
position: absolute;
top:0;
left:0;
background: #cddff5;
z-index: 5;
border-radius: 20px;
}
.wrapper .title .progress div:before{
content:'';
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 20px;
background-size: 30px 30px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .20) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, .20) 50%, rgba(255, 255, 255, .20) 75%,
transparent 75%, transparent);
-webkit-animation: progress 3s linear infinite;
-moz-animation: progress 3s linear infinite;
animation: progress 3s linear infinite;
}
.wrapper .quest{
display: flex;
flex-direction: column;
width:100%;
max-width:300px;
margin:0 auto;
background: #2b478b;
position: relative;
border-radius: 40px;
padding:10px;
}
.wrapper .quest .inner{
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
width:100%;
min-height:500px;
background: #ffffff;
border-radius: 32px;
padding:30px;
z-index:10;
}
.wrapper .quest .inner .message{
line-height:20px;
}
.wrapper .quest .inner .message b,
.wrapper .quest .inner .message p{
display:block;
margin-bottom: 10px;
}
.wrapper .quest .inner .message p em{
font-weight: 700;
}
.wrapper .quest .inner .message img{
display: block;
width:100%;
height:auto;
}
.wrapper .quest .inner .logos{
width:100%;
font-size: 0;
margin-top:60px;
}
.wrapper .quest .inner .logos div{
display: inline-block;
width:50%;
height:60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.wrapper .quest .inner .logos div.rvland{
background-image: url('../images/logo_rvland.svg');
}
.wrapper .quest .inner .logos div.vanlifefest{
background-image: url('../images/logo_vanlifefest.svg');
}
.wrapper .quest .bang{
position: absolute;
width:100px;
height:24px;
top:0;
left:calc(50% - 50px);
background: #2b478b;
border-radius: 0 0 10px 10px;
z-index:15;
}
.wrapper .quest .hand{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper .quest .hand:before,
.wrapper .quest .hand:after{
content:'';
position: absolute;
}
.wrapper .quest .hand:before{
left: -274px;
top: -25px;
width: 514px;
height: 800px;
background-image:url('../images/bg_hand.png?v2');
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
.wrapper .quest .hand:after{
right: -94px;
top: -35px;
width: 109px;
height: 320px;
background-image:url('../images/bg_fingers.png?v2');
background-repeat: no-repeat;
background-size: contain;
z-index: 10;
}
.wrapper .log{
width:600px;
max-width: 100%;
margin:0 auto;
padding-top:15px;
word-break: break-all;
white-space: normal;
text-align: center;
font-size:12px;
line-height: 16px;
}
/*//////////////////////////////////////////*/
/* Mobile */
/*//////////////////////////////////////////*/
@media (max-width:500px) {
body{
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.wrapper{
padding:15px;
}
.wrapper .title{
width: 100%;
max-width: 300px;
}
.wrapper .title h1{
font-size: 40px;
}
.wrapper .quest{
background:transparent;
border-radius: 15px;
padding:0;
border-radius: 0;
}
.wrapper .quest .inner{
min-height:auto;
text-align: center;
background:rgba(235, 243, 250, 1);
padding:15px;
border-radius: 15px;
box-shadow: 0 0 20px 0 rgba(43, 71, 139, 0.2);
}
.wrapper .quest .inner .message{
font-size:18px;
line-height: 24px;
}
.wrapper .quest .inner .message br{
display:none;
}
.wrapper .quest .bang{
display: none;
}
.wrapper .quest .hand{
display: none;
}
}