/*
 * Author: Carlos Alvarez
 * URL: http://alvarez.is
 *
 * Project Name: Landing Sumo - Theme 9
 * URL: http://LandingSumo.com
 * Version: 1.0
 */

/*	################################################################
	1. GENERAL STRUCTURES
################################################################# */
$color-1: #164397;
$color-2: #acd037;
$header-colors: #164397;
$footer-height: auto; 
$default-font: 'open sans', sans-serif;

@import 'vendor/bourbon-master/core/bourbon'; 
@import 'vendor/Buttons-master/scss/buttons.scss';
@import 'mixins'; 
 

/* Import fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic);
@font-face {
    font-family: 'norwesterregular';
    src: url('../fonts/norwester-webfont.woff2') format('woff2'),
         url('../fonts/norwester-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



/********************************************************
*
* General Styles 
*
********************************************************/

* { 
	margin: 0;
	padding: 0px;
    font-family: 'Open Sans', sans-serif;
} 
body { 
	background: #fff; 
	margin: 0; 
	color: #42413e;
	padding-top:0;

}

h1, h2, h3, h4, h5, h6 {
    font-family: 'norwesterregular', serif;
	font-weight: 500;
	color: $header-colors;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);

	&.thin{
		font-family: "proxima-nova",sans-serif;
		font-weight: 200;
		text-shadow: none;

	}
}


p { 
	padding: 0; 
	margin-bottom: 12px; 
    font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 1.3em; 
	line-height: 26px;
	color: #42413e; 
	margin-top: 10px; 
}

html,
body {
	height: 100%;
}

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
}

.center{
	text-align: center
}

.right{
	text-align: right;
}

.left{
	text-align: left;
}

.centered {text-align: center}
.mt {margin-top: 50px;}
.mb {margin-bottom: 50px;}
.mtb {margin-top: 50px; margin-bottom: 50px;}
.mtb2 { margin-top: 100px; margin-bottom: 100px;}
.ptb {padding-top: 80px; padding-bottom: 80px;}

.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width:100%;
}
::-moz-selection  {
	color: #fff;
	text-shadow:none;
	background:#2B2E31;
}
::selection {
	color: #fff;
	text-shadow:none;
	background:#2B2E31;
}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
a { 
	padding: 0;
	margin: 0;
	text-decoration: none; 
	-webkit-transition: background-color .4s linear, color .4s linear;
	-moz-transition: background-color .4s linear, color .4s linear;
	-o-transition: background-color .4s linear, color .4s linear;
	-ms-transition: background-color .4s linear, color .4s linear;
	transition: background-color .4s linear, color .4s linear;
	color: #f27242;
}
a:hover,
a:focus {
  text-decoration: none;
  color:#e16a3e;
}

.white-text{
	color: #fff;
}

.green-text{
	color: #acd037;
}

.yellow-text{
	color: #FCEB8C;
}

//list styles
 .no-bullet{
 	list-style: none;
 }

 .feature-list{
 	font-weight: 700;
 	color: #000;
  	font-size: 16px;
	li{
  		padding: 10px 0;
  		text-align: center;
  	}
 }

 .background{

 	&--dark{
		background: #272727;
 	}

 	&--dark-1{
		background: #797979;
 	}

 	&--dark-2{
		background: #484848;
 	}

 	&--light{ 
		background: #eaeaea;
 	}

 	&--white{ 
		background: #fff;
 	}

 	&--black{ 
		background: #000;
 	}

 	&--formreleaf{
		background: #6AB56D;
 	}

 	&--digitalsports{
		background: #221F72; 
 	}

	&--alphacility{
		background: #6AB56D;
 	}

 }


 .border-bottom-green{
 	border-bottom: 10px solid #acd037; 
 }


 // Font Weights 
 .thin{
 	font-weight: 300;
 }

.regular{
	font-weight: 500;
}

.bold{
	font-weight: 700;
}

.black{
	font-weight: 900;
}

 /********************************************************
*
* Sections
*
********************************************************/

.section{

	padding: 30px 0;

	&--signup{
	   background: transparent url('../img/background.subscribe.jpg') no-repeat top right;
	   background-size: cover;
	}
	
	&--subscriber{
	   background: #505050;
	}

	&--testimonial{
		min-height: 720px;
	}

}


.container, .container-fluid{
	

	&.padded{
		padding-top: 100px;
		padding-bottom: 100px;
	}

	&.padded-small{
		padding-top: 25px;
		padding-bottom: 25px;
	}

}

.lined{

	&--top{
		width: 100%;
		position: absolute;
		bottom: 0;
		right: 0;
		height: 70px;
		background: transparent url('../img/icon.line_1.png') no-repeat bottom right;
		background-size: contain;
	}
	&--bottom{
		top: 0; 
		right: 0;
		position: absolute;
		width: 100%;
		height: 70px; 
		background: transparent url('../img/icon.line_2.png') no-repeat bottom right;
		background-size: contain;
	}
}

/********************************************************
*
* Applied Styles
*
********************************************************/

/* BOOTSTRAP MODIFICATION */

