html, body{height:100%;}


.navbar-nav {
	float: right;
}

/* --- Glyphicons ---------------------------- */

.glyphicon-ok {
	color: #99B898;
}

.glyphicon-minus {
	color: #E84A5F;
}


/* --- NAVIGACIJA ----------------------- */

.clearfix_packets {
	margin: 0 auto;
	
}

.masthead-nav > .active > a, .masthead-nav > .active > a:hover, .masthead-nav > .active > a:focus {
	color: #99B898;
	border-bottom-color:#99B898;
}
.masthead-nav > li > a:hover, .masthead-nav > li > a:focus {
	border-bottom-color:#FF847C;
}

.masthead-nav > li > a {
	font-weight: normal;
	color: #556270;
}

section.pricing-section {
	margin-top: 50px;
}

p.promo {
	background: blue;
}
/* --- Plans ---------------------------- */

.my_planHeader {
    text-align: center;
    color: white;
    padding-top:0.2em;
    padding-bottom:0.2em;
}
.my_planTitle {
    font-size:1.9em;
    text-transform: uppercase;
    font-weight: bold;
}
.my_planPrice {
    font-size:1.1em;
    font-weight: bold;    
}
.my_planDuration {
    margin-top: -0.6em;
}

@media (max-width: 768px) {
    .my_planTitle {
        font-size: small;
    }    
}


@media (max-width:992px) {
	.my_planTitle {
		font-size: 1.4em;
	}
}

@media (max-width:480px) {
	.my_planTitle {
		font-size: 1em;
	}
}

@media (max-width:480px) {
	.my_plan4_temp {
		font-size: 0.8em;
	}
}


/* --- Features ------------------------- */


@media (max-width: 768px) {
    .my_feature {
        text-align: center
    }
 }

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
   
}    

/* --- Plan 1 --------------------------- */

.my_plan1 {

    border: 1px dotted;
   
   }

.my_planHeader.my_plan1 a {
    background: #929292;
    color:white;
    margin-top: 10px;
}

.my_planHeader.my_plan1 {
    background: rgba(255, 255, 255, 0.2);
    border-bottom: thick solid #2A363B;
}

.my_planHeader.my_plan1 > button {
	margin-top: 10px;
}

/* --- Plan 2 --------------------------- */


/*
	.my_plan2 {
*    background: rgba(255, 255, 255, 0.5);
*   
* }
*/

.my_plan2 {
	
	border: 1px dotted;
	border-left: 10px solid #E84A5F;
	border-right: 10px solid #E84A5F;
	
}

.my_planHeader.my_plan2 a {
    background: #929292;
    color:white;
    margin-top: 10px;
}

.my_planHeader.my_plan2 {
    background: rgba(42, 54, 59, 0.6);
    border-bottom: thick solid rgb(42, 54, 59);
    border-top: 10px solid #E84A5F;
    margin-top: -15px;
}

.my_planHeader.my_plan2 > button {
	margin-top: 10px;
}

p.promo {
	font-size: 1em; color: #fff; 
	position: absolute; 
	top: 3.8em; 
	left: -17px; 
	z-index: 1000; 
	width: 120%; 
	margin: 0; 
	padding: .4em 7px .4em; 
	background: #E84A5F; 
	box-shadow: 0 2px 4px rgba(0,0,0,.25); 
	
}

.my_planPrice {
	font-size: 2.1em;
}


/* --- Plan 3 --------------------------- */

.my_plan3 {
     border: 1px dotted;
}

.my_planHeader.my_plan3 a {
    background: #929292;
    color:white;
    margin-top: 10px;
}

.my_planHeader.my_plan3 {
    background: rgba(255, 255, 255, 0.2);
    border-bottom: thick solid #2A363B;
}

.my_planHeader.my_plan3 > button {
	margin-top: 10px;
}



/* --- Plan 4 --------------------------- */

.my_plan4 {
    border: 1px dotted; 
}

.my_planHeader.my_plan4 a {
    background: #929292;
    color:white;
    margin-top: 10px;
}

.my_planHeader.my_plan4 {
    background: rgba(255, 255, 255, 0.2);
    border-bottom: thick solid #2A363B;
}

.my_planHeader.my_plan4 > button {
	margin-top: 10px;
}


/* --- Additional --------------------------- */

.col-xs-12.col-sm-4.my_feature_more {
	padding-top: 17px;
}

.my_planFeature {
    text-align: center;
    font-size: 2em;
}

.my_planFeature i.my_check {
    color: green;
}


@media only screen and (max-width: 481px) {
    .my_planPrice {
    	font-size: 0.9em;
    	}
   
}

@media only screen and (max-width: 1200px) {
    .my_planTitle {
    	font-size: 1.1em;
    	}
   
}

@media only screen and (max-width: 481px) {
    .my_planTitle {
    	font-size: 0.7em;
    	margin-left: -10px;
    	}
   
}

@media only screen and (max-width: 481px) {
    .my_plan2 > .my_planTitle {
    margin-left: -10px;
    
    
    	}
   
}

@media only screen and (max-width: 481px) {
    .my_plan2 > .my_planPrice {
    margin-left: -5px;
    
    
    	}
   
}


@media only screen and (max-width: 1200px) {
    .my_plan2 > .my_planDuration {
    margin-left: -14px;
    
    
    	}
   
}

@media only screen and (max-width: 481px) {
    .my_plan2 > .my_planPrice_zen {
    margin-left: -10px;
    
    
    	}
   
}


@media only screen and (max-width: 481px) {
    .my_plan2 > .btn-default {
    margin-left: -10px;
    
    
    	}
   
}

@media only screen and (max-width: 481px) {
    .my_plan4 > .my_planPrice_zen {
    margin-left: -10px;
    
    
    	}
   
}



@media only screen and (max-width: 481px) {
    .my_planDuration {
     margin-left: -5px;
    
    
    	}
   
}


@media only screen and (max-width: 1200px) {
    p.promo {
    	top:5em;
    	font-size: 0.8em;
    	margin: 5px;
    	padding: .2em 2px .2em;
    	}
   
}

@media only screen and (max-width: 481px) {
    p.promo {
    
    	padding: 0px;
    	
    	}
   
}




@media only screen and (max-width: 1200px) {
    .my_plan2 > .btn-pop {
   	  margin-left: -10px;
    	}
   
}

@media only screen and (max-width: 600) {
    .my_plan4 > .my_planTitle {
   	  margin-left: -10px;
    	}
   
}


a.button.btn-free {
	background: rgba(255, 255, 255, 0.6);
	color: #616161;
	
}

a.button.btn-free.btn-pop:hover {
	color:#fff;
}

.col-xs-12.col-sm-offset-4.col-sm-8 {
	margin-top: 40px;
}