/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/** GLOBAL **/
body{background: #529ecf url(../img/base.jpg) top left repeat; font-family: 'Roboto', Helvetica, Arial;}

.thescrollhead{background: #ff5cca; width: 100%; height: 75px; position: fixed; top: -80px; left: 0; z-index: 9998;}
.thescrollhead > .theprimary{height: 75px;}
.thescrolllogo{width: 174px; height: 30px; text-decoration: none; position: absolute; top: 22px; left: 0;}
.thescrolllogo:hover{opacity: 0.5;}
.thescrolllogo img{width: 100%; height: auto; position: relative; display: block;}
.thescrollnav{text-align: right; position: absolute; top: 15px; right: 0;}
.thescrollnav a{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 18px; font-weight: 700; color: #fff; text-align: center; text-decoration: none; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); line-height: 45px; padding: 0 10px; position: relative; display: inline-block;}
.thescrollnav a:hover{color: rgba(255, 255, 255, 0.5); text-decoration: none;}

.thewrapper, .theprimary{width: 1200px; position: relative;}
.thewrapper{background: #fff; border-radius: 7px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); margin: 25px auto; overflow: hidden;}
.theprimary{margin: 0 auto;}

.theheader{background: #ff5cca; height: 75px; position: relative;}
.thelogo{width: 174px; height: 30px; text-decoration: none; position: absolute; top: 22px; left: 30px;}
.thelogo:hover{opacity: 0.5;}
.thelogo img{width: 100%; height: auto; position: relative; display: block;}
.thenav{text-align: right; position: absolute; top: 15px; right: 20px;}
.thenav a{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 21px; font-weight: 700; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); line-height: 45px; padding: 0 10px; position: relative; display: inline-block;}
.thenav a:hover, .thenav a.activenav{color: rgba(255, 255, 255, 0.5); text-decoration: none;}
.thenav a.activenav:hover{color: #fff;}
.nav-joinbutton{background: #ffb05c; border-radius: 3px; padding: 0 18px !important; margin-left: 5px;}
.nav-joinbutton:hover{background: rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075) inset, 0 1px 0 rgba(255, 255, 255, 0.15);}

.thefooter{border-top: 1px dotted rgba(0, 0, 0, 0.15); padding: 25px 0; position: relative;}
.thefooter p{font-size: 12px; font-weight: 400; color: #95938f; text-align: center; position: relative;}
.thefooter a{color: #95938f; text-decoration: none;}
.thefooter a:hover{color: #7c7a75; text-decoration: none;}

.pagepitch{text-decoration: none; padding: 15px 30px 25px 30px; position: relative; display: block;}
.pagepitch h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 36px; font-weight: 700; color: #3b3837; text-align: center; text-transform: uppercase; line-height: 32px; letter-spacing: -0.5px; position: relative;}
.pagepitch:hover h1{color: #ff5cca;}
.pagepitch h2{font-size: 18px; font-weight: 400; color: #7c7a75; text-align: center; position: relative;}
.pagepitch:hover h2{color: #3b3837;}

.thesplash{background: #eae9e6; border-radius: 7px; margin: 30px 30px 0 30px; position: relative; overflow: hidden;}
/*.thesplash a{text-decoration: none; position: relative; display: block;}
.thesplash a img{width: 100%; height: auto; position: relative; display: block; z-index: 94;}*/
.thesplash a img{ width: 100%; height: auto; display: block; }
.thesplash a section{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 95;}
.thesplash a section h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: -1px; position: relative; color:#df26a3; }
.thesplash a section p{font-size: 16px; font-weight: 400; position: relative;}
.thesplash a section h2{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 26px; font-weight: 700; color: #fff; text-align: center; border-radius: 5px; padding: 10px 25px; margin-top: 50px; position: relative; display: inline-block;}

.splash-front{text-align: left;}
.splash-front h1{color: #3b3837; text-align: left; margin-top: 50px; left: 50px;}
.splash-front p{color: #3b3837; text-align: left; padding-right: 570px; left: 53px;}
.splash-front h2{background: #ff5cca; margin-left: 52px;}
.splash-front h2:hover{background: rgba(0, 0, 0, 0.15);}

.splash-photos{text-align: right;}
.splash-photos h1{color: #fff; text-align: right; margin-top: 50px; right: 50px;}
.splash-photos p{color: #555; text-align: right; padding-left: 580px; right: 53px;}
.splash-photos h2{background: #ff5cca; margin-right: 52px;}
.splash-photos h2:hover{background: rgba(255, 255, 255, 0.15);}

.splash-videos{text-align: right;}
.splash-videos h1{color: #3b3837; text-align: right; margin-top: 50px; right: 50px;}
.splash-videos p{color: #666; text-align: right; padding-left: 580px; right: 53px;}
.splash-videos h2{background: #ff5cca; margin-right: 52px;}
.splash-videos h2:hover{background: rgba(0, 0, 0, 0.15);}

.splash-candids{text-align: right;}
.splash-candids h1{color: #fff; text-align: right; margin-top: 50px; right: 50px;}
.splash-candids p{color: #555; text-align: right; padding-left: 580px; right: 53px;}
.splash-candids h2{background: #ff5cca; margin-right: 52px;}
.splash-candids h2:hover{background: rgba(255, 255, 255, 0.15);}

.splash-camshows{text-align: left;}
.splash-camshows h1{color: #fff; text-align: left; margin-top: 50px; left: 50px;}
.splash-camshows p{color: #555; text-align: left; padding-right: 630px; left: 53px;}
.splash-camshows h2{background: #ff5cca; margin-left: 52px;}
.splash-camshows h2:hover{background: rgba(255, 255, 255, 0.15);}

.theupdates, .thepage{margin: 0 30px; position: relative;}
.theupdates > header, .thepage > header{padding: 32px 0; position: relative;}
.theupdates > header div, .thepage > header div{width: 32px; height: 32px; position: absolute; top: 32px; left: 0; overflow: hidden;}
.theupdates > header div img, .thepage > header div img{width: 32px; max-width: 32px; height: 256px; max-height: 256px; position: absolute; left: 0;}
.theupdates > header h1, .thepage > header h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 30px; font-weight: 700; color: #3b3837; text-align: left; text-transform: uppercase; line-height: 32px; letter-spacing: -1px; padding: 0 0 0 42px; position: relative;}
.theupdates > header > .pagebutton, .thepage > header > .pagebutton{background: #ff5cca; font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 18px; font-weight: 700; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; line-height: 42px; border-radius: 4px; padding: 0 18px; position: absolute; top: 27px; right: 0;}
.theupdates > header > .pagebutton:hover, .thepage > header > .pagebutton:hover{background: #65c3ff; color: #fff; text-decoration: none;}
.theupdates > ul{list-style-type: none; text-align: center; position: relative; }
.theupdates > ul li{max-width: 240px; position: relative; margin: 0 15px 20px 15px; display: inline-block;}
.theupdates > ul li a{text-decoration: none; position: relative; display: block;}
.theupdates > ul li a img{width: 100%; height: auto; border-radius: 2px; margin-bottom: 10px; position: relative; display: block;}
.theupdates > ul li a:hover img{opacity: 0.75;}
.theupdates > ul li a h1, .theupdates > ul li a h2{font-family: 'Roboto Condensed', Helvetica, Arial; font-weight: 700; text-align: left; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.theupdates > ul li a h1{font-size: 18px; color: #3b3837; line-height: 20px;}
.theupdates > ul li a:hover h1{color: #65c3ff;}
.theupdates > ul li a h2{font-size: 14px; color: #95938f; line-height: 16px; margin-bottom: 12px;}
.theupdates > ul li a h2 span{color: #ccc9c2;}
.theupdates > ul li a p{height: 30px; font-size: 12px; font-weight: 400; color: #7c7a75; text-align: left; line-height: 15px; position: relative; overflow: hidden; text-overflow: ellipsis;}

.thefront{background: #eae9e6; min-height: 530px; border-radius: 7px; padding: 30px;}
.theschedule{background: #fff; width: 20%; height: 90%; border-radius: 5px; position: absolute; top: 30px; left: 30px; overflow: hidden;}
.thesamples{background: #fff; width: 72%; height: 90%; border-radius: 5px; position: absolute; top: 30px; right: 30px; overflow: hidden;}
.theschedule > header, .thesamples > header{border-bottom: 1px solid #eae9e6; padding: 12px 20px; position: relative;}
.theschedule > header h1, .thesamples > header h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 21px; font-weight: 700; color: #3b3837; line-height: 24px; letter-spacing: -0.5px; position: relative;}
.theschedule > header h1{text-align: center;}
.thesamples > header h1{text-align: left;}
.theschedule > footer, .thesamples > ul{position: relative;}
.thesamples > ul{list-style-type: none; text-align: center; padding: 20px 0 0 0;}
.thesamples > ul li{width: 30%; margin: 0 6px 14px 6px; position: relative; display: inline-block;}
.thesamples > ul li a{text-decoration: none; position: relative; display: block;}
.thesamples > ul li a img{width: 100%; height: auto; border-radius: 2px; margin-bottom: 6px; position: relative; display: block;}
.thesamples > ul li a h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 16px; font-weight: 700; color: #3b3837; text-align: left; line-height: 18px; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.thesamples > ul li a:hover h1{color: #65c3ff;}
.thesamples > ul li a p{height: 26px; font-size: 11px; font-weight: 400; color: #7c7a75; text-align: left; line-height: 13px; position: relative; overflow: hidden; text-overflow: ellipsis;}
.theschedule > footer{text-align: center;}
.theschedule > footer > div{margin: 15px auto 0 auto; display: inline-block;}

/** CAMSHOWS PAGE **/
.thecamshows{text-align: center; position: relative;}
.thecamshows > a{width: 47%; text-decoration: none; border-radius: 7px; margin: 0 12px; position: relative; display: inline-block; overflow: hidden;}
.thecamshows > a:hover{opacity: 0.5;}
.thecamshows > a img{width: 100%; height: auto; position: relative; display: block;}

/** JOIN PAGE **/
.thejoin{position: relative;}
.thejoin > img{width: 100%; height: auto; position: relative; display: block;}
.thejoin > form{text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.13); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); padding: 18px 0; position: relative;}
.thejoin > form input{background: #ffc55a; width: 30%; font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 32px; font-weight: 700; color: #fff; text-align: center; border: 0; border-radius: 5px; padding: 15px 20px; margin: 0 10px; position: relative; display: inline-block; cursor: pointer;}
.thejoin > form input:hover{background: #3b3837;}
.thejoin > section{background: #eae9e6; padding: 15px 30px 0 30px; position: relative;}
.thejoin > section > h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 48px; font-weight: 700; color: #bcbab5; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 #fff; letter-spacing: -1px; margin-bottom: 20px; position: relative;}
.thejoin > section > ul{list-style-type: none; border-top: 1px dashed rgba(0, 0, 0, 0.15); padding-top: 25px; position: relative;}
.thejoin > section > ul li{background: #fff; width: 30%; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.075); margin: 0 10px 18px 10px; position: relative; display: inline-block;}
.thejoin > section > ul li header{padding: 10px; position: relative;}
.thejoin > section > ul li header img{width: 100%; height: auto; border-radius: 3px; position: relative; display: block;}
.thejoin > section > ul li footer{padding: 0 10px 15px 10px; position: relative;}
.thejoin > section > ul li footer h1{font-family: 'Roboto Condensed', Helvetica, Arial; font-size: 21px; font-weight: 700; color: #3b3837; text-align: center; position: relative;}
.thejoin > section > ul li footer p{height: 32px; font-size: 13px; font-weight: 400; color: #7c7a75; text-align: center; line-height: 16px; position: relative;}

/** MOBILE **/
.m-theheader{background: #ff5cca; width: 100%; height: 50px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.13); position: fixed; top: 0; left: 0; z-index: 9998; display: none;}
.m-thelogo{width: 116px; height: 20px; text-decoration: none; position: absolute; top: 15px; left: 15px;}
.m-thelogo > img{width: 100%; height: auto; position: relative; display: block;}

.m-menubutton{width: 50px; height: 50px; text-decoration: none; position: absolute; top: 0; right: 0; cursor: pointer; overflow: hidden;}
.m-menubutton img{width: 100px; max-width: 100px; height: 50px; max-height: 50px; position: absolute; top: 0;}

.close-menu{display: none;}
.open-menu img{left: 0;}
.close-menu img{left: -50px;}

/* sidebar menu */
.m-thesidemenu{background: #615d5b; width: 80%; height: 100%; position: fixed; top: 0; left: 100%; overflow-x: hidden; overflow-y: auto; display: none;}

.m-thesidemenu > header{background: rgba(255, 255, 255, 0.075); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.22); padding: 8px 15px; position: relative;}
.m-thesidemenu > header > h1{font-size: 18px; font-weight: 500; color: #fff; text-align: left; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15); letter-spacing: -1px; position: relative;}

.m-theloggedin > div{background: rgba(255, 255, 255, 0.1); height: 36px; text-align: left; border-radius: 4px; margin-bottom: 10px; position: relative;}
.m-theloggedin > div > h1, .m-theloggedin > div > h2{font-size: 18px; font-weight: 500; color: #fff; text-align: right; line-height: 36px; padding: 0 10px; position: absolute; top: 0;}
.m-theloggedin > div > h1{left: 0;}
.m-theloggedin > div > h2{right: 0;}
.m-theloggedin > a{background: rgba(255, 255, 255, 0.25); font-size: 18px; font-weight: 500; color: #fff; text-align: left; text-decoration: none; line-height: 36px; border-radius: 4px; padding: 1px 10px 0 10px; position: relative; display: block;}

.m-thesidemenu ul{list-style-type: none; position: relative;}
.m-thesidemenu ul li{border-bottom: 1px solid rgba(0, 0, 0, 0.15); position: relative;}
.m-thesidemenu ul li a{height: 50px; text-decoration: none; position: relative; display: block; overflow: hidden; opacity: 0.5;}
.m-thesidemenu ul li a:hover{text-decoration: none; opacity: 1;}
.m-thesidemenu ul li a img{width: 50px; max-width: 50px; height: 550px; max-height: 550px; position: absolute; left: 0;}
.m-thesidemenu ul li a h1{font-size: 18px; font-weight: 500; color: #fff; text-align: left; line-height: 50px; padding: 0 0 0 52px; position: relative;}
.side-joinbutton{background: #b3bd17; opacity: 1 !important;}
.side-joinbutton:hover{background: rgba(0, 0, 0, 0.2);}
.side-joinbutton h1{padding: 0 15px !important;}

.m-thesidemenu footer{padding: 15px 20px; position: relative;}
.m-thesidemenu footer p{font-family: 'Roboto', Helvetica, Arial; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-align: left; position: relative;}

/** ICONS **/
.i-updates{top: 0;}
.i-zips{top: -32px;}
.i-gfs{top: -64px;}
.i-photos{top: -96px;}
.i-videos{top: -128px;}
.i-cam{top: -160px;}
.i-archive{top: -192px;}
.i-collection{top: -224px;}

.mi-home{top: 0;}
.mi-photos{top: -50px;}
.mi-videos{top: -100px;}
.mi-camshows{top: -150px;}
.mi-archives{top: -200px;}
.mi-store{top: -250px;}
.mi-ultimate{top: -300px;}
.mi-2257{top: -350px;}
.mi-support{top: -400px;}
.mi-sites{top: -450px;}
.mi-mem{top: -500px;}

/** TRANSITIONS **/
a,
h1,
h2,
input,
.thescrollhead,
.thescrolllogo,
.pagebutton,
.theupdates > ul li a img,
.theupdates > ul li a h1{
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	-ms-transition: all 0.25s ease-out;
	-o-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.thelogo { font-size:26px; }
.thescrolllogo { font-size:26px; }
.m-thelogo { font-size:18px; }

.thelogo, .thescrolllogo, .m-thelogo 
{
    text-shadow: 2px 2px 0px rgba(0,0,0,0.15);   
    font-family:Palatino, Times New Roman, Arial Narrow, Arial, sans-serif;
    /*font-family:Helvetica Neue, Helvetica, Arial, sans-serif;*/
    text-transform:uppercase;
    letter-spacing: -1px;
    color:white;
}