/* ==== Google font ==== */
@import url('http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic');


body {
width: 100%;
height: 100%;
font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-weight: 300;
color: #666;
background-color: #fff;
}

html {
width: 100%;
height: 100%;
}

h1,
h2,
h4,
h5,
h6 {
margin: 0 0 30px;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}

h3 {
margin: 0 0 30px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
line-height: 1.3em;
color:#444;
}

h3 span {
display: block;
}

p {
margin: 0 0 20px;
font-size: 13px;
line-height: 1.6em;
}

p.lead {
font-weight: 600;
}

a {
color: #28c3ab;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

a:hover,
a:focus {
text-decoration: none;
color: #176e61;
}

.light {
font-weight: 400;
}


.clear {
clear:both;
width:100%;
}

.link a {
background: #000;
color: #FFF;
padding: 4px 8px;
font-size: 11px;
}

.link a:hover {
background: #639;
}

.link i {
margin: 0 5px 0 0;
}



/* ==================================================================================
--- navigation
====================================================================================== */


.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
font-family: 'Lato', Verdana;
}

.navbar-brand {
height: 40px;
padding: 5px 15px;
font-weight: 700;
}

.navbar-brand h1{
color: #fff;
line-height: 40px;
text-indent:-9999px;
background: url(../img/common/xs_logo_pc.png) no-repeat;
width:320px;
}

.navbar-custom.top-nav-collapse .navbar-brand h1 {
color: #fff;
line-height: 40px;
text-indent:-9999px;
background: url(../img/common/xs_logo_pcW.png) no-repeat;
-moz-background-size: 320px 40px; /* Firefox */
-webkit-background-size: 320px 40px; /* Safari,Chromeなど */
-o-background-size: 320px 40px;/* Opera */
-ms-background-size: 320px 40px; /* ie */
background-size: 320px 40px;
}


.navbar-brand:focus {
outline: 0;
}


.nav.navbar-nav {
/*background-color: rgba(255,255,255,.4);*/
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
font-size: 12px;
letter-spacing: 1px;
color: #444;
text-transform: uppercase;
font-weight: 700;
}

.navbar-custom ul.nav li a:hover {
color: #999;
}

.navbar-custom.top-nav-collapse ul.nav li a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
border-radius: 0;	
}

.navbar-custom ul.nav ul.dropdown-menu li {
border-bottom: 1px solid #f5f5f5;
}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
padding: 10px 5px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
background: #fefefe;
}



.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
color: #666;
}

.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}


.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus {
outline: 0;
}

.navbar-custom .nav li.active {
outline: 0;
color: #999;
}

.navbar-custom.top-nav-collapse .nav li a:hover,
.navbar-custom.top-nav-collapse .nav li a:focus,
.navbar-custom.top-nav-collapse .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}


.navbar-toggle {
padding: 4px 6px;
font-size: 14px;
color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}




/* === dafault color ================================================================= */

a,.tp-caption a.btn:hover {
color: #67b0d1;
}
.top-nav-collapse {
background: #000;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
color: #67b0d1;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
background-color: #67b0d1;
}

.widget-avatar .avatar:hover {
border: 5px solid #67b0d1;
}

.bg-skin {
background: #67b0d1;
}

form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
border-color: #67b0d1;
}

footer {
background-color: #000;
}

.btn-skin {
color: #fff;
background-color: #67b0d1;
border-color: #67b0d1;
}



/* ==================================================================================
--- loader
====================================================================================== */


/* loader */
#preloader {
background: #ffffff;
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 999;
}


#loaderInner {
background:#ffffff url(../img/spinner.gif) center center no-repeat;
height: 60px;
left: 50%;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
width: 60px;
}

@keyframes boxSpin{
0%{
transform: translate(-10px, 0px);
}
25%{
transform: translate(10px, 10px);
}
50%{
transform: translate(10px, -10px);
}
75%{
transform: translate(-10px, -10px);
}
100%{
transform: translate(-10px, 10px);
}
}


