/*
Theme Name: Get Worm
Author: Aditya Moghe
Description: Styles for Blow My Job
Version: 2.0.0
*/

*{
	outline: none;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

body{
	background-color: #fff;
}

p{
	font-size: 16px;
	line-height: 25px;
}

p.pre{
    white-space: pre-line;
}

p.small{
	font-size: 14px;
	line-height: 26px;
}

.color-fff{
    color: #fff;
}

.color-333{
    color: #333;
}

.color-555{
    color: #555;
}

.color-666{
    color: #666;
}

a{
    text-decoration: none;
    color: inherit;
}

.clearfix{}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.no-select{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* IE/Edge */
    user-select: none;   
}

.full-body{
    width: 100%;
    height: 100%;
}

.fixed{
    position: fixed;
    left: 0;
    top: 0;
}

.site-bg{
    z-index: 0;
    box-shadow: 0 0 0 #fff inset;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
}

.site-bg-actual{
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    z-index: 0;
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .1;
}

.flex-box{
    display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
			align-items: center;
	-webkit-justify-content: center;
			justify-content: center;
}

.flex-box.flex-center{
	-webkit-align-items: center;
			align-items: center;
	-webkit-justify-content: center;
			justify-content: center;
}

.vw80{
    max-width: 80vw;
}

/*

font-family: 'Josefin Sans', sans-serif;
font-family: 'Open Sans', sans-serif;

*/

.home-splash{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fed8c0;
    overflow: hidden;
    z-index: 10;
}

.mountain-bg{
    width: 100%;
    height: 90%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-image: url('../images/mountain-range.png');
}

.moon-dada{
    width: 100%;
    height: 90%;
    position: absolute;
    left: 50%;
    bottom: 10%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.moon-dada > div{
    width: 100%;
    height: 70%;
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    background-image: url('../images/moon-dada.png');
    -webkit-animation: floating 1.6s alternate infinite ease-in-out;
            animation: floating 1.6s alternate infinite ease-in-out;	
}

.moon-dada:after{
    content: "";
    position: absolute;
    width: 40vh;
    height: 3vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    bottom: -10%;
    left: 50%;
    margin-left: -20vh;
}

.chanda-mama{
    width: 30vh;
    height: 30vh;
    position: absolute;
    top: 10%;
    right: 20%;
    border-radius: 50%;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #feebde 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#feebde 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#feebde 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#feebde',GradientType=0 );
}

.chanda-mama:before{
    content: "";
    width: 180%;
    height: 180%;
    position: absolute;
    top: -40%;
    left: -40%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
}

.cloud-layer{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.cloud-11,
.cloud-12,
.cloud-21,
.cloud-22{
    position: absolute;
    width: 100%;
    height: 20%;
    top: 20%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    background-image: url('../images/cloud-1.png');
}

.cloud-12,
.cloud-22{
    background-image: url('../images/cloud-2.png');
    background-position: top right;
}

.cloud-11{
    left: 5%;
    -webkit-animation: cloud-1-anim 50s linear infinite;
            animation: cloud-1-anim 50s linear infinite;	
}

.cloud-12{
    right: 5%;
    -webkit-animation: cloud-2-anim 80s linear infinite;
            animation: cloud-2-anim 80s linear infinite;	
}

.splash-text{
    font-family: 'Caveat', cursive;
    font-size: 4vw;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 5%;
    color: #fff;
    text-shadow:
        0px 0px 20px rgba(0, 0, 0, 0.2),
        0px 2px 0px rgba(0, 0, 0, 0.051),
        0px 3px 0px rgba(0, 0, 0, 0.051),
        0px 4px 0px rgba(0, 0, 0, 0.051),
        0px 5px 0px rgba(0, 0, 0, 0.051),
        0px 6px 0px rgba(0, 0, 0, 0.051),
        0px 7px 0px rgba(0, 0, 0, 0.051);
}

.loader-assets{
    width: 10px;
    height: 10px;
    position: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    right: 0;
    bottom: 0;
}

.loader{
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fed8c0;
    left: 0;
    top: 0;
    -webkit-transition: all 1.6s ease;
            transition: all 1.6s ease;
}

.loader-inner{
    position: absolute;
    width: 30vh;
    height: 30vh;
    top: 50%;
    right: 50%;
    transform: translate3d(50%, -50%, 0);
    border-radius: 50%;
    
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #feebde 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#feebde 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#feebde 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#feebde',GradientType=0 );
    
    -webkit-transition: all .8s ease;
            transition: all .8s ease;
}

.loader-inner:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 50%;
    border-top: 2px solid rgba(126, 1, 50, 0);
    border-right: 2px solid rgba(126, 1, 50, 0);
    border-bottom: 2px solid rgba(126, 1, 50, .7);
    border-left: 2px solid rgba(126, 1, 50, 0);
    -webkit-animation: clockwise-rotation 1.6s linear infinite;
            animation: clockwise-rotation 1.6s linear infinite;	
}

.loader.loaded{
    opacity: 0;
    pointer-events: none;
}

.loader.loaded > .loader-inner{
    top: 10%;
    right: 20%;
    transform: translate3d(0, 0, 0);
}

.loader-inner:before{
    content: "";
    width: 180%;
    height: 180%;
    position: absolute;
    top: -40%;
    left: -40%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
}



@-webkit-keyframes floating
{
	0% {
		-webkit-transform:translateY(-2.5%);
	}
	ease-in-out
}

@keyframes floating
{
	0% {
        transform:translateY(-2.5%)
	}
	100% {
        transform:translateY(2.5%)
	}
}



@-webkit-keyframes cloud-1-anim
{
    0%  { left: 0; }
    100%  { left: 100% }
}

@keyframes cloud-1-anim
{
    0%  { left: 0; }
    100%  { left: 100% }
}




@-webkit-keyframes cloud-2-anim
{
    0%  { right: 0; }
    100%  { right: 100% }
}

@keyframes cloud-2-anim
{
    0%  { right: 0; }
    100%  { right: 100% }
}




@-webkit-keyframes clockwise-rotation
{
    0%  { -webkit-transform: rotate(0deg); }
    100%  { -webkit-transform: rotate(360deg); }
}

@keyframes clockwise-rotation
{
    0%  { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}




@media all and (min-width: 481px) and (max-width: 1024px){
    
    .splash-text{
        font-size: 6vw;
        text-shadow:
            0px 0px 20px rgba(0, 0, 0, 0.2),
            0px 2px 0px rgba(0, 0, 0, 0.051),
            0px 3px 0px rgba(0, 0, 0, 0.051),
            0px 4px 0px rgba(0, 0, 0, 0.051),
            0px 5px 0px rgba(0, 0, 0, 0.051);
    }
    
}

@media all and (max-width: 480px){
    
    .splash-text{
        font-size: 8vw;
        text-shadow:
            0px 0px 20px rgba(0, 0, 0, 0.2),
            0px 2px 0px rgba(0, 0, 0, 0.051),
            0px 3px 0px rgba(0, 0, 0, 0.051);
    }
    
}