.content-callout-dark-light p {
    max-width: 500px;
    margin: 35px 0;
    color: #fff;
}
.masthead-feature_page--tournaments {
    background: url("../../assets/imgs/tournament-banner.jpg") no-repeat center bottom;
}

.masthead-feature_page--statistics {
    background: url("../../assets/imgs/stats-banner.jpg") no-repeat center bottom;
}
.masthead-feature_page--home {
    background: url("http://www.goalline.ca/sports-management-software/assets/imgs/bg-masthead-home.jpg") no-repeat center top;
    background-size: cover;
    position: relative;
	z-index: 16;
}
.masthead-feature_page--officials {
    background: url("../../assets/imgs/officials-banner.jpg") no-repeat center bottom;
}
		.masthead-feature_page--home:after{
		  content: "";
		 top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
   opacity: 1.0;
	z-index: -1;
   background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVQIW2NkQAX/GZH4/xkYGBhhAmAOSBJEwDkgAQCCrgQEqRgDDwAAAABJRU5ErkJggg==) repeat;
}

.masthead-feature_page--mobile {
    background: url("../../assets/imgs/mobile-banner.jpg") no-repeat center bottom;
}
	
	
	h1.grand.feature.white {
    color: white!important;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}


	
		@media screen and (min-width: 768px){
.main-nav--feature_page a {
    color: #0f2e4d!important;
}
.main-nav--feature_pagewhite a {
    color: #fff!important;
}
.main-nav--feature_pagedark a {
    color: #0f2e4d!important;
}

		.main-header--feature_page {
    background: url("http://www.goalline.ca/sports-management-software/assets/imgs/bg-header-solid.jpg") no-repeat left top!important;
		}


		}

		.masthead-feature_page--sports {
    background: url("../../assets/imgs/bg-masthead-sports-light.jpg") no-repeat center bottom;
    background-size: cover;
}
		.mobile-item:not(:first-of-type) {
    margin-top: 0px;
}
		
		.main-header ul.social-header{    list-style: none;width:200px;float:left;margin-left: 60px}