@keyframes shadowSpin{
0%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
25%{
box-shadow: 10px 10px #39CCCC, -10px -10px #FFDC00;
}
50%{
box-shadow: -10px 10px #39CCCC, 10px -10px #FFDC00;
}
75%{
box-shadow: -10px -10px #39CCCC, 10px 10px #FFDC00;
}
100%{
box-shadow: 10px -10px #39CCCC, -10px 10px #FFDC00;
}
}

#load {
z-index: 9999;
background-color: #FF4136;
opacity: 0.75;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin: -5px auto 0 auto;
left: 0;
right: 0;
border-radius: 0px;
border: 5px solid #FF4136;
box-shadow: 10px 0px #39CCCC, 10px 0px #01FF70;
animation: shadowSpin 1s ease-in-out infinite;
}

/* misc */
hr {
margin-top: 10px;
}

/* margins */
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}




/* ==============================================================================
--- General sections
================================================================================ */

.home-section {
padding-top: 80px;
padding-bottom: 80px;
display:block;
position:relative;
z-index:120;
}


.section-heading h2 {
font-size: 40px;
}
.section-heading h2 span {
display: block;
font-size: 12px;
color: #999;
margin: 15px 0 0;
}
.section-heading i {
margin-bottom: 20px;
}


#pagetitle {
background: url(../img/common/page_title_bg.png) no-repeat center #000;
margin:90px 0 0 0;
padding:50px 0 20px 35px;
}

#pagetitle h2 {
color:#DDD;
font-size: 24px;
}

#pagetitle h2 span {
font-size: 12px;
color: #666;
}




/* --- section bg var --- */

.bg-white {
background: #fff;
}

.bg-gray {
background: #f2f2f2;
}


.bg-dark {
background: #575757;
}

/* --- section color var --- */

.text-light {
color: #fff;
}





/* ==================================================================================
--- top banner
====================================================================================== */



