/** 
 *------------------------------------------------------------------------------
 * @package       UT Multimodule
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2014-2015 Unitemplates.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       Leoalv an Unitemplates
 * @Link:         http://www.unitemplates.com 
 *------------------------------------------------------------------------------
 */

//--------------------------------------------------------------
//New cols width for number of columns no supported by boostrap
//--------------------------------------------------------------
// *-2-4 = 5 columns, *-1-7 = 7 columns, *-1-5 = 8 columns
// 2-4, 1-7, 1-5 is result of 12(bootstrap cols) / #-of-columns
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5, .col-xs-1-7 .col-sm-1-7, .col-md-1-7, .col-lg-1-7, .col-xs-2-4, .col-sm-2-4, .col-md-2-4, .col-lg-2-4{
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

//extra small
.col-xs-1-5, .col-xs-1-7, .col-xs-2-4{float: left;}
.col-xs-2-4{width: 20%;}
.col-xs-1-7{width: 14.2857%;}
.col-xs-1-5{width: 12.5%;}

//small
@media screen and (min-width:@screen-sm){
	.col-sm-1-5, .col-sm-1-7, .col-sm-2-4,{float: left;}
	.col-sm-2-4{width: 20%;}
	.col-sm-1-7{width: 14.2857%;}
	.col-sm-1-5{width: 12.5%;}
}

//Medium
@media screen and (min-width:@screen-md){
	.col-md-1-5, .col-md-1-7, .col-md-2-4{float: left;}
	.col-md-2-4{width: 20%;}
	.col-md-1-7{width: 14.2857%;}
	.col-md-1-5{width: 12.5%;}
}

//Large
@media screen and (min-width:@screen-lg){
	.col-lg-1-5, .col-lg-1-7, .col-lg-2-4{float: left;}
	.col-lg-2-4{width: 20%;}
	.col-lg-1-7{width: 14.2857%;}
	.col-lg-1-5{width: 12.5%;}
}

// --------------------------------------------------
// MULTIMODULE BG STYLES
// --------------------------------------------------
.brand-primary{background:@brand-primary !important;}
.brand-secondary{background:@brand-secondary !important;}
.brand-success{background:@brand-success !important;}
.brand-info{background:@brand-info !important;}
.brand-warning{background:@brand-warning !important;}
.brand-danger{background:@brand-danger !important;}
.gray-darker{background:@gray-darker !important;}
.gray-dark{background:@gray-dark !important;}
.gray{background:@gray !important;}
.gray-light{background:@gray-light !important;}
.gray-lighter{background:@gray-lighter !important;}
.gray-lightest{background:@gray-lightest !important;}

//------------------------------------------------------
// SOCIAL BUTTONS FOR FOLLOWS AND MORE
//------------------------------------------------------
//Bases
.btn-base(@bg, @color:#fff, @border: 1px solid transparent) { background-color: @bg;border: @border;color: @color;}
.simple{background-color: transparent;color: @gray-light; border: none;
	&:hover, &:focus{color: @gray-light;}
}
.light{background-color: transparent; color: @gray-light; border: 1px solid @t3-border-color;
	&:hover, &:focus{color: @gray-light;}
}
.dark{background-color: @black;color: @gray-lighter;border:1px solid @black;
	&:hover, &:focus{color: @gray-lighter;}
}

//btn styles
.rounded{border-radius: @border-radius-base;}
.circle{border-radius: 50%;}

//btn size
.size-30{width: 30px; height: 30px; line-height: 27px; i{font-size: 15px;}}
.size-32{width: 32px; height: 32px; line-height: 29px; i{font-size: 15px;}}
.size-34{width: 34px; height: 34px; line-height: 32px; i{font-size: 17px;}}
.size-36{width: 36px; height: 36px; line-height: 34px; i{font-size: 17px;}}
.size-40{width: 40px; height: 40px; line-height: 38px; i{font-size: 18px;}}
.size-44{width: 44px; height: 44px; line-height: 41px; i{font-size: 18px;}}
.size-48{width: 48px; height: 48px; line-height: 45px; i{font-size: 18px;}}

//Buttons
.btn-behance{
	&.colored{.btn-base(#053eff);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#053eff;}}

	&.light-icon-color{.light();color: #053eff;&:hover, &:focus{color:#053eff;}}
	&.light-border-color{.light();border-color: #053eff;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#053eff;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #053eff;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-dribbble{
	&.colored{.btn-base(#ea4c89);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#ea4c89;}}

	&.light-icon-color{.light();color: #ea4c89;&:hover, &:focus{color:#ea4c89;}}
	&.light-border-color{.light();border-color: #ea4c89;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#ea4c89;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #ea4c89;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-facebook{
	&.colored{.btn-base(#3b5998);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#3b5998;}}

	&.light-icon-color{.light();color: #3b5998;&:hover, &:focus{color:#3b5998;}}
	&.light-border-color{.light();border-color: #3b5998;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#3b5998;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #3b5998;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-flickr{
	&.colored{.btn-base(#ff0084);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#ff0084;}}

	&.light-icon-color{.light();color: #ff0084;&:hover, &:focus{color:#ff0084;}}
	&.light-border-color{.light();border-color: #ff0084;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#ff0084;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #ff0084;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-google{
	&.colored{.btn-base(#dd4b39);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#dd4b39;}}

	&.light-icon-color{.light();color: #dd4b39;&:hover, &:focus{color:#dd4b39;}}
	&.light-border-color{.light();border-color: #dd4b39;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#dd4b39;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #dd4b39;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-linkedin{
	&.colored{.btn-base(#007bb6);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#007bb6;}}

	&.light-icon-color{.light();color: #007bb6;&:hover, &:focus{color:#007bb6;}}
	&.light-border-color{.light();border-color: #007bb6;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#007bb6;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #007bb6;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-instagram{
	&.colored{.btn-base(#517fa4);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#517fa4;}}

	&.light-icon-color{.light();color: #517fa4;&:hover, &:focus{color:#517fa4;}}
	&.light-border-color{.light();border-color: #517fa4;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#517fa4;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #517fa4;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-pinterest{
	&.colored{.btn-base(#cb2027);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#cb2027;}}

	&.light-icon-color{.light();color: #cb2027;&:hover, &:focus{color:#cb2027;}}
	&.light-border-color{.light();border-color: #cb2027;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#cb2027;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #cb2027;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-rss{
	&.colored{.btn-base(#FF8A00);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#FF8A00;}}

	&.light-icon-color{.light();color: #FF8A00;&:hover, &:focus{color:#FF8A00;}}
	&.light-border-color{.light();border-color: #FF8A00;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#FF8A00;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #FF8A00;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-soundcloud{
	&.colored{.btn-base(#ff3a00);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#ff3a00;}}

	&.light-icon-color{.light();color: #ff3a00;&:hover, &:focus{color:#ff3a00;}}
	&.light-border-color{.light();border-color: #ff3a00;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#ff3a00;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #ff3a00;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-tumblr{
	&.colored{.btn-base(#547F9D);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#547F9D;}}

	&.light-icon-color{.light();color: #547F9D;&:hover, &:focus{color:#547F9D;}}
	&.light-border-color{.light();border-color: #547F9D;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#547F9D;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #547F9D;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-twitter{
	&.colored{.btn-base(#55acee);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#55acee;}}

	&.light-icon-color{.light();color: #55acee;&:hover, &:focus{color:#55acee;}}
	&.light-border-color{.light();border-color: #55acee;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#55acee;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #55acee;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-vimeo{
	&.colored{.btn-base(#1ab7ea);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#1ab7ea;}}

	&.light-icon-color{.light();color: #1ab7ea;&:hover, &:focus{color:#1ab7ea;}}
	&.light-border-color{.light();border-color: #1ab7ea;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#1ab7ea;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #1ab7ea;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
.btn-youtube{
	&.colored{.btn-base(#e52d27);}
	&.simple-hover-icon-color{.simple;&:hover, &:focus{color:#e52d27;}}

	&.light-icon-color{.light();color: #e52d27;&:hover, &:focus{color:#e52d27;}}
	&.light-border-color{.light();border-color: #e52d27;}
	&.light-hover-colored{.light;&:hover, &:focus{.colored;}}
	&.light-hover-icon-color{.light;&:hover, &:focus{color:#e52d27;}}
	&.light-hover-border-color{.light;&:hover, &:focus{border-color: #e52d27;}}
	
	&.dark-hover-colored{.dark;&:hover, &:focus{.colored;}}
}
//END SOCIAL BUTTONS