/* 
orange: F25E35; pebble(gry): 515153

border: 1px solid red;
*/

@font-face {
    font-family: 'bungee_regularregular';
    src: url('../fonts/bungee-regular-webfont.woff2') format('woff2'),
         url('../fonts/bungee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bungeehairline';
    src: url('../fonts/bungee-hairline-webfont.woff2') format('woff2'),
         url('../fonts/bungee-hairline-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bungeeoutline';
    src: url('../fonts/bungee-outline-webfont.woff2') format('woff2'),
         url('../fonts/bungee-outline-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'bungee_layers_rotatedinline';
    src: url('../fonts/bungeelayersrotated-inline-webfont.woff2') format('woff2'),
         url('../fonts/bungeelayersrotated-inline-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

h1 {
	font-family: bungee_regularregular;
	font-size: 3.5em;
    line-height: 1em;
	color: #F25E35;
    color: #000;
	}
h2 {
	margin-top: 1.5em;
	margin-bottom: -.5em;
	font-family: bungeehairline;
	font-family: bungee_regularregular;
	font-size: 2em;
	line-height: 1.25em;
	}
h3 {
	margin-top: 2em;
	margin-bottom: -.6em;
	font-family: bungeeoutline;
	font-size: 3em;
	line-height: 1.25em;
	color: #F25E35;
	}
h4 {
	margin-top: 2em;
	margin-bottom: -.6em;
	font-family: bungee_layers_rotatedinline;
	font-size: 1.1em;
	line-height: 1.25em;
	}
h6 {
	font-size: .25em;
	}
p, .ins #content li {
	font-family: arial;
	font-size: 1em;
	font-size: 1.5em;
	line-height: 1.75em;
	line-height: 1.5em;
	}

#content, .ins #content {
	padding: 0 100px;
	}
#content a {
	font-family: arial;
	color: #000;
	text-decoration: none;
	border-bottom: 1px dotted #F25E35;
	}
#content a:hover {
	color: #F25E35;
	border-bottom:0;
	}
	
#content a.bttn {
	text-decoration: none;
	font-size: 1em;
	background-color: #d7974c;/*mus*/
	border-radius: 8px;
	color: #fff;
	padding: 15px;
	background: linear-gradient(0deg, #d7974c 0%, #be8b4f 100%);
	box-shadow: 5px 5px 5px hsla(0, 0%, 26%, .8);
	text-shadow: 0 1px 0 #000;
	}
#content a.bttn:hover {
	margin-left: 5px;
	color: #fff;
	background: linear-gradient(90deg, #be8b4f 0%, #d7974c 100%);
	box-shadow: 0px 0px 5px hsla(0, 0%, 26%, .8);
	}
	
#content .credit {
	font-size: .5em;
	}
#content .nibb, #content .coreInfo .nibb { /*No Image Border Bottom*/
	border-bottom: 0;
	}
	
#insMenuBg {/*menuGraphic*/
	width: 100%;
	height: 195px;
	margin-top: 100px;
	margin-top: 0;
    background: #fff;
	background-image: url(../img/.svg);
	background-repeat: no-repeat;
	background-position: right;
	}
#menu a {
	font-family: bungeehairline;
	text-transform: uppercase;
	}

.ins h1 {
	}
.ins p {
	width: 70%;
	}
/*.ins #hmLogo p {
    margin: 0;
    text-align: center;
    border: 5px solid red;
	}*/
.ins footer a {
    color: #000;
	}
.ins footer p {
	width: 100%;
	margin-top: 5em;
	margin-left: 0;
	padding: 20px;
	text-align: left;
	font-size: .75em;
	}
.highlight {
	font-size: 1.25em;
	color: #2582a2; /*bl*/
	}
.spaftSm {
	margin-bottom: 2em;
	}
.spaftMd {
	margin-bottom: 3em;
	}
.spaftLg {
	margin-bottom: 4em;
	}
.spaftXL {
	margin-bottom: 5em;
	}
.spaftXXL {
	margin-bottom: 6em;
	}
.spaftXXXL {
	margin-bottom: 7em;
	}
	
img[alt^="SM-"] {
	width: 16px;
	}
img[alt="logo-ladder swagger"] {
	width: 50%;
	vertical-align: middle;
	}
img[alt="logo-small USC"] {
	width: 50%;
	margin-left: 25%;
	}
img[alt="logo-USC"] {
	width: 75%;
	margin-left: 0;
	vertical-align: middle;
	}


/*** ABOUT ***/
.about h2 {
    margin-top: 3em;
    line-height: 1em;
	color: #F25E35;
    color: #000;
	}
.about #blockB img.horz {
    width: 100%;
    }
.about #blockC img.horz {
    width: 100%;
	}
.about #blockC img.vert {
    width: 75%;
	}
#brialluminate {
    width: 100%;
    padding: 30px;
    background: #515153;/*pebble*/
    }