.topBannerL {
width:49.7%;
overflow: hidden;
zoom:1;
float:left;
margin: 0 auto;
}
.topBannerR {
width:49.7%;
overflow: hidden;
zoom:1;
float:right;
margin: 0 auto;
}
.bn_about {
margin-bottom: 4px;
float: left;
width:100%;
}
.bn_admission {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_coach {
margin-bottom: 4px;
float:right;
width:49.4%;
}
.bn_twitter {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_support {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_result {
margin-bottom: 4px;
float:right;
width:49.4%;
}
.bn_facebook {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_member {
margin-bottom: 4px;
float: left;
width:100%;
}

.bn_about img,
.bn_member img {
width:100%;
}

.bn_admission img,
.bn_coach img,
.bn_twitter img,
.bn_support img,
.bn_result img,
.bn_facebook img {
width:100%;
}


.topBannerL a:hover img,
.topBannerR a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}



@media screen and (max-width: 991px) {
.topBannerL {
width:49.7%;
overflow: hidden;
zoom:1;
float:left;
margin: 0 auto;
}
.topBannerR {
width:49.7%;
overflow: hidden;
zoom:1;
float:right;
margin: 0 auto;
}
.bn_about {
margin-bottom: 4px;
float: left;
}
.bn_admission {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_coach {
margin-bottom: 4px;
float:right;
width:49.4%;
}
.bn_twitter {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_support {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_result {
margin-bottom: 4px;
float:right;
width:49.4%;
}
.bn_facebook {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_member {
margin-bottom: 4px;
float: left;
}
.bn_about img,
.bn_member img {
width:100%;
}

.bn_admission img,
.bn_coach img,
.bn_twitter img,
.bn_support img,
.bn_result img,
.bn_facebook img {
width:100%;
}
}

@media (max-width:768px) {
.topBannerL {
overflow: hidden;
zoom:1;
float:none;
margin: 0 auto;
width:80%;
}
.topBannerR {
overflow: hidden;
zoom:1;
float:none;
margin: 0 auto;
width:80%;
}
.bn_support {
margin-bottom: 4px;
float: right;
width:49.4%;
}
.bn_result {
margin-bottom: 4px;
float:left;
width:49.4%;
}
.bn_facebook {
margin-bottom: 4px;
float: right;
width:49.4%;
}
}

@media (max-width:480px) {
.topBannerL {
width:94%;
overflow: hidden;
zoom:1;
float:none;
margin: 0 auto;
}
.topBannerR {
width:94%;
overflow: hidden;
zoom:1;
float:none;
margin: 0 auto;
}
.bn_about {
margin-bottom: 4px;
float: left;
}
.bn_admission {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_coach {
margin-bottom: 4px;
float:right;
width:49.4%;
}
.bn_twitter {
margin-bottom: 4px;
float: left;
width:49.4%;
}
.bn_support {
margin-bottom: 4px;
float: right;
width:49.4%;
}
.bn_result {
margin-bottom: 4px;
float:left;
width:49.4%;
}
.bn_facebook {
margin-bottom: 4px;
float: right;
width:49.4%;
}
.bn_member {
margin-bottom: 4px;
float: left;
}
.bn_about img,
.bn_member img {
width:100%;
}

.bn_admission img,
.bn_coach img,
.bn_twitter img,
.bn_support img,
.bn_result img,
.bn_facebook img {
width:100%;
}

}



/* ==================================================================================
--- Intro
====================================================================================== */

.intro {
width:100%;
position:relative;	
background: url(../img/top/banner_main_bg.jpg) no-repeat top center;
font-family: 'Lato', Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

#intro.intro {
padding:250px 0 0 0;
margin:90px 0 0 0;
height: 650px;
}

.intro .slogan {
text-align: center;
}

.intro .page-scroll {
text-align: center;
}

.brand-heading {
font-size: 40px;
}

.intro-text {
font-size: 18px;
}

.intro .slogan h2 {
color: #FFF;
text-shadow: none;
font-size: 60px;
line-height: 60px;
font-weight: 700;
font-family: Montserrat, sans-serif;
background-color: rgba(0, 0, 0, 0);
text-decoration: none;
text-transform: uppercase;
border-width: 0px;
border-color: #000;
border-style: none;
text-shadow: -1px 0 1px #000;
}

.intro .slogan h4 {
color: #fff;
text-shadow: -1px 1px 1px #000;
}

.intro .slogan h4 span {

}


/* ============================================================================================
--- About
============================================================================================== */


#about_xs {
text-align: left;
}

#poolpark {
background: url(../img/about/page_bg.jpg) no-repeat bottom center;
background-size: cover;
padding-bottom:280px;
zoom:1;
overflow: hidden;
text-align: left;
}

#poolpark img {
width: 90%;
text-align: left;
}

.boxed-grey {
background: #f9f9f9;
padding: 20px;
}

.what_xtream_s {
background: #f9f9f9;
padding: 20px 20px 0;
}

.what_xtream_s img {
width: 90%;
margin: 5px 0 10px;
}


#xs_media,
#hs_league,
#about_skids {
text-align: center;
}

#xs_media h2,
#hs_league h2,
#about_skids h2 {
font-size: 28px;
}

#xs_media p,
#hs_league p,
#about_skids p {
text-align:left;
}

#xs_media img,
#hs_league img,
#about_skids img {
width: 100%;
margin: 0 0 20px;
}





/* ============================================================================================
--- Member
============================================================================================== */


#member {
/*
background: url(../img/member/page_bg.jpg) no-repeat bottom center;
background-size: cover;
padding-bottom:280px;
*/
zoom:1;
overflow: hidden;
text-align: left;
}


table.brwsr1 {
font-size: 13px;
margin: 0 0 80px;
border-collapse: separate;
border-spacing: 0px 1px;
width: 100%;
}

table.brwsr1 th {
padding: 12px;
vertical-align: middle;
border-bottom: #999 1px solid;
color: #fff;
}

