/*
Designed by James Paik
*/

.navbar-custom {
	background-color:rgba(0,0,0,.5);
}	

.navbar-custom .nav li.active {
    outline: none;
    border-bottom: 2px solid rgba(1, 103, 56,.5);

}

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

.navbar-custom .navbar-brand .navbar-toggle {
    color: #fff;
}

.navbar-custom a {
    color: #fff;
}

ul, li{
    list-style-type: none;
}

h4{
	color:black;
}

.modal-open {
    overflow: visible;
}

.modal-dialog{
	width:50% !important;
	background-position:center;

}
@media(max-width:760px) {
	.modal-dialog, .modal-header, .modal-body,.modal-content{
		width:100%;
	}
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

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

.intro-text, .intro-text a{
	font-size:18px;
	padding-top:10px;
	color:black;
	font-weight:400;
}

.info {
	background:url(../img/logo.png) no-repeat center 21% scroll, url(../img/overlay.png) repeat, url(../img/AloeBG.jpg) no-repeat top center scroll;
	background-color:#f5f5f5;
	height:65%;
	background-attachment:fixed;
	-webkit-background-size: 40%, auto, cover;
    -moz-background-size: 40%, auto, cover;
    background-size: 40%,auto, cover;
    -o-background-size: 40%,auto, cover;
}

.aloevine{
	background:url(../img/Aloevine-Logo.png) no-repeat center 21% scroll, url(../img/overlay.png) repeat, url(../img/AloeBG.jpg) no-repeat top center scroll;
	background-color:#f5f5f5;
	height:50%;
	background-attachment:fixed;
	-webkit-background-size: 50%, auto, cover;
    -moz-background-size: 50%, auto, cover;
    background-size: 50%,auto, cover;
    -o-background-size: 50%,auto, cover;
}

.salutti{
	background:url(../img/Salutti-Logo.png) no-repeat center 21% scroll, url(../img/overlay.png) repeat, url(../img/AloeBG.jpg) no-repeat top center scroll;
	background-color:#f5f5f5;
	height:50%;
	background-attachment:fixed;
	-webkit-background-size: 40%, auto, cover;
    -moz-background-size: 40%, auto, cover;
    background-size: 40%,auto, cover;
    -o-background-size: 40%,auto, cover;
}

.products{
	/*background:url(../img/Background2.png) no-repeat center;*/
	background-attachment:fixed;
	height:100%;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	padding-top:100px;
	background-color:#ffffff;

}

@media(min-width:768px){
	.centerv{
		display: flex; 
		align-items: center;
		}
}

.products a{
	color:#000;
}
.products a:hover, .products a:focus{
	color:#016738;
}

#bordclick{
	padding: 20px 5px 20px 5px;
	border: 2px solid black;
	border-radius: 25px;
}

#infoSection{
	background-color:#fff;
	color:#000;
}

@media(max-width:760px) {
	.info{
		background:url(../img/logo.png) no-repeat center 60% scroll;
		height:50%;
		-webkit-background-size: 90%;
		-moz-background-size: 90%;
		background-size: 90%;
		-o-background-size: 90%;
		border-bottom:1px solid black;
	}	
	.aloevine{
		background:url(../img/Aloevine-Logo.png) no-repeat center 60% scroll;
		height:50%;
		-webkit-background-size: 90%;
		-moz-background-size: 90%;
		background-size: 90%;
		-o-background-size: 90%;
		border-bottom:1px solid black;
	}
	.salutti{
		background:url(../img/Salutti-Logo.png) no-repeat center 60% scroll;
		height:50%;
		-webkit-background-size: 90%;
		-moz-background-size: 90%;
		background-size: 90%;
		-o-background-size: 90%;
		border-bottom:1px solid black;
	}
	.products{
		background:url(../img/logo.png) no-repeat center 40% scroll;
		height:40%;
		-webkit-background-size: 90%;
		-moz-background-size: 90%;
		background-size: 90%;
		-o-background-size: 90%;
		color:black;
		padding-top:350px;
	}
	#mobSpace{
		padding-bottom:10px;
	}
	#bordclick{
		border: 2px solid black;
	}
	.products a{
	color:#000;
	}
	.products img{
		width:50%;
	}
	#brand {
	visibility:hidden;
	content:'';
    }
    #brand img{
	padding: 0 0;
	visibility:visible;
	width:30px;
    }	
	.mbreak{
		padding:20px;
	}

}

@media(max-height:850px) and (min-width:800px){
	.info{
		background:url(../img/logo.png) no-repeat center 30% scroll, url(../img/overlay.png) repeat, url(../img/AloeBG.jpg) no-repeat top center scroll;
		background-color:#f5f5f5;
		height:75%;
		background-attachment:fixed;
		-webkit-background-size: 40%, auto, cover;
		-moz-background-size: 40%, auto, cover;
		background-size: 40%,auto, cover;
		-o-background-size: 40%,auto, cover;
	}	
}

hr{
	border-style: 1px solid;
	border-color:#4c4c4c;
}

#span1 h1{
	font-size: 300%;
	color:#3770a6;
}

#socialicons{
    border: 1px solid rgba( 237, 32, 36,.5);
    color: rgba(255,255,255,.8);
    background-color: transparent;
}
#socialicons:hover,
#socialicons:focus {
    border: 1px solid rgba( 255,255,255,1);
    outline: 0;
    color: #fff;
    background-color: rgba( 237, 32, 36,.5);
}

#whiteColor{
	color:#fff;
}

#logo{
	width:100%;
}
@media(max-height:700px){
	#logo{
		margin-top:10%;
		width:90%;
	}
}

/*Arrow in the bottom left that when clicked goes to top of the page*/
#arrows, #arrows a{
	color: rgba(0,0,0,.4);
	font-size:30px;
	line-height: 30px;
	border-top:0;
	right:15px;
}
#arrows{
	visibility:hidden;
}
#arrows a{
	visibility:visible;
	background-color: rgba(252,252,252,.3);
	-webkit-border-radius: 12px; 
	-moz-border-radius: 12px; 
	border-radius: 12px; 
	padding-left:5px;
	padding-right:2px;
}
#arrows a:hover, #arrows a:focus{
	background-color: rgba(252,252,252,.6);
	color: rgba(0,0,0,.8);
}


/*For mobile*/
@media(max-width:760px) {
	#arrows{
	visibility:hidden;
	right:15px;
	}
	#arrows a{
		font-size:25px;
	}
    .introFix{
	color:#000;
    }
    .navbar-brand{
	font-size:0px;
    }
    .navbar {
        padding: 0px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background-color: 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;
    }
	.navbar-custom {
		background-color:rgba(0,0,0,.5);
	}	
    .top-nav-collapse {
        padding: 0;
        background-color: rgba(0,0,0,.4);
    }

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