/*
*	HerDesire.net
*	Homepage re-design
*	
*	by: Paola Garcia C.
*	last update: 12/27/16 2:10pm
*/
.main-content{

	max-width: 90%;
}
.main-subheading{
	color: #7D7D7D;
	font-weight: 700;
}

.login-top-bar {
	background-color: #444;
	height: 60px;
}


.new-navbar {
	float: right;
	text-align: center;
	margin-left: 23%; /* Nav + Login = happiness */
}

.new-navbar li a{
	margin: 15px -8px;
}

.circle-nav { 
   width: 100px;
   height: 100px;
   background: #E0E0E0; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 10px;
}

.circle-nav:hover { 
   background: #A769BE;
}

.circle-num { 
   width: 70px;
   height: 70px;
   background: #CAA6D8; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin: 10px;
   display:inline-block;
   line-height: 70px;
   text-align:center;
   margin: 8px 5px;
   box-shadow: 3px 0px rgba(51,102,0,0.6);
}

.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    color: #333;
    letter-spacing: none !important;
}
.smallScreensOnly {
    display: none !important;
}
.spacer {
	width: 100%;
	height: 180px;
}

.green-banner {
	background-color: #C3D831;
	text-align: center;
	vertical-align: middle;
	box-shadow: 3px 3px rgba(51,102,0,0.6);
}


#main-banner-logo{
	width: 75%;
}

#hero {	
	background-color: #A769BE;
    border-bottom: 1px solid #A769BE;
    background-size: 100%;
    background-repeat: no-repeat;
	min-height: 353px;
}

#hero .btn {
    border-radius: 10px;	
}

#bs-navbar {
	min-width: 878px;
}

.purple-gradient {	
    background-color: #A769BE;
    background-image:
	  linear-gradient(
	    to left,
	    #A769BE,
	    #CAA6D8 85%
	  );
}

.recent-cme-banner {	
	border: 1px solid #EAE4EA;
	min-height: 124px;
	padding: 10px;
	line-height: 1.5em;
}

.recent-cme-banner img {	
	 width: 123px;
	 float: left;
	  -moz-transition: all 1s ease;
	  -webkit-transition: all 1s ease;
	  transition: all 1s ease;
}

.recent-cme-banner:hover img {	
  	-moz-transform: scale(1.1);
  	-webkit-transform: scale(1.1);
  	transform: scale(1.1);
}

.green-banner img {	
	  -moz-transition: all 1s ease;
	  -webkit-transition: all 1s ease;
	  transition: all 1s ease;
}

.green-banner:hover img {	
  	-moz-transform: scale(1.1);
  	-webkit-transform: scale(1.1);
  	transform: scale(1.1);
}

.feature {	
	 margin: 0 auto 20px auto !important;
}

.feature a:hover, a:link, a:visited, a:active {	
	text-decoration: none;
}

#hero .unslider-arrow {
	width: 32px;
	height: 32px;	
	background: rgba(0,0,0,.2) no-repeat 50% 50%;
	background-image: url('../../img/unslider-arrow.png');
	border-radius: 32px;
	opacity: .6;
	transition: opacity .2s;
	top: 35%;
}
#hero .unslider-arrow:hover {	
	opacity: 1;
}

#hero .unslider-arrow.prev {	
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

#hero-img-caption {
	margin: -6% 1%;
	width: 90%;
}

.hero-left {
	float: left;
	width: 60%;	
}

.hero-right {
	float: right;
	width: 40%;
    margin: 50px auto;
}

.membership-form {	
	background-color: #EAE4EA;
	color: #947698;
	padding: 20px;
}

.membership-form input {
	width: 95%; 
	border: 1px solid #947698; 
	padding: 5px;
	margin: 10px;
	display: inline;
}

.membership-form .form-control {
	background-color: #FFFFFF;
	color: #947698;
}

.membership-form .btn {
    border-radius: 10px;
	margin-left: 10px;	
}

#membership-form-title {
	margin-top: 35px;
	margin-bottom: 15px;
	border-bottom: 2px solid #92A11E;	
}

.divider{
    padding: 5px;
    border-left:2px solid #91A600;
}

.section-divider-green {
	margin-bottom: 15px;
	border-bottom: 2px solid #92A11E;		
}

.section-divider-green h4, #membership-form-title h4 {
	margin-bottom: 1px;		
}

#hero h3 {
	font-size: 40px;	
}

#hero p {
	font-size: 15px;	
}

/* Login CSS */
#login-top-profile {
    color: #FFFFFF;
    text-align: right;
    font-size: 13px;
}
#login-top-profile b {
    color: #d893e4;
}

.editProf {
    color: #d893e4;
    cursor: pointer;
}

.logout {
    color: #d893e4;
    cursor: pointer;
}

#profile-placeholder{
    display:inline-block;
    margin-left: 5px;
}
.forgot, .forgot a {
    font-size: 13px;
    color: #d893e4;
}
.forgot a:hover {
    font-weight: 800;
}
/* End of Login CSS */


/* Start Bootstrap Overrides */
.container-fluid {
    padding-right: 120px !important;
    padding-left: 120px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}	
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #444;
}	
.navbar-toggle {
    background-color: #444;
}	
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #fff;
}

/* End Bootstrap Overrides */
.login-container{
    width: 33%;
    margin: 0 auto;
}

#ellaCogniMed {
    display: block;
	position: absolute;
    width: 100%;
    top: 75px;
    left: 525px;
	left: 300px;
    max-width: 200px;
}

#ellaCogniMed {
    max-width: 180px;
    left: 420px;
}

#ellaCogniMed img {
    width: 100%;
	position: relative;
}

#ellaCogniMed #CogniMedLogo {
    display: block;
    top: 10px;
    left: 0;
	width: 90%;
}

#ellaLogoMobile, #CogniMedLogoMobile {
    position: relative;
	display: inline-block;
}

#ellaLogoMobile {
    top: 12px;
    left: 3px;
	width: 90%;
	max-width: 120px;
}

#CogniMedLogoMobile {
    top: 12px;
    left: 13px;
	width: 90%;
	max-width: 120px;
}

@media only screen and (max-width: 991px){
   .spacer {
		width: 100%;
		height: 106px;
    }	
	.spacer2 {
	width: 100%;
	height: 106px;
	}
	#hero-left {
		/*float: left;*/
		width: 100%;	
	}	
	#hero-right {
		float: right;
		width: 100%;
		margin: 50px 0%;
    }
    .login-container{
        width: 76%;
        margin: 0;
    }
}
	
@media only screen and (max-width: 1024px){	
		
	/* @media Start Bootstrap Overrides */

	.container-fluid {
		padding-right: 12px !important;
		padding-left: 15px !important;
	}
	.navbar-inverse {
		background-color: #fff;
		border-color: #fff; 
	}
	
	/* @media End Bootstrap Overrides */
	
    #ellaCogniMed {
        display: block;
        top: 75px;
        max-width: 180px;
        left: 420px;
    }
	
}

@media only screen and (min-width: 1025px) and (max-width: 1206px){

	.divider{
		border-left: 0px solid #91A600;
		border-bottom: 2px solid #91A600;
		width: 90%;
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		margin-left: auto;
		margin-right: auto;
	}
	
    #ellaCogniMed {
        display: block;
        top: 75px;
        max-width: 180px;
        left: 420px;
    }
}

@media only screen and (min-width: 1206px) and (max-width: 1238px){
	#main-banner-logo {
		  width: 75%;
	}
	
    #ellaCogniMed {
        left: 500px;
    }
	
}

@media only screen and (max-width: 661px){	
	.divider {
		border-left: 0px solid #91A600;
		border-bottom: 2px solid #91A600;
		width: 90%;
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		margin-left: auto;
		margin-right: auto;
	}	
	#award-img {
		width: 15%;
    }
    .login-container{
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 992px) {
	.navbar-default .nav > li > a:hover, 
	.navbar-default .nav > li > a:focus:hover {
		color: #fff !important;
	}
	
	#ellaCogniMed {
		display: block;
		position: absolute;
		width: 100%;
		top: 75px;
		max-width: 180px;
		left: 185px;
	}
}

@media only screen and (min-width: 991px){
	.nav-item {
		line-height:1.5 !important;
	}
	
	.navbar-default .nav > li > a, 
	.navbar-default .nav > li > a:focus {
		color: #333;
		letter-spacing: 1.1px;
	}	
	
	#ellaLogoMobile {
		display: none;
	}

	#CogniMedLogoMobile {
		display: none;
	}
}

@media only screen and (min-width: 501px){	
	.lgInput {
		width: 49%;
    	display: inline-block;
    }
}

@media only screen and (max-width: 1409px){	
	.new-navbar {
		margin-left: 0%; /* Nav + Login = happiness */
	}
}

@media only screen and (min-width:768px) {	
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 90%;
		margin-left:10%;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		padding: 12px;
		z-index:999;
		margin-top: -18px;
		border-radius: 20px;
		width: 190px;
		opacity: 0.9;
	}
	
	.dropdown-content ul {
		list-style: none;		
	}
	
	.dropdown-content ul li a {
		color: #444;		
	}
	
	.dropdown-content ul li a:hover {
		color: #A769BE;	
		font-weight: 800;
    }
	

	

}

#CogniMedLogo {
    position: absolute;
    width: 100%;
    top: 75px;
    left: 275px;
    max-width: 200px;
}
		
@media (min-width: 1200px) {

    #CogniMedLogo {
        display: none;
    }

    #ellaCogniMed {
        display: block;
        top: 75px;
        max-width: 180px;
        left: 420px;
    }

}

@media (min-width: 1330px) {

    #CogniMedLogo {
        display: block;
        top: 100px;
        max-width: 200px;
        left: 515px;
    }

    #ellaCogniMed {
        display: block;
        top: 75px;
        max-width: 200px;
        left: 520px;
    }
	
    #main-banner-logo {
        width: 100%;
    }

}


@media only screen and (max-width:768px) {	
    .login-container{
        width: 90%;
        margin: 0 auto;
    }
    .smallScreensOnly {
        display: block !important;
    }
}