/*-----------------------------------------LANDING PAGE STYLES---------------------------------------*/

#landing input[type=submit] {
    -webkit-appearance: button;
    border-radius:0px;
}

#landing .btn, #landing button {
    height:3.5em;
}
#pricing p {
    font-size:0.9em;
}

#landing nav {
	position:absolute;
	width:100%;
	padding:1em;
	z-index:100;
    top:0em;
}

#landing nav ul {
    -ms-transform:translate(-40%, 0%);
	display:flex;
	justify-content: center;
	margin:1em 0em;
}

#landing nav ul h4.brand {
	letter-spacing:0.3em;
	font-weight:800;
    font-size:1.2em;
    text-shadow:-1px 1px 0px rgba(0,0,0,0.4);
}

#landing nav li {
	float:right;
	margin:0.5em 2em;
}

#landing nav li a {
    font-size:0.8em;
	text-transform:uppercase;
	letter-spacing:0.2em;
    text-shadow: 1px 1px 0px white;
    padding:0em;
}

#landing nav a:hover {
    background:white;
    color:darkred !important;
    text-decoration:underline;
}

#landing.full-page-centered {
	width:100%;
	height:100vh;
	display :flex;
	align-items: center;
	justify-content:center;
    padding:0;
    background-color:white;
}
#landing .login-squared {
	padding:2em;
    font-size:0.9em;
}

#landing .login-squared h3 {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size:2em;
	line-height:0.9em;
}

#landing .login-squared p, .login-squared input, .login-squared button {
	width:100%;
	margin:0.6em 0em;
	line-height:1.2em;
}

#landing .login-squared p {
    font-size:1em;
    margin:1em 0em;
}

#landing .login-squared {
    transition:0.3s ease;
    opacity:1;
}

#landing .login-squared.init {
    opacity:0;
}

#landing input.line {
	border:none;
	border-bottom: 2px solid black;
	background:transparent;
    margin:0em;
    font-weight:bold;
    color:black;
    text-shadow:none;
}

#landing input.line::placeholder {
    font-size:0.9em;
    text-shadow:none;
	color:black;
	padding-left:0.5em;
	text-transform:uppercase;
	letter-spacing:0.3em;
}

#landing input.line::-webkit-input-placeholder {
    font-size:0.9em;
    text-shadow:none;
	color:black;
	padding-left:0.5em;
	text-transform:uppercase;
	letter-spacing:0.3em;
}

#landing input.line:-ms-input-placeholder {
    font-size:0.9em;
    text-shadow:none;
	color:black;
	padding-left:0.5em;
	text-transform:uppercase;
	letter-spacing:0.3em;
}

#landing input.line::-ms-input-placeholder {
    font-size:0.9em;
    text-shadow:none;
	color:black;
	padding-left:0.5em;
	text-transform:uppercase;
	letter-spacing:0.3em;
}

#landing .container-absolute {
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top:0px;
    left:0px;
}

.four-frame {
    position:absolute;
    max-width:100%;
    max-height:100%;
    transition:1s ease;
    opacity:1;
}

.four-frame.top-left {
    /*top: -25vh;
    left: -45vw;*/
    transform: scale(0.5) rotate(-25deg);
     -webkit-box-shadow: -7em 7em 9em 0em rgba(0,0,0,0.33);
    -moz-box-shadow:-7em 7em 9em 0em rgba(0,0,0,0.33);
    box-shadow: -7em 7em 9em 0em rgba(0,0,0,0.33);
}

.four-frame.bottom-left {
    /*bottom: -30vh;
    left: -45vw;*/
    transform: scale(0.5) rotate(-25deg);
    -webkit-box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
    box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
}

.four-frame.top-right {
    /*top: -15vh;
    left: 55vw;*/
    transform: scale(0.5) rotate(60deg);
    -webkit-box-shadow: 6em 6em 9em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: 6em 6em 9em 0em rgba(0,0,0,0.33);
    box-shadow: 6em 6em 9em 0em rgba(0,0,0,0.33);
}

.four-frame.bottom-right {
    /*bottom:-53vh;
    right:-23vw;*/
    transform: scale(0.5) rotate(-30deg);
    -webkit-box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
    box-shadow: -4em 6em 9em 0em rgba(0,0,0,0.33);
}

.four-frame.top-left.slideOut {
    opacity:0;
    transform: scale(0.5) rotate(-25deg) translate(20%, 0%);
    -webkit-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
}

.four-frame.bottom-left.slideOut {
    opacity:0;
    transform: scale(0.5) rotate(-25deg) translate(-10%, 0%);
    -webkit-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
}