.navbar-brand {
	padding-left:25px;
	width: 200px;
	background: transparent url('../img/logo.leagueminder.svg') no-repeat center center;
	background-size: contain; 
	display: inline-block;
	font-size: 20px;
	line-height: 22px;
	font-weight: 700;
	height: 66px;
}

.navbar-default { 
	background-color: #000;
	border-color: transparent;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #95A5EC;
	background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
	color: #95A5EC;
}

.navbar-default .navbar-nav > li > a {
	color: #fff;
}

hr {
	border: 1px solid $color-2;
	width: 100px;
}

.nav-stacked > li {
	border-left: 2px solid transparent
}

.nav-stacked > li.active {
	border-left: 2px solid #f27242;
	background: #f9f9f9
}


.nav{

	
	a > span{
		padding: 8px 10px;
		display: inline-block;
		font-family: "proxima-nova",sans-serif;
		font-size: 15px;
	}

	&-login{
		padding-left: 3px;
		padding-right: 3px;
		
		span{
			background: #131D89;
		}

		span:hover{
			background: darken(#131D89, 0.1);
			color:  #fff; 
		}

		
	}

	&-demo{ 
		padding-left: 3px;
		padding-right: 3px;
		span{
			background: #79A331;
			
		}

		span:hover{
			background: darken(#79A331, 0.1);
			color:  #fff;  
		}
	}
}


/* Modal Modification */

.modal-content {
	border-radius: 0px;
}

.modal-body {
	padding: 0px;
}

.modal-body h4 {
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 15px;
	padding: 10px 10px 0;
	color: #f27242;
}

.modal-body h5 {
	font-family: 'Libre Baskerville', serif;
	font-style: italic;
	padding: 10px 10px 0;
}

.modal-body p {
	margin-left: 10px;
	margin-right: 10px;
	line-height: 18px;
}

.modal-footer {
	background: #f2f2f2;
}

/* FORM CONFIGURATION */

input{
	font-size: 16px;
	min-height: 40px;
	border-radius: 2px;
	line-height: 20px;
	padding: 11px 30px 12px;
	border: 1px solid #b9b9af;
	margin-bottom: 10px;
	background-color: #fff;
	-webkit-transition: background-color 0.2s;
	transition: background-color 0.2s;
}

input[type='checkbox']{
	min-height: initial;

}

.subscribe-input {
	float: left;
	width: 70%;
	text-align: left;
	margin-right: 2px;
}

.subscribe-submit {
	right: 0;
}

.btn-green {
	border: 4px solid #acd037;
	background: #acd037;
	color: #000;
	font-size: 18px;
	font-weight: 700;
	padding: 5px 25px;
	transition: all .5s ease-out;
	
}

.btn-green:hover {
	background: #ffee90;   
	border: 4px solid #ffee90;
	color: #000;
}

button .btn .btn-green{
	color:#fff;
}


.lined-box{
	width: 100%;
	margin: 20px 0;
	padding: 0px 10px;   
	border: 1px solid #8c8c8c;
	transition: all .7s ease-out;

	&__title{ 
		color: #b1e54f; 
	}

	&__content{
		color: #fff;
	}

	&:hover{
		box-shadow: 0px 0px 6px #fff;
	}
}

/* HEADER SECTION */
#h {
	background: url(../img/header.jpg) no-repeat center top;
	padding-top: 150px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 1000px;
	width: 100%;
	position: relative;
	display: block;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#h:before{
	content: '';
	position: absolute; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
}

.welcome {
	padding-top: 25px;
	padding-bottom: 25px;
	opacity: 0.9;
	color: #fff;


	&-branding{
		height: 200px;
		width: 100%;
		background: transparent url('../img/logo.leagueminder_blue.svg') no-repeat center center;
		background-size: contain; 
		display: inline-block;
		overflow: hidden;
		text-indent: -100000px;
	}

	&-tagline{
		font-weight: 300;
		margin-bottom: 50px;
		color: #fff;
		font-size:  4.5em;
	}

	&-button{
		margin-bottom: 25px;
		font-weight: 700;
		background-color:  rgba(#fff, .3);
	}
}

.welcome h1 {
	text-align: center;
	font-weight: 900;
}

/* FEATURE SECTION */

.feature-skew{
	
	transform: skewY(183deg);
	padding-top: 100px;
	padding-bottom: 100px; 
 

	&--correct{ 

		transform: skewY(177deg);
	}
    
}

.feature-listing{


	li{
		font-size: 16px;
		padding-bottom:  10px;


	}
}





/* FOOTER SECTION */

#f {
	background: #f3f3f3;
	padding-bottom: 50px;
	padding-top: 50px;
	margin-top: 25px;
}

/* White Section Overall Configuration */

.text-p {
	font-size: 14px;
	line-height: 24px;
	color: #6b6b6b;
}

.og {
	color: #f27242;
}

i {
	font-size: 40px
}

.rating i {
	font-size: 16px;
	color: #fae321;
}

.down i {
	font-size: 30px;
	color: #f27242;
	padding: 5px;
}

/* Separators - Parallax Section */
.sep {
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	height: 450px;
	position: relative;
}
.s01 {
	background-image: url(../img/s01.jpg);
	background-size: cover;
}

.s02 {
	background-image: url(../img/s02.jpg);
	background-size: cover;
}

.s03 {
	background-image: url(../img/s03.jpg);
	background-size: cover;
}


.device-collage{
	width: 60%;
	height:auto;

	&__desktop{
		background: transparent url() no-repeat top left;
	}

}


.list-header{
	border: 3px solid #9ec9e6;
    height: 185px;
    width: 185px;
    border-radius: 100%;
    box-sizing: border-box;
    padding: 30px 13px;
    transition: all 0.4s ease-in; 
    &:hover{
    	background: #9ec9e6; 
    }
}

.feature-list{

}


.feature-icon{
	width: 250px; 
	height: 250px;
}

.feature-image{
	height: 300px;
	margin-top:  -45px;
}

.main-icons--computer{
	width: auto;
	height: 250px; 
}


.main-icons--iphone{
	width: 250px;
	height: auto;
}

/* Header Stylings */
.middle-lined{
	display: block;
	position: relative;
	width: 100%;

	&__header{
		padding: 15px;
		background: #fff;
		position: relative;
		z-index: 3;
		display: inline-block;
		margin: 0 0 0 0; 
		text-transform: uppercase;
		font-size: 3.5em;

	}

	&:after{
		background: $color-2;
		content: '';
		height: 3px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%); 
		width: 100%;
		left: -40px;
		z-index: 2

	}


}


