html {

margin:0px;
padding:0px;
overflow-x:hidden;
background-color:#222222;

}


body {

color:#f5f5f5;
font-family: 'Open Sans', 'Source Sans Pro', sans-serif;
font-size:18px;
letter-spacing:.7px;
padding:0px;
margin:0px;
overflow-x:hidden;

}


.container {

width:100%;
text-align:left;
box-sizing: border-box;
position:relative;
display:inline-block;
max-width:1400px;
padding-left:10px;
padding-right:10px;

}


input[type="submit"], button {

-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;

}


#main {

background-image:url(images/mainback.jpg);
background-size:cover;
background-repeat:no-repeat;
padding-top:30px;
min-height:600px;

}


h1 {margin-top:0px;}


.small {

font-size:14px;
font-weight:normal;

}


.width {

max-width:800px;
text-align:left;
margin-left:auto;
margin-right:auto;

}


.sectitle {

font-family:'Open Sans Condensed';
font-size:54px;
font-weight:300;
margin-bottom:10px;

}


.sectext {

line-height:1.7em;
font-weight:300;
display:inline-block;

}


.sectext a {

text-decoration:none;
color:inherit;

}


.material-icons-outlined {

vertical-align:middle;
margin-right:3px;
position:relative;
top:-2px;

}


.cta {

padding:10px;
padding-left:20px;
padding-right:20px;
display:inline-block;
background-color:#e7550e;
color:#ffffff;
border:none;
border-radius:6px;
font-size:17px;
letter-spacing:1px;
margin-top:10px;
cursor:pointer;

}


.spinner {

height:20px;
width:20px;

}



@media screen and (max-width:500px) {

.sectitle {font-size:48px !important;}

}









/******************************** HEADER ************************************/

@media screen and (max-width:500px) {

#tagline {font-size:34px !important;}

}


@media screen and (max-width:750px) {

#header .container {text-align:center !important;}
#tagline {display:block !important;margin-left:auto !important;margin-right:auto !important;}
#logo {margin-left:auto !important;}

}


@media screen and (min-width:1450px) {

margin-left:-20px;

}



#header {

background-color:#fffffa;
width:100%;
position:relative;
padding-top:10px;
padding-bottom:10px;
color:#222222;

}


#logo {

width:270px;
max-width:100%;
box-sizing:border-box;
display:inline-block;
vertical-align:bottom;

}


#logo img {

width:100%;
height:auto;

}


#tagline {

//font-family: 'Courgette';
font-family: 'Carattere';
display:inline-block;
font-size:46px;
margin-left:20px;
position:relative;

}








/******************************** NAVIGATION ************************************/

@media screen and (max-width:750px) {

#desknav {display:none !important;}

}


@media screen and (min-width:751px) {

#mobnav {display:none !important;}
#mobicon {display:none !important;}

}



#desknav {

display:inline-block;
position:absolute;
right:10px;
top:0px;
display:none;

}


#desknav a {

display:inline-block;
text-decoration:none;
color:inherit;
font-family:'Source Sans Pro';
margin-left:10px;

}















/******************************** BANNER ************************************/

@media screen and (max-width:650px) {

#banner {height:280px !important; background-size:500px 280px !important;}
.bannertext {width:95% !important;}

}


@media screen and (max-width:850px) {

#banner {background-position:top 0px right -80px !important;}

}


@media screen and (max-width:550px) {

.bannertext h1 {font-size:22px !important;}

}



@media screen and (min-width:551px) and (max-width:750px) {

.bannertext h1 {font-size:28px !important;}

}



@media screen and (min-width:751px) and (max-width:950px) {

.bannertext h1 {font-size:34px !important;}

}


@media screen and (min-width:951px) and (max-width:1150px) {

.bannertext h1 {font-size:40px !important;}

}


@media screen and (min-width:950px) {

#banneroverlay {display:none !important;}

}


#banner {

width:100%;
height:400px;
background-image:url(images/bballanimation.gif);
background-size:712px 400px;
background-position:top right;
background-repeat:no-repeat;
background-color:#000000;
position:relative;

}


#banner .container {height:100%;}


.bannertext {

width:75%;
height:100%;

}


.bannertext h1 {

font-size:46px;
margin-bottom:10px;

}


#banneroverlay {

background-color:rgba(0,0,0,.6);
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;

}









/******************************* FORMS ************************************/

#regform {

max-width:750px;

}


#payform {

max-width:500px;

}


.regform {

padding:30px;
padding-left:40px;
padding-right:40px;
background-color:#fafafa;
display:inline-block;
color:#252525;
text-align:left;
width:100%;
box-sizing:border-box;
border-radius:8px;

}


.ftitle {

text-align:center;
font-weight:300;
font-size:40px;
margin-bottom:20px;
margin-top:0px;

}


.regform label {

width:100%;
display:block;
margin-bottom:4px;
font-weight:bold;

}


.textfield {

padding:8px;
background-color:#ffffff;
border:1px solid #cccccc;
font-size:18px;
color:#333333;
width:100%;
border-radius:6px;
box-sizing:border-box;
max-width:660px;

}


.l50 {

display:inline-block;
width:48%;
margin-right:10px;

}


.lphone {

display:inline-block;
width:60px;

}


.dash {

margin-left:3px;
margin-right:3px;

}


.line {

width:100%;
height:1px;
background-color:#dddddd;

}


.check {

width:15px;
height:15px;

}


.ferror {

border:2px solid red !important;

}


.ferror2 {

color:red;
font-style:italic;
text-align:center;
margin-bottom:10px;
font-size:16px;

}


.error {

color:red;
font-style:italic;
text-align:center;
font-size:16px;

}








/******************************* PAYMENT ************************************/

#payform {

padding-left:30px;
padding-right:30px;

}


#payform label {

font-size:16px;

}

#payform .cta {

width:100%;

}


#orderinfo {

padding:10px;
border:1px solid #cccccc;
font-size:16px;
background-color:#ffffff;

}


#cardicons {

margin-bottom:10px;

}


#cardicons img {

height:30px;
width:auto;

}


#payfields .textfield {

margin-bottom:20px;

}


#card-errors {

margin-top:10px;

}