#brialluminate h2 {
    margin: 0;
    color: #F25E35;/*orn*/
    }
#brialluminate p {
    color: #fff;
    }


/*** CONTACT ***/
.TTWForm-container {
    width: 80%;
	}

#ls_form {
    display: grid;
    padding: 40px 20px 250px 20px;
    grid-template-columns: auto 1fr;
    gap: 8px;
    width: 75%;
    color: #fff;
    background: url(../img/v-shaped-wedge.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }

#ls_form label {
    text-align: right;
    margin-bottom: 10px;
    padding-right: 8px;
    }

#ls_form input, 
#ls_form select, 
#ls_form textarea {
    width: 75%;
    margin-bottom: 10px;
    }

#ls_form button {
    width: 25%;
    font-size: 1em;
    color: #fff;
    background: #F25E35;/*orn*/
    }


/*** HOME ***/
.home #hmLogo p {
    margin-left: 15%;
	}
.home h1 {
	width: 100%;
	text-align: center;
	}
.home p {
	width: 70%;
	margin-left: 15%;
	font-size: 1.25em;
	text-align: center;
	}
.home #content { 
	padding-bottom: 100px;
	}
.home #content .credit {
	margin-top: -4em;
	font-size: .5em;
	text-align: right;
	}

.home .fixedBg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	}
.home #blockA {
    width: 100%;
    height: 716px;
	margin-top: 2em;
	}
.home #blockA .left {
    width: 50%;
    float: left;
	}
.home #blockA .right {
    width: 50%;
    float: right;
	}
.home #blockA p {
    font-size: 2.5em;
	}
.home #blockA img {
    width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	}
.home #blockB {
    clear: both;
    margin-top: -5em;
	}
.home #blockB h2 {
    width: 40%;
    padding: 20px;
    font-family: arial;
    font-style: italic;
    line-height: 2em;
    line-height: 1.5em;
    color: #fff;
    text-shadow: 0 4px 2px hsla(140, 3%, 26%, .4);
	}
.home .bg1 {
	background-image: url(../img/hm-man-carrying-ladder.jpg);
	height: 250px;
    height: 500px;
	margin-top: 1rem;
	}
.home #blockC {
    clear: both;
    margin-top: -38px;
    background: #F25E35;
	}
.home #blockC h1 {
	padding-top: 1em;
    color: #fff;
	}
.home #blockC ul {
    padding-bottom: 50px;
	}
.home #blockC li {
    width: 70%;
    margin-left: 13%;
    list-style: none;
    padding-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
	}
.home .bg2 {
	background-image: url(../img/v-shaped-wedge.jpg);
	height: 250px;
    height: 500px;
	margin-top: 1rem;
	}
.home #blockD {
    margin-top: -38px;
	}
.home #blockD h1 {
	padding-top: 1em;
    color: #fff;
	}
.home #blockD li {
    width: 70%;
    margin-left: 13%;
    list-style: none;
    padding-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
    color: #fff;
	}
.home #blockD p {
    font-size: 1.5em;
    color: #fff;
	}
.home #blockE {
	}
.home #blockE h3 {
    font-size: 5em;
	}
.home .bg3 {
	background-image: url(../img/photo-collective-toetappers.jpg);
	height: 250px;
	margin-top: 1rem;
	}
.home .credit {
	padding-top: 0;
	color: #000;
	}
.home .inlinePic, .home .inlineCredit {
	display: none;
	}
.home footer a {
    color: #000;
	}
.home .footer p {
	width: 100%;
	margin-left: 0;
	padding: 20px;
	text-align: left;
	font-size: .5em;
	}
#fbfeed {
	display: flex;
	justify-content: center;
	margin-top: 5em;
	}
.home img[alt="logo-ladder swagger"] {
	width: 71%;
	/*max-width: 953px;*/
	}


/*** HOW TO ***/
.howToUse #blockC img {
    width: 75%;
	}


@media screen 
and (min-width : 1024px) 
and (max-width : 1150px) {
    .home #blockB {
        margin-top: -25em;
        }
    .home #blockB h2 {
        width: 70%;
        font-size: 2em;
        padding: 20px;
        }
    .home .bg1 {
        background-position: -2100px -550px;
        }
}