.carousel-control{
		
		&.left, &.right{
			background: transparent;

		}

	.glyphicon{
		padding: 10px;
		color: #f1f1f1;
	}

}


.page-header{

	background: #ccc;
	border-bottom: none;

	&--pricing{
		background: url('../img/backgrounds/background.swiming.jpg') no-repeat center center;
		background-size: cover;
		margin: 0px;
	}

	&--integration{
		background: url('../img/backgrounds/background.baseball.jpg') no-repeat center center;
		background-size: cover;
		margin: 0px;
	}	

	&--features{
		background: url('../img/backgrounds/background.hockey.jpg') no-repeat center center;
		background-size: cover;
		margin: 0px; 
	}
}

   /***********************************
*
* Login Page Footer
*
***********************************/



.footer{
	font-family: $default-font;
	color: #fff;
	padding-top:20px;
	min-height:100px;
	bottom:0;
	width: 100%;
	min-height:320px;
	background-color:#000;
	padding-top:20px;
}

.loginfooter .align-left {
	padding-top:20px;
}

.loginfooter .align-right {
	display:inline;

}

.copyright{
	background-color: #3f3f3f;
	width: 100%;
} 

#footer2{
	font-family: $default-font;
	color: #959595; 
	padding-top:15px;
	padding-bottom: 15px;
	font-size:12px;
	display:block;
	margin-left:auto;
	margin-right:auto;

}

.footer-heading{
	text-align:right;
}

.btn {
	border-radius:0;
	background-color:#acd037;
	border-color:#acd037;

}
.col-md-8{
	width:auto;
}


/***********************************
*
* Quote Block
*
***********************************/
.quote-block{
	
	display: inline-block;
	width: 100%;
	border-top: $color-2 2px solid;
	border-bottom: $color-2 2px solid;
	font-size: 2em;
	font-weight: 300;
	font-style: italic;
	padding: 20px 0; 
}
	


/***********************************
*
* Full Screen Header
*
***********************************/

.full-screen-header{
	background: transparent url(../img/header_BW.jpg) center center;
	background-size: cover;
	height: 100%;
	width:100%;
	position:relative;
	&:before{
		content:"";
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background: rgba(#000, 0.5);

	}
}

/***********************************
*
* Testimonals
*
***********************************/


.citation{
	font-size: 12px;
	font-style: italic; 
}


/***********************************
*
* Login Section
*
***********************************/

.logo-bar{
	position: absolute;
	top: 0;
	height: 200px;
	width: 100%;
	z-index: 10000;
	pointer-events: none;
}

.login-container {
  width: 600px;
  min-height: 300px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.login-header {
position: relative;
  padding-top: 10px;
  margin-bottom:20px;
  font-family: 'norwesterregular';
  text-align: center;
  color: #fff;
  letter-spacing: 5px;
  font-size: 40px;
  	&:before{
  		content:"";
  		height:2px;
  		width:40px;
  		background-color:#ff4d4d;
  		bottom:0;
  		left:50%;
  		transform: translateX(-50%);
  		position: absolute;

 	 }
  }
.form-login{
  font-family: "Lato", sans;

}
.form-control{
	width:400px;
}
#remember-me {
    color:#fff;
    padding-top: 10px;
    padding-bottom:15px;
}

.log-in-form .button{
  background-color: #acd037;
  width:150px;
}

.login-button .btn{
	width:140px;
	}

.row-logo{
	height:150px;
	padding-bottom:200px;
}

.form-signin-heading{
	color:white;
}

.login-btn{
	width:150px;
}

 /*********************************************************
 *
 * Media Queries
 *
 *********************************************************/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1440px) {
   

    }

     /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
		
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	.main-icons--iphone{
    		top:  -360px !important;
    	}	
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }