@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
@import url(https://fonts.googleapis.com/css?family=Cabin+Condensed:400,500);
@import url('https://fonts.googleapis.com/css?family=Anton');

/*
    Green: #99c53c
    Blue: #053a4a
    Black #191919
*/
/**  Basic Page CSS **/
body{font-family: "Cabin Condensed", sans-serif;font-weight: 300; font-size: 1.7em;position: relative;}
h1, h2, h3, h4, h5, h6 { font-family: Anton, sans-serif; font-weight: 100;margin: 0;}
p { margin: 0 0 20px;}
.img-center {margin: 0 auto;}
.clear100 {clear:both; height:100px;}
.clear60 {clear:both; height:60px;}
.clear30 {clear:both; height:30px;}
.clear20 {clear:both; height:20px;}
.clear10 {clear:both; height:10px;}
.p3 {padding:3px;}
.p-10 {padding:10px;}
.quote {    font-size: 35px;
    font-style: italic;
    color: #bdbdbd;
    font-family: 'Times New Roman', Times, serif;
    display: inline-block;
    padding: 7px 112px;
    line-height: 45px;
    /* border-left: 5px solid #f3f3f3; */
    margin-bottom: 23px;
    text-align:center;
}

/*Override the iframe width/height */
iframe, object, embed { max-width: 100% !important;}
.video {position: relative;padding-bottom: 56.25%; height: 0;margin-bottom:15px;}
.video iframe {position: absolute;	top: 0;left: 0;width: 100%;height: 100%;}


/*Background*/
.image-bg-fluid {background: url('/i/bg-field-op.jpg') no-repeat top center scroll; padding: 100px 0; color: #fff;}
.image-bg-fluid, .bg-field-overlay {text-align: center;-webkit-background-size: cover;-moz-background-size: cover; background-size: cover;-o-background-size: cover;}      
.page-header-bg {background: url('/i/bg-field-op.jpg') no-repeat top center scroll; padding: 0; margin:70px 0 30px 0; padding: 20px 0 0 0; color: #fff;}
.page-header-bg {text-align: center;-webkit-background-size: cover;-moz-background-size: cover; background-size: cover;-o-background-size: cover;}      
.green-split-up {background: url('/i/clear-green-split-up.png') no-repeat bottom left;height:76px;  }
.green-split-down {background: url('/i/clear-green-split-down.png') no-repeat top right;height:76px;  }
.clear-green-top {background: url('/i/clear-green-top.png') no-repeat bottom left;height:100px;  }
.clear-green-bottom {background: url('/i/clear-green-split-down.png') no-repeat bottom left;height:76px;  }
.clear-black-down {background: url('/i/clear-black-down.png') no-repeat bottom right;height:76px;}
.clear-black-top {background: url(/i/clear-black-top.png) no-repeat top left; height: 84px; margin-top: -50px;}
.clear-blue-top {background: url(/i/clear-blue-top.png) no-repeat top left; height: 84px; margin-top: -50px;}
.clear-blue-bottom {background: url('/i/clear-blue-bottom.png') no-repeat bottom left;height:76px;}
.bg-green {background-color:#99c53c; color:white; padding:0 3px;}
.bg-blue {background-color:#053a4a; color:white; padding:0 3px;}
.bg-black {background-color:#191919; color:white; padding:0 3px;}
h2 span.blue {color:#053a4a;}

.bg-only-7-minutes-a-day {padding:50px 0 0 0}
.bg-challenging {padding:50px 0 50px 0}
.bg-compete {padding:50px 0 50px 0;  }
.bg-dedicated {padding:50px 0 50px 0;}
.bg-world-challenge {padding:50px 0 50px 0;}
.worldcup {margin-bottom:50px;}
.bg-team {padding:50px 0 0px 0; color: white;}
.bg-field-overlay {background: url('/i/bg-field-purple-3.jpg') no-repeat bottom center fixed; background-color:#929292;} /*scroll or fixed*/

.bg-only-7-minutes-a-day h2 {color:#053a4a}
.bg-challenging h2 {margin-bottom:10px; }
.bg-challenging h2 span.number {color:#99c53c; }
.bg-challenging h2 span.word {color:#053a4a;}
.bg-compete h2 {padding:0;  }
.bg-world-challenge h2 {padding:0;}
.bg-dedicated h2 {padding:0;}
.worldcup h2 {color: #053a4a;}

.bg-only-7-minutes-a-day p {padding:0 30px}
.bg-challenging p {padding:0 30px}
.bg-compete p, .bg-world-challenge p {text-align: center; padding:0 30px}

.worldcup .table {display: table;  background-color: rgba(255,255,255,0.8);color: #333;}

.page h2, .bg-challenging h2, .bg-compete h2, .bg-dedicated h2, .bg-only-7-minutes-a-day h2, .worldcup h2, .bg-team h2, .bg-world-challenge h2 {
    text-transform:uppercase;
    font-style: italic; 
    font-weight:normal; 
    font-size:36px;
    margin-bottom:10px;
}
.page h2 {color:#053a4a; font-size:24px;}
.page h3 {font-size: 28px; text-align:center; }
.page-section {padding-bottom:30px;}
.page-section-summary {padding: 40px 0 50px 0;font-size: 25px;color: #b9b9b9;font-style: italic;}

.page-section-offer {text-align:center; margin: 10px; position: relative; bottom: -60px; }
.bg-offer {background-color:red;  padding:0 8px 0 4px; font-size: 25px;color: white;font-style: italic; text-transform:uppercase;}
.page-section img.pull-right {margin:0 0 5px 5px;}
.page-quote {padding:40px;}
.page-quote blockquote {border:none;font-family: Anton, sans-serif;  text-transform:uppercase;font-style: italic; font-weight:normal; font-size:32px;margin:0; padding:0;}
.page-quote p {text-align:left;}

.worldcup h2, .bg-compete h2, .bg-world-challenge h2 {font-size:25px;}
.bg-team h2 {font-size:35px;margin-bottom:10px;}

/*Navigation*/
header .navbar {padding: 10px 0; transition: all .5s ease-out; }
header .navbar-default {border: none; background-color: rgba(0,0,0,0.6);}
header .navbar-default .navbar-nav a {color: white;padding: 10px 10px;}
header .navbar-default .navbar-nav a:hover {color: #99c53c;}
header .navbar-default .navbar-nav .active a {color: white;background-color: transparent;  border-bottom: 4px solid white; }
header .navbar-brand { float: left;height: 50px; padding: 5px 5px;font-size: 15px;line-height: 20px;}
header .navbar-brand h1 {color: gray;margin: 0; font-size: 45px;  font-weight: normal;  padding: 0px 0px 0 65px; font-family: "Poiret One", sans-serif;}
header .navbar-brand img.logo {width:70px; float:left; margin-top:-6px;}
.navbar-default .navbar-nav>li>a {  color: white;text-align: center;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: black; background-color: transparent;}
.navbar-default .navbar-toggle .icon-bar {background-color: #FFFFFF;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: transparent;}

/*header nav - black-on-white bar*/
header.blackonwhite .navbar-default { background-color: rgba(255,255,255,1.0);}
header.blackonwhite .navbar-default .navbar-nav a {color: black;font-family:Anton; text-transform:uppercase;}
header.blackonwhite .navbar-default .navbar-nav a:hover { color: #99c53c;}
header.blackonwhite .navbar-default .navbar-nav .active a {color: black;background-color: transparent;  border-bottom: 4px solid black; }
.navbar-default .navbar-toggle .icon-bar {background-color: #000000;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: black;}


/**  Footer **/
footer {background: #191919;padding: 20px 0 40px 0; border-top:5px solid white; color:#ffffff;}
footer h3 {text-transform:uppercase;font-style: italic; font-weight:normal; margin-bottom:20px; font-size:20px;}
footer a {font-style:italic;}
footer p {font-size:11px;margin:10px 0 0 0; text-align:center;}
footer ul.nav li {font-size: 18px; list-style:none;}
footer ul.nav>li>a { position: relative;display: block;padding: 3px 2px; color:#ffffff;}
footer ul.nav>li>a:hover, .nav>li>a:focus { }
footer ul.nav>li>a:hover { background-color: #99c53c; }
footer img.footer-logo {width:160px;margin:0 auto;}
footer li, footer h3 {text-align:center;}
.elastic-logo { max-width:200px; margin-top:30px;}
footer .col-xs-12 {margin-bottom:30px;}



#intro {color:#ffffff; padding:35px 30px; text-align:left; position:relative; overflow:hidden; }
#intro h1 {display:none}
#intro h2 {text-align:center; text-transform: uppercase; font-size:32px; }
#intro h3 {font-family: "Open Sans", sans-serif; text-align:center; font-size:25px; font-style:italic; margin-top:10px; margin-bottom:15px; background-color:#99c53c;  padding:4px 8px 4px 4px;}



.fp-feature {text-align:center; margin:0 0 20px 0;}
.fp-feature h4 {font-family: Impact, sans-serif; font-size:30px; margin:5px 0 0px 0;}
.fp-feature h5 {font-family: 'Roboto', Sans-Serif; font-size:30px; line-height:30px; font-weight:100; margin:-10px 0 0 0; text-transform:uppercase; }
.fp-feature p {color:#777777; margin: 15px 0 25px;height: 50px;}
.flag {width:25px;}

#featured .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
}

#login, #find2, #pnlStep1, #pnlInvalidResetForm, #pnlStep2,#pnlStep3, #signup-form, #success-form, #new-user-form, #contact-us-form, #subscribe-form, .bg-transparent  {background-color:rgba(255,255,255,0.7);padding:20px; text-align:left; color:Gray; border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}            
#login {margin:20px auto 0 auto;text-align:left; }
#login #btnLogin {height: 34px; margin-left:5px; float:left;}     
#find2 {width:350px; margin:20px auto 0 auto; }
#find2 #btnFind {height: 34px; margin-left:5px; float:left;}
#pnlStep1,#pnlStep2,#pnlStep3, #pnlInvalidResetForm {width:350px;margin:20px auto 0 auto;}
#pnlStep1 img,#pnlStep2 img,#pnlStep3 img {width:100%;}

#signup-form, #new-user-form, #success-form {margin:20px auto 0 auto;  }
#signup-form .row {margin-left:0; margin-right:0;}
.form-control {background-color: rgba(255,255,255,0.8);}

.glyphicon {margin: 2px 0 0 0;}
.selectWidth {width: 100%;margin:0;text-indent: 25px;} 
.left-inner-addon { position: relative;}
.left-inner-addon input, .left-inner-addon textarea {  padding-left: 35px;    }
.left-inner-addon i { position: absolute; padding: 10px 12px; pointer-events: none;color:#777;}
.right-inner-addon {  position: relative;}
.right-inner-addon input {   padding-right: 30px;    }
.right-inner-addon i {position: absolute;  right: 0px;padding: 10px 12px;pointer-events: none; color:#777;}

#celebrate { height: 400px;  background-color:rgba(0,0,0,0.6); color: #fff;padding:150px 0 40px 0;}
#celebrate h2 {color: white;text-align: center;font-weight: normal;text-transform: uppercase;}
#celebrate h3 {    font-family: Arial; color:white; text-align:center; font-weight: normal; padding: 10px 60px;}

.btn { text-transform:uppercase; margin:0;  display: inline-block;  border: 1px solid transparent;border-radius: 4px;  line-height: 1.42857143;text-align: center;  white-space: nowrap; vertical-align: middle;  cursor: pointer; -webkit-user-select: none; -moz-user-select: none;-ms-user-select: none;  user-select: none;  }
.btn-default {color: #333; background-color: #fff; border-color: #ccc;}
.btn-lg {padding:10px 20px; font-size:18px;}

.btn-blue{color:#053a4a;background-color:transparent;border-color:#053a4a}
.btn-blue:active, .btn-blue:focus,.btn-blue:hover{color:#ffffff;text-shadow:none;background-color:#053a4a;border-color:#ffffff}
.btn-blue-fill{color:#ffffff;background-color:#053a4a;border-color:transparent;}
.btn-blue-fill:active, .btn-blue-fill:focus, .btn-blue-fill:hover{color:#053a4a;background-color:#ffffff;border-color:transparent}

.btn-green{color:#99c53c;background-color:transparent;border-color:#99c53c}
.btn-green:active, .btn-green:focus,.btn-green:hover{color:#ffffff;text-shadow:none;background-color:#99c53c;border-color:#ffffff}
.btn-green-fill{color:#ffffff;background-color:#99c53c;border-color:transparent;}
.btn-green-fill:active, .btn-green-fill:focus,.btn-green-fill:hover{color:#fff;text-shadow:none;background-color:#053a4a;border-color:transparent}


.btn-freetrial{margin-top:10px; color:#ffffff;background-color:#ff0000;border-color:transparent; font-size:18px;}
.btn-freetrial:active, .btn-freetrial:focus,.btn-freetrial:hover{color:#ffffff;text-shadow:none;background-color:#b70000;border-color:transparent}










/*animation element*/
.animation-element {
  opacity: 0;
  position: relative;
  text-align:center;
}
/*animation element sliding left*/
.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*Before*/
.animation-element.slide-down {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
/*After.*/
.animation-element.slide-down.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

/*
    Green: #99c53c
    Blue: #053a4a
    Black #191919
*/

.section-block h2, .section-block h3, .section-block h4 {text-transform: uppercase;font-style: italic;font-weight: normal; margin-bottom: 10px;}
.section-block h2 {font-size: 28px;}
.section-block h3 {font-size: 22px;}
.section-block h4 {font-size: 18px;}
.image-bg-fluid, .section-block  {padding:20px 0;}



@media only screen and (min-width: 450px)and (max-width: 768px) {
  .service p {padding: 0 20%;}
  header .navbar-brand h1 {  font-size: 33px;  padding: 0px 0px 0 44px}
  #what h3 { width: 95%;}
  .frm .lbl {text-align:left;}
  #signup-form, #new-user-form  {width:450px;}
}

@media only screen and (min-width: 200px)and (max-width: 450px) {
    header .navbar-brand h1 {  font-size: 25px;  padding: 0px 0px 0 30px  }
    #what h3 {width: 95%; }
    .frm .lbl {text-align:left;}
    .frm input[type=text], .frm input[type=password]  {width:100%}
    .frm textarea {width:100%; height:200px;}
    #login, #pnlStep1,#pnlStep2,#pnlStep3,#signup-form, #new-user-form, #pnlInvalidResetForm   {width:95%; }
}
@media only screen and (min-width:768px) {
    .navbar-right { margin-top: 8px;}
    #featured .img-responsive {width: 1170px;}
    #intro {padding:0px 50px 50px 100px; text-align:left;    position:relative; overflow:hidden;}
    #intro h2 {     margin-top: 20px;text-align:right; font-size: 51px; margin-bottom:5px; font-style: italic; font-weight: normal;text-shadow: 1px 1px #333;}
    .bg-soccer-skills {background-color:#99c53c;  padding:0 8px 0 4px;}
    #intro h3 {text-align:right; font-size:38px; margin:0 0 10px 0 ;text-shadow: 1px 1px #333; background-color:transparent;}
    #intro img {text-align:left; width:60%;}

    #contact { border-top: 20px solid gray;}
    #signup-form, #new-user-form  {width:450px;}

    h2.fp-blue, h2.fp-green, .bg-challenging h2, .bg-dedicated h2, .bg-only-7-minutes-a-day h2 {font-size: 38px; }
    header .navbar-brand h1 {font-size: 33px; padding: 0px 0px 0 44px}
    .bg-team h2 { font-size:53px; margin-bottom:10px; text-align:right;}
    .bg-team p {padding: 0px 0 0 190px; text-align: right;color: white;}
    .btn-freetrial {
        text-align: right;
    }
}
@media only screen and (min-width:992px) {
     h2.fp-blue, h2.fp-green, .bg-challenging h2, .bg-dedicated h2, .bg-only-7-minutes-a-day h2 {font-size: 42px; }
     #intro h2 { font-size: 74px; margin-bottom:15px; }
     .bg-soccer-skills { padding:0 13px 0 7px;}
    .image-bg-fluid, .section-block  {padding:70px 0;}
    .page-header-bg {}

    .section-block h2 {font-size: 42px; margin-bottom:50px}
    .section-block h3 {font-size: 36px; margin-bottom:20px}
    .section-block h4 {font-size: 28px; margin-bottom:15px}
    .page-quote {padding:100px 300px;}
        .page-quote blockquote {font-size:42px}
        .page-quote p {text-align:right}
}


@media only screen and (min-width:1200px) {
    /*location styling of elements on first page. */

    .bg-only-7-minutes-a-day {padding:110px 0 0 0}
    .bg-challenging {padding:40px 0 50px 0}
    /*.bg-compete { background: url('/i/world-cup-transp.png') no-repeat bottom left; background-color:#99c53c; }*/
     .bg-compete {background: url('/i/world-cup-transp.png') no-repeat -200px -20px; background-color:#99c53c; padding:100px 0 100px 0; }
    .bg-dedicated, .bg-world-challenge {padding:160px 0 200px 0;}

    .bg-challenging h2 span.number {font-size: 168px;display: inline-block;  position: relative; top: 50px;  right: 25px; color:#99c53c; z-index:-10; text-shadow: none;}
    .bg-challenging h2 {padding: 0;  text-align: left; color:white;}
    .bg-compete h2, .bg-world-challenge h2 {font-size:42px;text-align: left; padding:0; }

    .bg-dedicated h2 {padding:0; }

    .bg-only-7-minutes-a-day p { margin: 0 0 0 60px;padding:0 115px 20px 105px; text-align: left;}
    .bg-only-7-minutes-a-day p.bg-stopwatch {background: url('/i/stopwatch-100.jpg') no-repeat 6px -10px; margin: 75px 0 0 60px;padding:0 115px 20px 105px; }

    .bg-challenging p { margin: 0 0px 0 78px;  padding: 15px 50px 0 120px;text-align: left;}
    .bg-challenging p.bg-computer {background: url('/i/computer-100.jpg') no-repeat 6px -10px; margin: 0 0px 0 78px;  padding: 15px 50px 0 120px;text-align: left;}


    .bg-world-challenge-inner p{text-align: left; padding: 0;}

    .bg-compete p {text-align: left; padding: 0;}

    h2.fp-blue, h2.fp-green, .bg-challenging h2, .bg-dedicated h2, .bg-only-7-minutes-a-day h2, .worldcup h2 {font-size: 53px; }
   

    h2.fp-blue {color: #053a4a; text-align:left; }
    h2.fp-green {padding: 0 500px 0 0;   text-align: left;}
    span.bg-blue{background-color: #053a4a; padding:0 20px 0 10px;}
    h2 span.green {color: #99c53c; font-style: normal;}
    span.bg-blue-minutes {background-color: #053a4a; color:white; font-size:70px; padding:0 15px; margin:0 10px}
    span.first {font-size: 50px; color: #99c53c;display: inline-block;  position: relative;    top: -77px;right: -70px; z-index: -10000;}
    span.last {font-size: 50px; color: #99c53c; display: inline-block; position: relative; top: 62px;  right: 95px; z-index: -10000;}
    .worldcup {margin-bottom:50px;}
    .worldcup h2 {font-size:24px; margin-bottom:10px; color: #053a4a;}

}