@media screen 
and (min-width : 768px) 
and (max-width : 1023px) {
    .home #blockB {
        margin-top: -25em;
        }
    .home #blockB h2 {
        width: 100%;
        font-size: 1.5em;
        padding: 20px;
        }
    .home .bg1 {
        background-position: -2200px -900px;
        }
    .home #blockD {
        height: 600px;
        }
    .home #blockE h3 {
        font-size: 4em;
        }
    
}


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

        
    /*** CONTACT ***/
    #ls_form {
        padding: 40px 20px 200px 20px;
        width: 100%;
        background-size: cover;
        background-position: -200px 0px;
        }
    #ls_form input, 
    #ls_form select, 
    #ls_form textarea {
        width: 100%;
        }
    #ls_form button {
        width: 50%;
        }
        
    /*** HOME ***/
    .home #blockA {
        margin-top: -2em;
        }
    .home #blockB {
        margin-top: -25em;
        }
    .home #blockB h2 {
        width: 100%;
        font-size: 1.5em;
        padding: 20px;
        }
    .home .bg1 {
        background-position: -2200px -900px;
        }
    .home #blockD {
        height: 800px;
        }
    .home #blockE h3 {
        font-size: 3em;
        }
    }

    @media screen 
    and (min-width : 320px) 
    and (max-width : 649px) {
    a.ticketLogo {
        display: block;
        width: 258px;
        height: 134px;
        background-image: url(../img/usc-logo-bnnr.png);
        background-repeat: no-repeat;
        position: absolute;
        top: 30px;
        left: 75px;
    }
    #insMenuBg {
        width: 100%;
        height: 195px;
        margin-top: 0;
        background: #fff;
        background-image: url(../img/.svg);
        background-repeat: no-repeat;
        background-position: right 160px;
        }
    .contact #insMenuBg { /*logo/cat in bnnr*/
        background-position: 50% 30px;
        }
    .events #insMenuBg { /*logo/cat in bnnr*/
        background-position: 30% 10px;
        }
    .safety #insMenuBg { /*logo/cat in bnnr*/
        background-position: -15px 160px;
        }
    .success #insMenuBg { /*logo/cat in bnnr*/
        background-position: 50% 30px;
        }
    .team #insMenuBg { /*logo/cat in bnnr*/
        background-position: 25% 160px;
        }
    #uscLogoSm {
        position: relative;
        margin-top: -160px;
        opacity: 1;
        z-index: 1;
        }
    .ins h1 {
        width: 100%;
        margin: 0;
        margin-top: 50px;
        line-height: 1em;
        }
    .ins h2 {
        margin-bottom: -.6em;
        font-size: 1.75em;
        line-height: 1.25em;
        }
    .ins h3 {
        margin-top: 2em;
        margin-bottom: -.6em;
        font-size: 1.4em;
        font-weight: bold;
        line-height: 1.25em;
        }
    .ins p, .ins #content li {
        width: 100%;
        font-size: 1.15em;
        }
    .ins footer p {
        margin-top: 0;
        }

    #content, .ins #content {
        padding: 0 30px 200px 30px;
        background-size: 55%, 10%, 15%;
        background-position: left bottom, 50% bottom, 65% bottom;
        padding-bottom: 300px;
        }

    #content a.bttn {
        box-shadow: 0px 0px 0px hsla(0, 0%, 26%, .8);
        }
    #content a.bttn:hover {
        margin-left: 0;
        }
    .fixedBg {
        background-attachment: inherit;
        }
    img[alt="main photo-Uptown Swing Collective"] {
        width: 120%;
        margin: -10%;
        margin-top: 10px;
        margin-top: -60px;
        margin-bottom: 5px;
        }
    img[alt="logo-USC"] {
        display: none;
        }


    /*** CONTACT ***/
    .contact .TTWForm-container {
        width: 100%;
        }
    #ls_form {
        padding: 40px 20px 200px 20px;
        width: 100%;
        background-size: cover;
        background-position: -200px 0px;
        }
    #ls_form input, 
    #ls_form select, 
    #ls_form textarea {
        width: 100%;
        }
    #ls_form button {
        width: 50%;
        }

        
    /*** HOME ***/
    .home #blockA {
        width: 100%;
        height: 0;
        margin: 0;
        margin-top: -2em;
        padding: 0;
        }
    .home #blockA img {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        }
    .home #blockB h2 {
        width: 100%;
        font-size: 1.5em;
        padding: 20px;
        }
    .home .bg1 {
        background-image: url(../img/hm-man-carrying-ladder.jpg);
        background-size: cover;
        background-position: -2050px -800px;
        height: 500px;
        margin-top: 0;
        }
    .home #blockC li {
        width: 90%;
        margin-left: -5%;
        font-size: 1.25em;
        }
    .home .bg2 {
        background-image: url(../img/v-shaped-wedge.jpg);
        background-size: cover;
        /*background-position: -3050px -500px;*/
        background-position: -2580px -500px;
        height: 700px;
        margin-top: 1rem;
        }
    .home #blockD li {
        width: 90%;
        margin-left: -5%;
        padding-bottom: 20px;
        font-size: 1.25em;
        }
    .home #blockE h3 {
        font-size: 3em;
        }
    .home #content { 
        padding-bottom: 0;
        }


    /*** HOW TO ***/
    .howToUse #blockC video {
        width: 100%;
        }
    .howToUse #blockD {
        margin-bottom: 0;
        }
    }