/* Add additional stylesheets below */
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
h1, h2 {font-family: 'Fjalla One', sans-serif;}
body, h3, h4, h5, h6, strong{ font-family: -webkit-body; font-family: 'Roboto'; font-weight: 300;}
body {color: #393939; background-color:#fff; margin:0px; padding:0px; }

a {
	color: #1f71c8;
	text-decoration: none;
}

a:hover {
	color: #444;
}


/* Home */

.plan{margin: 50px 0 60px 0;position: relative; border: 1px solid #ddd;
	.btn:hover {color: #ffffff;}
	.btn:hover {color: #ffffff;}
	.btn-large{padding:20px 28px; font-weight:bold}
	&.selected {margin: 0 -20px;line-height:1.8em;}
	&.selected  ul li {display: block;padding: 20px 15px;}
	&.over {-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;position: relative;z-index: 50; 
	&:hover, &.selected {
		-webkit-box-shadow: 0px 0px 24px #c7c7c7;
		-moz-box-shadow: 0px 0px 24px #c7c7c7;
		box-shadow: 0px 0px 24px #c7c7c7;
		z-index: 60;}
	}
	a:hover {text-decoration: none; cursor: pointer; border:1px solid transparent}

}

.paperOverView{ margin-top:10px; background: rgb(84, 85, 85); padding:8px 18px 10px; text-align:center;line-height:1.5em; border: 1px solid rgb(71, 71, 71);border-right: none;border-left: none; color:#fff }

.plan:hover .paperOverView:hover {background-color: #0099ff;
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0077cc));
background: -webkit-linear-gradient(top, #0099ff, #0077cc);
background: -moz-linear-gradient(top, #0099ff, #0077cc);
background: -ms-linear-gradient(top, #0099ff, #0077cc);
background: -o-linear-gradient(top, #0099ff, #0077cc);
color: #f8f8f3;
text-shadow: rgba(0, 0, 0, 0.75) 0 -1px 0;
border: 1px solid rgb(0, 133, 255);
}


/* #### Mobile Phones Portrait #### */
@media screen and (max-width:480px) {
	.box {
		width: 41.6666%;
		height:420px;
		margin:10px;		
	}
	.boxInner img {
		width: 100%;
		height:420px;
	}


}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
	.box {
		height:420px;
		width: 41.6666%;
		margin:10px;		
	}
	.boxInner img {
		width: 100%;
		height:420px;
	}
}



@media screen and (max-width: 768px) {
	.box {
		width: 41.6666%;
		height:370px;
		margin: 10px;
	}
	.boxInner img {
		width: 100%;
		height:370px;
	}   

}

@media screen and (min-width:769px) {
	.box {
		width: 22%;
		height:440px;
		margin: 16px 13px;
	}
	.boxInner img {
		width: 100%;
		height:440px;
	}   
}