.four-frame.top-right.slideOut {
    opacity:0;
    transform: scale(0.48) rotate(60deg) translate(-30%, 0%);
    -webkit-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
}

.four-frame.bottom-right.slideOut {
    opacity:0;
    transform: scale(0.48) rotate(-30deg) translate(40%, 0%);
    -webkit-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    -moz-box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
    box-shadow: 0em 0em 0em 0em rgba(0,0,0,0.33);
}

.above {
    position:relative;
    z-index:100;
}
/*-------------WINDOW SIZE BASED STYING-----------------*/

#landing .login-squared h3:first-of-type {
	letter-spacing: 0.28em;
	font-size:1.5em;
}
#landing .login-squared h3:nth-of-type(2) {
	letter-spacing: 0.13em;
	font-size:1.5em;
}

#nav2 {
    display:none;
}

.four-frame {
    display:none;
}

.mobile-landing .four-frame {
    display:block;
    position:static;
    width:80%;
}

.mobile-landing {
    display:none;
}

.mobile-landing + h3 {
    margin-top:5vh;
}

@media (min-width: 360px) {
    .mobile-landing{
        display:block;
        background:grey;
        width:100vw;
    }
}

/*sm*/
@media (min-width: 576px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 1.7vw;
        font-size:4vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 1.1vw;
        font-size:4vw;
	}
    .mobile-landing {
        display:none;
    }
}

/*md*/
@media (min-width: 768px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 1vw;
        font-size:2.3vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 0.6vw;
        font-size:2.3vw;
	}
    .login-squared input, .login-squared button {
	    width:100%;
	    margin:0.6em 0em;
	    line-height:1.5em;
        font-size: 0.9em;
    }
    .four-frame {
        display:block;
    }
    .four-frame.top-left {
        top:0vh;
        left: -45vw;
    }
    .four-frame.bottom-left {
        bottom: -10vh;
        left: -45vw;
    }
    .four-frame.top-right {
        top: 0vh;
        left: 55vw;
    }
    .four-frame.bottom-right {
        bottom:-13vh;
        right:-23vw;
    }
}

/*lg*/
@media (min-width: 992px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 1.1vw;
        font-size:2.3vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 0.7vw;
        font-size:2.3vw;
	}
}

/*lg*/
@media (min-width: 992px) and (orientation: landscape) {
    .four-frame.bottom-right {
        bottom: -30vh;
    }
    .four-frame.bottom-left {
        bottom:-18vh;
    }
}

/*xlg*/
@media (min-width: 1200px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 0.8vw;
		font-size:2vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 0.5vw;
		font-size:2vw;
	}
    .four-frame.top-left {
        top:-10vh;
        left: -45vw;
    }
    .four-frame.bottom-left {
        bottom: -20vh;
        left: -45vw;
    }
    .four-frame.top-right {
        top: -10vh;
        left: 55vw;
    }
    .four-frame.bottom-right {
        bottom:-33vh;
        right:-23vw;
    }
}

/*xxl*/
@media (min-width: 1600px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 0.65vw;
		font-size:1.5vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 0.4vw;
		font-size:1.5vw;
	}
    .navbar {
        display:none;
    }
    #nav2 {
        display:block;
    }
    .four-frame.top-left {
        top: -25vh;
        left: -45vw;
    }
    .four-frame.bottom-left {
        bottom: -30vh;
        left: -45vw;
    }
    .four-frame.top-right {
        top: -15vh;
        left: 55vw;
    }
    .four-frame.bottom-right {
        bottom:-53vh;
        right:-23vw;
    }
}

/*xxxl*/
/*@media (min-width: 1700px) {
	#landing .login-squared h3:first-of-type {
		letter-spacing: 0.66vw;
		font-size:1.5vw;
	}
	#landing .login-squared h3:nth-of-type(2) {
		letter-spacing: 0.42vw;
		font-size:1.5vw;
	}
}*/

/*-----------------------------------------END LANDING PAGE STYLES---------------------------------------*/


/*-----------------------------------------SPACER STYLES---------------------------------------*/


.justify {
    text-align:justify;
    font-weight:bold;
    text-justify:distribute;
}

.space-between {
    display:flex;
    justify-content:space-between;
}

#landing h4 {
    text-shadow: none;
    font-weight: bold;
    font-family: 'open sans';
    font-size: 1.4em;
    line-height:1.3em;
}

.space {
    min-width:1.2em;
}
/*-----------------------------------------END SPACER STYLES---------------------------------------*/