table.brwsr1 td {
padding: 12px;
vertical-align: middle;
border-bottom: #999 1px solid;
font-size: 13px;
text-align: center;
color:#FFF;
}

table.brwsr1 th.r1 {
width: 15%;
border-right: #999 1px solid;
background: #447791;
text-align: center;
}

table.brwsr1 th.r2,
table.brwsr1 td.r2 {
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #5893b1;
}

table.brwsr1 th.r2,
table.brwsr1 th.r3,
table.brwsr1 th.r4,
table.brwsr1 th.r5 {
text-align: center;
width: 20%;
}

table.brwsr1 th.r3,
table.brwsr1 td.r3 {
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #7cacc2;
}

table.brwsr1 th.r4,
table.brwsr1 td.r4 {
border-left: #fff 1px solid;
background: #a0c2d3;
}

table.brwsr1 th.r5,
table.brwsr1 td.r5 {
border-left: #fff 1px solid;
background: #9AB6C7;
}


ul#n_highshool {
margin: 0 0 50px;
padding:0;
overflow: hidden;
zoom:1;
}

ul#n_highshool li {
list-style: none;
width: 25%;
border-left: #fff 1px solid;
border-right: #ccc 1px solid;
border-bottom: #ccc 1px solid;
background: #FFF;
opacity:0.9;
padding: 6px 15px;
float: left;
font-size: 12px;
}






/* ============================================================================================
--- Support
============================================================================================== */


#support {
background: url(../img/support/page_bg.jpg) no-repeat bottom center #f2f2f2;
background-size: cover;
padding-bottom:280px;
zoom:1;
overflow: hidden;
text-align: left;
}


table.brwsr2 {
font-size: 13px;
margin: 0 0 30px;
border-collapse: separate;
border-spacing: 0px 1px;
width: 100%;
}

table.brwsr2 th {
padding: 12px;
vertical-align: middle;
border-bottom: #999 1px solid;
color: #fff;
}

table.brwsr2 td {
padding: 13px;
vertical-align: middle;
border-bottom: #999 1px solid;
font-size: 12px;
text-align: center;
color:#FFF;
}

table.brwsr2 th.sr1 {
width: 25%;
border-right: #999 1px solid;
background: #447791;
text-align: center;
}


table.brwsr2 td.sr2 {
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #FFF;
color: #666;
text-align: left;
}








/* ============================================================================================
--- Result
============================================================================================== */


#result {
/*	
background: url(../img/result/page_bg.jpg) no-repeat bottom center #f2f2f2;
background-size: cover;
padding-bottom:280px;
*/
zoom:1;
overflow: hidden;
text-align: left;
}

#result h3.year {
padding: 8px 15px;
background: #000;
color: #FFF;
font-weight: 700;
width: 150px;
text-align: center;
font-size: 17px;
}


table.brwsr3 {
font-size: 12px;
margin: 0 0 50px;
border-collapse: separate;
border-spacing: 0px 1px;
width: 100%;
}

table.brwsr3 th {
padding: 12px;
vertical-align: middle;
border-bottom: #999 1px solid;
color: #fff;
}

table.brwsr3 td {
padding: 12px;
vertical-align: middle;
border-bottom: #999 1px solid;
font-size: 12px;
text-align: center;
color:#FFF;
}

table.brwsr3 th.rsl1 {
width: 25%;
border-right: #999 1px solid;
background: #447791;
text-align: center;
}


table.brwsr3 td.sr2 {
border-left: #fff 1px solid;
border-right: #999 1px solid;
background: #FFF;
color: #666;
}








/* ============================================================================================
--- coach
============================================================================================== */


#coach {
background: url(../img/coach/page_bg.jpg) no-repeat bottom center #f2f2f2;
background-size: cover;
}

.coach_infoBox {
overflow: hidden;
zoom:1;
margin: 0 0 80px;
}


#coach dl.coachinfo {
width: 31.5%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
height: 460px;
}

