html, body{
margin:0;
padding:0;
height:100%;
font-family: 'Michroma', sans-serif;
font-family: 'Montserrat Alternates', sans-serif;
font-family: 'Krona One', sans-serif;
font-family: 'Aclonica', sans-serif;
font-family: 'Comfortaa', cursive;
}
main.hero{
width:100%;
height:100%;
display:block;
background-image:url( rock_girl_pinked.jpg );
background-repeat:no-repeat;
position:relative;
background-size:cover;
background-position:center bottom;
}
main.hero div.overlay{
background-color:rgba( 0, 0, 0, 0.2 );
width:100%;
height:100%;
display:block;
position:absolute;
left:0;
top:0;
}
main.hero div.overlay div.slide_text{
display:block;
opacity:0;
position:absolute;
left:50%;
top:300px;
width:1125px;
padding-left:200px;
box-sizing:border-box;
margin:0;
margin-left:-562.5px;
height:400px;
}
main.hero div.overlay div.slide_text button.sign_up{
display: block;
margin: 0 0 0 auto;
border: 2px solid #ff00b8;
background-color: #000;
width: 140px;
height: 50px;
line-height: 36px;
color: #ff009a;
text-transform: uppercase;
font-size: 20px;
margin-top: 15px;
cursor:pointer;
outline:none;
}
main.hero div.overlay div.slide_text button.sign_up:hover{
background-color:#ff00b8;
color:#fff;
}
main.hero div.overlay h1{
width:100%;
height:auto;
text-align:right;
font-size:44px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #ff00b8;
padding:0;
color:#fff;
margin:0;
}
main.hero div.overlay h2{
width:100%;
height:auto;
text-align:right;
font-size:26px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
margin:0;
margin-top:20px;
color:#fff;
}
main.features{
width:100%;
min-height:100%;
height:auto;
padding-top:20px;
padding-bottom:20px;
/*background-image:url( /templates/toree.vtemplate/assets/smokey_pink.png );*/
/*background-repeat:no-repeat;*/
/*background-position:right bottom;*/
background-color:#000;
box-sizing:border-box;
position:relative;
}
main.features section.icons{
width:1125px;
min-height:600px;
height:auto;
margin:0 auto;
}
main.features div.top_border{
position:absolute;
width:100%;
height:100px;
top:0;
left:0;
background-image:url( top_crystal_border.png );
background-repeat:repeat-x;
background-position:center top;
}
main.features div.bottom_border{
position:absolute;
width:100%;
height:200px;
bottom:0;
left:0;
background-image:url( bottom_crystal_border.png );
background-repeat:repeat-x;
background-position:center bottom;
}
main.features h1{
width:1125px;
margin:0 auto;
height:auto;
text-align:left;
font-size:38px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
color:#fff;
margin-top:0;
margin-bottom:105px;
}
main.features section.icons div.feature_panel{
width:300px;
height:400px;
background-color:#222;
color:#ddd;
display:inline-block;
margin-right:105px;
margin-bottom:105px;
vertical-align:top;
border:1px solid #ddd;
padding:20px;
box-sizing:border-box;
overflow:hidden;
position:relative;
}
main.features section.icons div.feature_panel:nth-child( 3n+3 ){
margin-right:0px;
}
main.features section.icons div.feature_panel div.icon{
font-size: 90px;
color: #ff00b8;
text-align: center;
height: 100px;
margin-top: 25px;
line-height: 100px;
width: 100%;
display: block;
}
main.features section.icons div.feature_panel h2{
font-size:26px;
font-family: 'Michroma', sans-serif;
margin:15px 0;
width:100%;
text-align:center;
display:block;
}
main.features section.icons div.feature_panel p{
font-size:13px;
line-height:23px;
margin:50px 0px;
padding:0;
display:block;
}
main.pricing{
width:100%;
min-height:100%;
height:auto;
padding-top:20px;
padding-bottom:20px;
background-color:#000;
box-sizing:border-box;
position:relative;
}
main.pricing h1{
width:1125px;
margin:0 auto;
height:auto;
text-align:left;
font-size:38px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
color:#fff;
margin-top:0;
margin-bottom:50px;
}
main.pricing h3{
width: 1125px;
margin: 0 auto;
height: auto;
text-align: center;
font-size: 25px;
font-family: 'Michroma', sans-serif;
text-shadow: 1px 1px 5px #000;
padding: 0;
color: #fff;
margin-top: 0;
margin-bottom: 25px;
}
main.pricing div.description{
color:#fff;
width: 1125px;
margin: 0 auto;
height: auto;
text-align: left;
}
main.pricing div.pricing_details{
color: #ff00b8;
font-weight: bold;
width:50%;
margin:0 auto;
}
div.pricing_details ul li{
list-style-type: none;
height: 30px;
line-height: 30px;
padding: 5px 20px;
position:relative;
}
div.pricing_details ul li:nth-child(odd){
background-color:#222;
}
div.pricing_details ul li span.check{
right: 50px;
position: absolute;
top: 25%;
}
main.pricing div.big_ass_button{
width:50%;
margin:0 auto;
margin-top:50px;
text-align:center;
outline:none;
}
div.big_ass_button button.yuuge{
width:300px;
height:100px;
color:#fff;
background-color: #ff00b8;
font-family: 'Comfortaa', cursive;
text-align:center;
box-sizing:border-box;
font-size:28px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:none;
outline:none;
}
p.message{
margin: 0;
display: block;
width: 100%;
line-height: 40px;
font-size: 16px;
text-align: center;
font-weight: 600;
text-shadow: 0px 0px 5px #ff00b8;
color: #fff;
}
nav.top{
width:100%;
color:#fff;
height:50px;
background-color:rgba(0,0,0,0.3);
margin:0 auto;
position:fixed;
top:0;
left:0;
z-index:3;
}
nav.top div.bgcolor{
opacity:0;
display:block;
width:100%;
height:100%;
background-color:#000;
position:absolute;
left:0;
top:0;
}
nav.top div.overton{
width:1125px;
display:block;
margin:0 auto;
z-index:5;
position:absolute;
left:50%;
margin-left:-562.5px;
top:0;
height:100%;
}
nav.top div.logo{
width:400px;
display:inline-block;
height:100%;
vertical-align:top;
}
nav.top div.logo a{
border:none;
text-decoration:none;
}
nav.top div.logo a img{
display:block;
height:100%;
width:auto;
}
nav.top ul{
display:inline-block;
list-style-type:none;
vertical-align:top;
padding:0;
width:725px;
text-align:right;
margin:0;
}
nav.top ul li{
display:inline-block;
width:100px;
text-align:left;
height:40px;
box-sizing:border-box;
line-height:57px;
margin-left:30px;
border-top:3px solid #fff;
font-size:14px;
text-transform:uppercase;
}
nav.top ul li.no_border{
border-top:3px solid transparent;
line-height:50px;
}
nav.top ul li button{
width:90px;
height:30px;
box-sizing:border-box;
line-height:28px;
font-size:14px;
font-family: 'Comfortaa', cursive;
text-align:center;
box-sizing:border-box;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
outline:none;
}
nav.top ul li button#log_in{
background-color: #000;
color:#fff;
border:2px solid #fff;
outline:none;
}
nav.top ul li button#log_in:hover{
background-color:#fff;
color:#ff00b8;
}
nav.top ul li button.sign_up{
background-color:#000;
border:2px solid #ff00b8;
color:#ff00b8;
outline:none;
}
nav.top ul li button.sign_up:hover{
background-color:#ff00b8;
color:#fff;
}
nav.top ul li.selected{
color:#ff00b8;
font-weight:bold;
border-top:3px solid #ff00b8;
}
main.contact{
width:100%;
min-height:100%;
height:auto;
padding-top:20px;
padding-bottom:20px;
background-image:url( smokey_pink.png );
background-repeat:no-repeat;
background-position:right bottom;
background-color:#000;
box-sizing:border-box;
position:relative;
}
main.contact h1{
width:1125px;
margin:0 auto;
height:auto;
text-align:left;
font-size:38px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
color:#fff;
margin-top:0;
margin-bottom:50px;
}
main.contact div.contact_describe{
color:#fff;
width: 1125px;
margin: 0 auto;
height: auto;
text-align: left;
}
main.contact div.contact_form{
color:#fff;
width: 1125px;
margin: 0 auto;
height: auto;
text-align: left;
}
main.contact div.contact_form form{
width:75%;
margin:0 auto;
background-color: #333;
padding-top: 1px;
}
main.contact div.contact_form input, textarea{
display: block;
width:97.5%;
border: none;
margin: 5px;
padding: 10px 5px;
color: #fff;
background-color: #333;
font-family: 'Michroma', sans-serif;
outline: none;
border-bottom: 1px solid #c1c1c1;
}
form.beta_signup{
width:700px;
height:200px;
display:block;
position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-350px;
}
form.beta_signup input{
width:calc( 100% - 130px );
display:inline-block;
padding:8px;
box-sizing:border-box;
background-color:#f8f8f8;
margin-right:10px;
outline:none;
color:#000;
font-size:16px;
font-family: 'Michroma', sans-serif;
border:1px solid #666;
border-radius:0px;
vertical-align:middle;
}
form.beta_signup input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
}
form.beta_signup input:disabled{
-webkit-box-shadow: 0 0 0 30px #ccc inset;
}
form.beta_signup button{
display:inline-block;
background-color:#ff00b8;
width:120px;
height:41px;
outline:none;
font-size:18px;
font-weight:bold;
text-transform:uppercase;
vertical-align:middle;
box-sizing:border-box;
color:#fff;
border:none;
}
form.beta_signup button:disabled{
opacity:0.5;
}
main.hero div.overlay form.beta_signup h1, main.contact div.overlay form.beta_signup h1{
width:100%;
height:auto;
text-align:center;
font-size:32px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #ff00b8;
padding:0;
color:#fff;
margin:0;
}
main.hero div.overlay form.beta_signup h2, main.contact div.overlay form.beta_signup h2{
width:100%;
height:auto;
text-align:center;
font-size:20px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
margin:0;
margin-top:0px;
margin-bottom:20px;
color:#fff;
}
main.contact div.contact_form input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #e4e4e4 !important;
background-image: none !important;
color: #000 !important;
}
main.contact div.contact_form input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #e4e4e4 inset;
}
main.contact div.contact_form textarea {
height:100px;
resize: none;
}
main.contact div.contact_form input::placeholder, textarea::placeholder{
color:#c1c1c1;
}
div.contact_form div.form_button{
margin-top: 10px;
margin-left: 5px;
padding-bottom: 5px;
}
div.contact_form div.form_button button{
display: block;
border: 2px solid #ff00b8;
color:#fff;
background-color: #ff009a;
width: 140px;
height: 50px;
line-height: 36px;
text-transform: uppercase;
font-size: 20px;
margin-top: 15px;
cursor:pointer;
outline:none;
}
div.contact_form div.form_button button:hover{
display: block;
}
span.burger_menu{
display:none;
}
@media(max-width:700px){
main.hero{
background-position:left bottom;
}
main.features section.icons{
width:100%;
height:auto;
padding:15px;
box-sizing:border-box;
}
span.burger_menu{
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
display:block;
}
span.burger_menu:before{
position:absolute;
top:0;
left:0;
text-align:center;
line-height:50px;
width:50px;
height:50px;
color:#ff00b8;
font-size:26px;
content:"\f0c9";
font-family:FontAwesome;
}
main.features h1{
width:100%;
margin:0;
font-size:24px;
margin-bottom:25px;
text-align:center;
}
main.features section.icons div.feature_panel{
width:100%;
height:250px;
background-color:#222;
color:#ddd;
display:block;
margin-right:0px;
margin-bottom:15px;
}
main.features section.icons div.feature_panel div.icon{
font-size: 40px;
height: 50px;
margin-top: 10px;
line-height: 50px;
}
main.features section.icons div.feature_panel h2{
font-size:16px;
margin:7.5px 0;
}
main.features section.icons div.feature_panel p{
font-size:12px;
line-height:22px;
margin:25px 0px;
}
main.pricing{
width:100%;
}
main.pricing h1{
width:100%;
margin:0;
font-size:24px;
margin-bottom:25px;
text-align:center;
}
main.pricing h3{
width: 100%;
font-size: 18px;
margin-bottom: 15px;
}
main.pricing div.description{
width: 100%;
padding: 10px;
box-sizing: border-box;
}
p.message{
margin: 0;
display: block;
width: 100%;
line-height: 23px;
font-size: 16px;
text-align: center;
font-weight: 600;
text-shadow: 0px 0px 5px #ff00b8;
color: #fff;
margin-top:15px;
}
main.pricing div.pricing_details{
width:100%;
}
div.pricing_details ul {
padding:0;
}
nav.top{
width:100%;
color:#fff;
height:50px;
background-color:rgba(0,0,0,0.3);
margin:0 auto;
position:fixed;
top:0;
left:0;
z-index:3;
}
nav.top div.bgcolor{
opacity:0;
display:block;
width:100%;
height:100%;
background-color:#000;
position:absolute;
left:0;
top:0;
}
nav.top div.overton{
width:100%;
margin:0;
z-index:5;
left:0;
margin-left:0px;
}
nav.top div.logo{
width:100%;
display:block;
height:100%;
}
nav.top ul{
display:none;
position:absolute;
left:0;
top:50px;
width:100%;
height:180px;
background-color:#222;
padding:0;
margin:0;
list-style-type:none;
text-align:center;
border-bottom:1px solid #000;
}
nav.top ul li{
display:block;
width:100%;
text-align:center;
height:60px;
box-sizing:border-box;
line-height:58px;
margin-left:0px;
border-top:1px dotted #ff00b8;
font-size:16px;
text-transform:uppercase;
}
nav.top ul li:first-of-type{
border-top:none !important;
}
nav.top ul li.no_border{
border-top:1px dotted #ff00b8;
line-height:58px;
}
nav.top ul li.selected{
color:#ff00b8;
font-weight:bold;
border-top:1px dotted #ff00b8;
}
main.contact h1{
width:100%;
margin:0;
font-size:24px;
margin-bottom:25px;
text-align:center;
}
main.contact div.contact_describe{
width: 100%;
margin: 0;
}
main.contact div.contact_form{
width: 100%;
margin: 0;
}
form.beta_signup{
width:100%;
height:300px;
display:block;
position:absolute;
top:50%;
margin-top:-150px;
left:0;
margin-left:0;
padding:10px;
box-sizing:border-box;
}
form.beta_signup input{
width:calc( 100% - 130px );
display:inline-block;
padding:8px;
box-sizing:border-box;
background-color:#f8fw8f8;
margin-right:10px;
outline:none;
color:#000;
font-size:14px;
font-family: 'Michroma', sans-serif;
border:1px solid #666;
border-radius:0px;
vertical-align:middle;
}
form.beta_signup input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
}
form.beta_signup input:disabled{
-webkit-box-shadow: 0 0 0 30px #ccc inset;
}
form.beta_signup button{
display:inline-block;
background-color:#ff00b8;
width:120px;
height:38px;
outline:none;
font-size:18px;
font-weight:bold;
text-transform:uppercase;
vertical-align:middle;
box-sizing:border-box;
color:#fff;
border:none;
}
form.beta_signup button:disabled{
opacity:0.5;
}
main.hero div.overlay form.beta_signup h1, main.contact div.overlay form.beta_signup h1{
width:100%;
height:auto;
text-align:center;
font-size:22px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #ff00b8;
padding:0;
color:#fff;
margin:0 0 15px 0;
}
main.hero div.overlay form.beta_signup h2, main.contact div.overlay form.beta_signup h2{
width:100%;
height:auto;
text-align:center;
font-size:16px;
font-family: 'Michroma', sans-serif;
text-shadow:1px 1px 5px #000;
padding:0;
margin:0;
margin-top:0px;
margin-bottom:20px;
color:#fff;
}
}