.main-header ul.social-header li{  margin-right: 20px}
 /*home masthead*/
		.masthead h2 {
		max-width: 900px!important;
		margin: 0 auto;
		margin-bottom: 2%!important;
				}
		.masthead h1 {
		margin-top: 4%!important;
		color: #0f2e4d!important;

				}
		.checklist li a:link,.checklist li a:visited {color: #9e1f22;}
		.main-header--cta {width:60%!important;float: right!important;}
		
		@media screen and (max-width: 1370px){
		.main-header--cta {width:55%!important;float: right!important;}}	
				 			
		@media screen and (max-width: 1098px){
			.main-header--cta {width:58%!important;float: right!important;}
				 
		.main-header ul.social-header {
		width: 200px!important;
		margin-left: 0px;}
					 }		

		@media screen and (max-width: 767px){
		.main-header ul.social-header,.main-header--cta {
		width: 100%!important;
		margin-left: 0px;}
		}
					
		.masthead h2 {
		max-width: 800px!important;
		margin: 0 auto;
		margin-bottom: 5%;
						}
				h2 a:link, h2 a:visited {
				color: #ffffff;
				text-decoration: underline;
			}
			h2 a:hover {color: #9e1f22;
			}
						 
		@media screen and (max-width: 961px) and (min-width: 767px){
		.number {font-size: .85rem;}	
		.btn {font-size: .85rem;}
		.main-header--cta {width: 50%!important;}
		.main-header li:not(:last-of-type) {
		margin-right: 1%;}
				 	}	
				 	
		.half {width:50%;}
		.forty {width:40%;}
		.thirtythree {width:33%;}

			 
		/*tooltip right*/
		a.tooltip strong {line-height:30px;}
		a.tooltip:hover {text-decoration:none;} 
		a.tooltip span {
		    z-index:10;display:none; padding:14px 20px;
		    margin-top:-30px; margin-left:28px;
		    width:300px; line-height:16px;
		}
		a.tooltip:hover span{
		    display:inline; position:absolute; color:#111;
		    border:1px solid #DCA; background:#fffAF0;}
		.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
		
		/*tooltip top*/
		a.tooltip-top strong {line-height:30px;}
		a.tooltip-top:hover {text-decoration:none;} 
		a.tooltip-top span {
		    z-index:10;display:none; padding:14px 20px;
		    margin-top:-150px; margin-left:-125px;
		    width:300px; line-height:16px;  height:172px;
		}
		a.tooltip-top span p {color: #9e1f22;}
		
		
		
		.tooltip-last {
		    margin-left:-40px !important;
		}
		a.tooltip-top:hover span{
		    display:inline; position:absolute; color:#111;
		    border:1px solid #DCA; background:#fffAF0;}
		.callout-top {z-index:20;position:absolute;top:170px;border:0;left:127px;}
		    
		    /*tooltip on iphone*/
		    	@media screen and (max-width: 660px) and (min-width: 400px){
		a.tooltip-top span {
		    z-index:10;display:none; padding:7px 10px;
		    margin-top:-150px; margin-left:-80px;
		    width:200px; line-height:16px;  height:172px;
		    font-size: 12px;
		}
}
		    
		    
		    
		/*CSS3 extras*/
		a.tooltip span, a.tooltip-top span
		{
		    border-radius:4px;
		    box-shadow: 5px 5px 8px #CCC;
		}
		
		/*footer social*/
		.main-footer .social-footer li {float:left; width: 40px;}
		
		/*footer social mobile*/
		@media screen and (max-width: 430px){
		.main-header ul.social-header li  {
		    width: 20%!important;
		    margin: 10px 0 0 0 !important;
		}
		.main-header ul {padding-top: 0px}
		.feature-img {
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
    margin-top: 20px!important;
}
.forty {
    width: 90%!important;
}
.content-callout--left_align img, .content-callout--left_align svg {
    margin-left: 0%;
}
/*modal box on mobile full width*/
#openModal div h2 {
    font-size: 20px!important;
}
.modalDialog > div {
    margin-left: auto !important;
	margin-right: auto !important;
    width: 94% !important;
}
/*modal box on mobile full width*/

		}
		
		/*callout*/
		.content-callout-light-dark {
		background-color: #0b2138;
		color:#fff;
		background-image: -webkit-linear-gradient(-155deg, #0b2138 30%,#133b62 30%);
		background-image:linear-gradient(-115deg,#0b2138 30%,#133b62 30%)
		}
		
		.content-callout-dark-light {
		background-color: #0b2138;
		color:#fff;
		background-image: -webkit-linear-gradient(155deg, #0b2138 30%,#133b62 30%);
		background-image:linear-gradient(115deg,#0b2138 30%,#133b62 30%)
		}
		.content-callout-dark-light ul li, .content-callout-light-dark ul li {
			color: #fff;
			}
		.governing_body-item {
    border: 3px solid #9e1f22;
    min-height: 200px;
    padding: 5%;
    		text-align: center;

}



		.mobile-item {
    min-height: 200px;
    padding: 5%;
    text-align: left !important;

}

.mobile-item a {
	color:#9e1f22;
}
.mobile-item a:hover {
	color:#fff;
}

@media screen and (min-width: 768px){
.mobile-item {
    width: 50%!important;
}
}

/*MODAL*/
#openModal div h2 {
    color: #fff;
    font-size: 24px;
    font-family: 'Montserrat-Regular', sans-serif !important;
}
.splash-modal {
	padding-bottom: 20px;
}

#openModal div h3 {
    color: #fff;
    width: 100%;
    display: block;
    background-color: #9e1b1f;
    padding: 10px;
    }
    .modalDialog > div {margin-top: 0% !important;width: 60%;padding-bottom: 20px;
}
    
 .btn2 {margin-bottom: 20px;} 
 
 .content-callout--header-home h3 {float:left;margin-left:5%;width:60%;text-align:left;}
.content-callout--signup {padding-top: 0%;}
 .home-callout--cloud-storage .cloud-storage--item h2, .home-callout--app h2 {font-size: 1rem;line-height: 1.5rem}
 .guide-h1 {float:left;width:50%;margin-left:5%;text-align:left;}
 .guide-h2 {float:left;width:50%;clear:both;margin-left:5%!important;text-align:left;}
/*guide form*/
.guide input, .guide textarea, .guide label {
    max-width: 50%;
        margin: 0px;

}
.guide-item {float:left;width:70%;margin-left:-20%;}
    /*modal on mobile*/
	@media screen and (max-width: 961px) and (min-width: 400px){
	#openModal div h2 {
    font-size: 16px !important;
    line-height: 20px !important;
}
	#openModal div h3 {
    font-size: 12px !important;
        line-height: 14px !important;

}
	.modalDialog > div {
    margin: 1% auto !important;
     width: 60% !important;
    
}
				 	}
				 	
	@media screen and (max-width: 660px) and (min-width: 400px){
	.modalDialog > div {
        width: 95% !important;
}
.feature-img {max-width: 100%;}
.feature-img img{max-width: 100%;}
.img-responsive {max-width:300px;margin-top: -80px;}
.masthead-feature_page--home {background-position-y: -400px;}
.content-callout--header-home h3 {float:left;margin-left:5%;width:90%;text-align:center;}
.home-callout--cloud-storage img {width:100%;height: 100%;max-width: 70%;max-height: 70%;}
.home-callout--cloud-storage .cloud-storage--item h2, .home-callout--app h2 {font-size: 1rem;line-height: 1.5rem}
.masthead h1 {font-size: 1.275rem;line-height: 1.575rem}
/*guide form*/
.guide input, .guide textarea, .guide label {
    max-width: 100%;
    margin-top: 0%!important;
}
.guide-item {float:left;width:70%;margin-left:0%;}
 .guide-h1 {float:left;width:70%;margin-left:5%;text-align:left;}
 .guide-h2 {float:left;width:70%;clear:both;margin-left:2.5%;}
 }	
 
 
 
h1.grand.feature.white {
    color: white!important;
}
.img-responsive {max-width:100%}

.home-callout--features {background-image: url("../../assets/imgs/soccer-bg-fade.jpg") !important;
background-repeat: no-repeat; margin-bottom: 0px;background-position: right bottom;background-size: cover;background-position-x: 100px;
 }
 
.main-content--guide {background-image: url("../../assets/imgs/99781457.jpg") !important;
background-repeat: no-repeat; margin-bottom: 0px;background-position: center bottom;background-size: cover;min-height: 600px;
 }

 
 .shadow {
    -webkit-filter: drop-shadow( 0px 0px 0px #000 );
            filter: drop-shadow( 0px 0px 0px #000 ); /* Same syntax as box-shadow */
             color: white!important;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}




/*carousel homepage*/
#ThumbGrid {
    position: relative;
    width: 100%;
    height: 316px;
    overflow: hidden;
    margin-top: 303px;
    margin-bottom: 5px;
}
.Carousel {
    position: absolute;
    top: 0;
    min-width: 3000px;
    overflow: hidden;
}
.Carousel li {
    float: left;
    margin-right: 5px;
}

.Carousel li{
    list-style: none;
}


.thumbWrap {
    position: relative;
    height: 300px;
    line-height: 0;
    padding: 0;
}
.thumbWrap img {
    display: block;
    width: 100%;
}

						/*animated scroll icon*/
						
.scroll-arrows {
margin-left: -2px;
margin-top: 2px;
}
.scroll-arrows span {
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  margin: 0 0 3px 6px;
}


.unu {
  margin-top: 6px;
}

.unu,
.doi,
.trei {
  -webkit-animation: mouse-scroll 1s infinite;
  -moz-animation: mouse-scroll 1s infinite;
}

.unu {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
}

.doi {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
}

.trei {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
}

.mouse {
  height: 21px;
  width: 14px;
  border-radius: 10px;
  transform: none;
  border: 2px solid black;
  top: 170px;
  margin-top: -65px;
}

.wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: black;
  position: relative;
}

.wheel {
  -webkit-animation: mouse-wheel 1.2s ease infinite;
  -moz-animation: mouse-wheel 1.2s ease infinite;
}

@-webkit-keyframes mouse-wheel {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-moz-keyframes mouse-wheel {
  0% {
    top: 1px;
  }
  50% {
    top: 2px;
  }
  100% {
    top: 3px;
  }
}

@-webkit-keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 660px) and (min-width: 400px){
.mouse, .scroll-arrows {display: none;}
}