#coach dl.coachinfo dt {
overflow: hidden;
zoom:1;
margin: 0 0 10px;
color:#000;
font-size: 18px;
}

span.coachName {
display: block;
font-size: 12px;
}

#coach dl.coachinfo dt img {
width: 30px;
margin: 0 0 10px 5px;
float: right;
}

#coach dl.coachinfo dd.coachPhoto img {
width:100%;
margin: 0 0 15px;
}

#coach dl.coachinfo dd {
font-size: 12px;
color:#000;
}

#coach dl.coachinfo dd.coachTxt {

}

#coach_category {
margin: 20px 0 10px;
float: right;
width: 440px;
overflow: hidden;
zoom:1;
}

#coach_category li {
text-align: left;
float: left;
list-style: none;
color: #000;
font-weight: 700;
font-size: 13px;
margin: 0 15px 0 0;
}

#coach_category img {
width: 30px;
margin: 0 8px 0 0;
}




/* ============================================================================================
--- Admission
============================================================================================ */



#admission {
zoom:1;
overflow: hidden;
text-align: left;
}


#admission dl {
width: 31.5%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#admission dl dt {
overflow: hidden;
zoom:1;
margin: 0 0 10px;
color:#000;
font-size: 18px;
}

#admission dl dt img {
width: 100%;
}

#admission dl dd {
font-size: 12px;
color:#000;
margin: 15px 0 0;
min-height: 100px;
}

#admission dl dd.link {
min-height: 20px;
}


/* ============================================================================================
--- Contact
============================================================================================ */

/*
#contact {
background: url(../img/top/contact_bg.jpg) no-repeat top center;
background-size: cover;
}
#contact .contact_txtarea {
background: #FFF;
padding: 40px 0;
}
*/


.widget-contact {
text-align: center;
}




.company-social {
margin-left: 0;
padding-left: 0;
margin-top: 10px;
}


.company-social li{
display: inline-block;
margin:0 !important;
padding:0;
}


.company-social a{
margin:0;
padding:0;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #3bbec0;
color: #fff;
-webkit-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.company-social a i{
text-align: center;
margin:0;
padding:0;
}
.company-social .social-facebook a{background: #3873ae;}
.company-social .social-twitter a{background: #62c6f8;}
.company-social .social-facebook a:hover{background: #4893ce;}
.company-social .social-twitter a:hover{background: #82e6ff;}



/* ============================================================================================
--- Footer
============================================================================================ */

footer {
text-align: center;
padding: 20px 0;

}

footer p {
color: #f8f8f8;
}

footer .copyright {
font-size: 0.8em;
}




/* ============================================================================================
--- Elements
============================================================================================ */

.btn {
border-radius: 0;
text-transform: uppercase;
font-family: Montserrat,sans-serif;
font-weight: 400;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}


.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid #fff;
border-radius: 50%;
font-size: 40px;
color: #fff;
background: 0 0;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}

.btn-circle.btn-dark {
border: 2px solid #666;
color: #666;
}


.btn-circle:hover,
.btn-circle:focus {
outline: 0;
color: #fff;
background: rgba(255,255,255,.1);
}

.btn-circle.btn-dark :hover,
.btn-circle.btn-dark :focus {
outline: 0;
color: #999;
background: #fff;
}

.btn-circle.btn-dark :hover i,
.btn-circle.btn-dark :focus i{
color: #999;
}

.page-scroll .btn-circle i.animated {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}

.page-scroll .btn-circle:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {    
0 {
-webkit-transform: scale(1);
transform: scale(1);
}

50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

@-moz-keyframes pulse {    
0 {
-moz-transform: scale(1);
transform: scale(1);
}

50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}

100% {
-moz-transform: scale(1);
transform: scale(1);
}
}


#text {
color: #fff;
background: #ffcc00;
}

#map {
height: 500px;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
color: #fff;
background-color: #666;
border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
border: 1px solid #28c3ab;
outline: 0;
color: #000;
background-color: #28c3ab;
}

.btn-huge {
padding: 25px;
font-size: 26px;
}

.banner-social-buttons {
margin-top: 0;
}


/* Media queries */

@media(min-width:767px) {

.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
padding: 0;
background-color: #000;
}

.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}

.intro {
height: 100%;
padding: 0;
}

.brand-heading {
font-size: 100px;
}


.intro-text {
font-size: 25px;
}



}


@media (max-width:992px) {

.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: rgba(0,0,0,.9);
}

.navbar-custom ul.nav li a {
font-size: 12px;
letter-spacing: 1px;
color: #FFF;
text-transform: uppercase;
font-weight: 700;
}

.navbar-brand h1{
background: url(../img/common/xs_logo_pcW.png) no-repeat;
}

.navbar-custom.top-nav-collapse .navbar-brand h1 {
background: url(../img/common/xs_logo_pcW.png) no-repeat;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
border-bottom: none;
}


#intro.intro {
padding:250px 0 0 0;
margin:0 0 0 0;
height: 650px;
}

#pagetitle {
background: url(../img/common/page_title_bg.png) no-repeat center #000;
margin:87px 0 0 0;
padding:50px 0 20px 45px;
}

#coach dl.coachinfo {
width: 46.5%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
height: 460px;
}


ul#n_highshool li {
list-style: none;
width: 33.3333%;
border-left: #fff 1px solid;
border-right: #ccc 1px solid;
border-bottom: #ccc 1px solid;
background: #FFF;
opacity:0.9;
padding: 6px 15px;
float: left;
font-size: 12px;
}


#admission dl {
width: 30.5%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#admission dl dd {
font-size: 12px;
color:#000;
margin: 15px 0 0;
min-height: 140px;
}

}




@media (max-width:768px) {

.team.boxed-grey {
margin-bottom: 30px;
}

.boxed-grey {
margin-bottom: 30px;
}

#pagetitle {
background: url(../img/common/page_title_bg.png) no-repeat -48% 0 #000;
-moz-background-size:1260px 80px; /* Firefox */
-webkit-background-size:1260px 80px; /* Safari,Chromeなど */
-o-background-size: 1260px 80px;/* Opera */
-ms-background-size: 1260px 80px; /* ie */
background-size: 1260px 80px;
margin:50px 0 0 0;
padding: 30px 0 0 20px;
}

#pagetitle h2 {
color:#DDD;
font-size: 16px;
}

#pagetitle h2 span {
font-size: 10px;
margin: 10px 0 0;
}

h3 span {
display: inline-block;
}

.what_xtream_s img {
width: 70%;
margin: 5px 0 10px;
display:block;
}

#xs_media h2,
#hs_league h2,
#about_skids h2 {
font-size: 24px;
}

ul#n_highshool li {
list-style: none;
width: 50%;
border-left: #fff 1px solid;
border-right: #ccc 1px solid;
border-bottom: #ccc 1px solid;
background: #FFF;
opacity:0.9;
padding: 6px 15px;
float: left;
font-size: 12px;
}


#coach_category {
margin: 0 0 30px;
float: right;
width: 100%;
overflow: hidden;
zoom:1;
}

#coach_category li {
text-align: left;
float: left;
list-style: none;
color: #000;
font-weight: 700;
font-size: 13px;
margin: 0 15px 0 0;
}

#coach_category img {
width: 26px;
margin: 0 8px 0 0;
}



#admission dl {
width: 45.5%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#admission dl dd {
font-size: 12px;
color:#000;
margin: 15px 0 0;
min-height: 120px;
}

}



@media (max-width:480px) {

.home-section {
padding-top: 50px;
padding-bottom: 50px;
display:block;
position:relative;
z-index:120;
}	

.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: rgba(0,0,0,.9);
}

.navbar-brand {
height: 36px;
padding: 5px 15px;
font-weight: 700;
}

.navbar-custom ul.nav li a {
font-size: 12px;
letter-spacing: 1px;
color: #FFF;
text-transform: uppercase;
font-weight: 700;
}


.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}

.navbar-brand h1{
color: #fff;
line-height: 36px;
width:278px;
text-indent:-9999px;
background: url(../img/common/xs_logo_spW.png) no-repeat;
-moz-background-size: 278px 36px; /* Firefox */
-webkit-background-size: 278px 36px; /* Safari,Chromeなど */
-o-background-size: 278px 36px;/* Opera */
-ms-background-size: 278px 36px; /* ie */
background-size: 278px 36px;
}

.navbar-custom.top-nav-collapse .navbar-brand h1 {
color: #fff;
line-height: 36px;
width:278px;
text-indent:-9999px;
background: url(../img/common/xs_logo_spW.png) no-repeat;
-moz-background-size: 278px 36px; /* Firefox */
-webkit-background-size: 278px 36px; /* Safari,Chromeなど */
-o-background-size: 278px 36px;/* Opera */
-ms-background-size: 278px 36px; /* ie */
background-size: 278px 36px;
}

#intro.intro {
padding:200px 0 0 0;
margin:0 0 0 0;
height: 650px;
}

.intro .slogan h4 span {
display:block;
margin: 5px 0 0;
}

.tp-banner-container {
padding-top:40px;
}

.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}

#pagetitle {
background: url(../img/common/page_title_bg.png) no-repeat 0.5% 0 #000;
-moz-background-size:1260px 80px; /* Firefox */
-webkit-background-size:1260px 80px; /* Safari,Chromeなど */
-o-background-size: 1260px 80px;/* Opera */
-ms-background-size: 1260px 80px; /* ie */
background-size: 1260px 80px;
margin:50px 0 0 0;
padding: 30px 0 0 20px;
}





#poolpark {
background: url(../img/about/page_bg.jpg) no-repeat bottom center;
-moz-background-size:800px 391px; /* Firefox */
-webkit-background-size:800px 391px;/* Safari,Chromeなど */
-o-background-size:800px 391px;/* Opera */
-ms-background-size:800px 391px; /* ie */
background-size:800px 391px;
padding-bottom:180px;
}

#support {
background: url(../img/support/page_bg.jpg) no-repeat bottom center #f2f2f2;
-moz-background-size:800px 391px; /* Firefox */
-webkit-background-size:800px 391px;/* Safari,Chromeなど */
-o-background-size:800px 391px;/* Opera */
-ms-background-size:800px 391px; /* ie */
background-size:800px 391px;
padding-bottom:180px;
}


#coach {
background: url(../img/coach/page_bg.jpg) no-repeat bottom center #f2f2f2;
-moz-background-size:800px 464px; /* Firefox */
-webkit-background-size:800px 464px;/* Safari,Chromeなど */
-o-background-size:800px 464px;/* Opera */
-ms-background-size:800px 464px; /* ie */
background-size:800px 464px;
padding-bottom:80px;
}



#coach_category {
margin: 0 0 30px -30px;
float: left;
width: 100%;
overflow: hidden;
zoom:1;
}

#coach_category li {
text-align: left;
float: left;
list-style: none;
color: #000;
font-weight: 700;
font-size: 13px;
margin: 0 15px 5px 0;
}



#coach dl.coachinfo {
width: 96%;
float: none;
margin: 8px auto;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
height: auto;
}


ul#n_highshool li {
list-style: none;
width: 33.3333%;
border-left: none;
border-right: none;
border-bottom: #ccc 1px solid;
background: #FFF;
opacity:0.9;
padding: 6px 15px;
float: left;
font-size: 12px;
}




#admission dl {
width: 100%;
float: left;
margin: 8px;
padding: 20px;
text-align: left;
background-color: rgba(255,255,255,.8);
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#admission dl dd {
font-size: 12px;
color:#000;
margin: 15px 0 0;
min-height: 100px;
}

}