/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */




/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}



/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}

.circles {
   overflow: hidden; width:100% !important; text-align:center; margin:15% auto 0px 15.5%;
}
.inner-circle .info {
    background-color: transparent;
    border: 0 none;
    padding: 0;
}
.circles .circle {
    background: #323232 none repeat scroll 0 0;
    border: 5px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    float: left !important;
    height: 100px;
    margin: 35px;
    padding: 58px;
    position: relative;
    text-align: center;
    transition: all 0.4s ease-in-out 0s;
    width: 100px;
}
.circles .circle .inner-circle {
    color: #bcd530;
    font-size: 14px;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-align: center !important;
    top: 0;
    width: 100%;
}
.circles .circle .inner-circle img {
    width: 100%;
}
.circles .circle .inner-circle hr {
    border: 2px solid #515151;
    padding: 0 !important;
    width: 80% !important;
    margin:14px auto 6px auto;
}
.circles .circle .inner-circle .circle-title{
	width:80%; 
	white-space: normal !important;
	font-size:14px;
	line-height:22px;
	font-weight:500px;
	color: #99C7F8;
	display:inline-block;
}

.circles .circle:hover .inner-circle hr {
    border: 2px solid #f05a29;
}

.circles .circle:hover .inner-circle .circle-title {
    color: #FFFFFF;
}

.circles .circle .inner-circle .info {
    display: block;
    font-size: 88%;
    font-style: italic;
    font-weight: normal;
    height: auto;
    margin-top: 8%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s ease-in-out 0s;
    width: auto;
}
.circles .circle .inner-circle .info a {
    color: white;
}
.circles .circle:hover {
    border: 5px solid #393939 !important;
    box-shadow: 0 0 0 112px #f05a29 inset, 0 0 0 16px rgba(60, 60, 60, 1), 0 1px 2px rgba(40, 40, 40, 0.1);
}
.circles .circle:hover .inner-circle {
    color: white;
}
.circles .circle:hover .inner-circle .info {
    color: white;
    opacity: 1;
    transform: scale(1);
}
.circles .circle1 .inner-circle img{
	margin:auto 0px auto -2px !important;
}
.circles .circle2 .inner-circle img{
	margin:auto 0px !important;
}
.circles .circle3 .inner-circle img{
	margin:auto 6px !important;
}

@media only screen and (min-width:770px) and (max-width:969px){
	/* styles for browsers larger than 770px; */
	.circles {
	   margin:12.5% auto 0px 12.5%;
	}
	.circles .circle {
	    /*
	    border: 4px solid white;
	    border-radius: 50%;
	    float: left !important;
	    padding: 58px;
	    */
	    padding: 64px;
	    margin: 30px 15px;
		height: 44px;
	    width: 44px;
	}
	.circles .circle .inner-circle .circle-title{
		width:85%; 
		font-size:12px;
		line-height:20px;
	}
	.circles .circle .inner-circle .info {
	    font-size: 11px;
	    margin-top:10%;
	}
	
	.circles .circle .inner-circle img{
		width: 85%;
	}
	
	.circles .circle:hover {
    	border: 5px solid #393939 !important;
    	box-shadow: 0 0 0 100px #f05a29 inset, 0 0 0 6px rgba(60, 60, 60, 1), 0 1px 2px rgba(40, 40, 40, 0.1);
	}
}
@media only screen and (min-width:970px) and (max-width:1269px){
	/* styles for browsers larger than 970px; */
	.circles {
	   margin:12.5% auto 0px 10.5%;
	}
	.circles .circle {
	    /*
	    border: 4px solid white;
	    border-radius: 50%;
	    float: left !important;
	    margin: 30px;
	    padding: 53px;
	    */
	    height: 86px;
	    width: 86px;
	}
	.circles .circle .inner-circle .info {
	    font-size: 68%;
	}
	.circles .circle .inner-circle .circle-title{
		font-size: 13px;
	}
}
@media only screen and (min-width:1270px){
	/* styles for browsers larger than 1270px; */
	.circles {
	   margin:14.5% auto 0px 14.5%;
	}
	.circles .circle {
	    /*
	    border: 4px solid white;
	    border-radius: 50%;
	    float: left !important;
	    margin: 30px;
	    padding: 53px;
	    
	    height: 92px;
	    width: 92px;*/
	}
	.circles .circle .inner-circle .info {
	    font-size: 85%;
	}
	.circles .circle .inner-circle .circle-title{
		font-size: 13px;
	}
}
@media only screen and (min-width:1439px){
	/* styles for browsers larger than 1439px; */
	.circles {
	   margin:15% auto 0px 13.5%;
	}
}
@media only screen and (min-width:2000px){
	/* for sumo sized (mac) screens */
	.circles { margin-left:16.5% !important; margin-top:16.5% !important;}
}
@media only screen and (max-device-width:480px){
	/* styles for mobile browsers smaller than 480px; (iPhone) */
	.circles {
	   margin:16.5% auto 0px 15.5%;
	}
	.circles .circle {
	    /*
	    border: 4px solid white;
	    border-radius: 50%;
	    float: left !important;
	    padding: 58px;
	    */
	    padding: 22px;
	    margin: 10px 10px;
		height: 22px;
	    width: 22px;
	}
	.circles .circle .inner-circle .circle-title{
		display:none;
	}
	.circles .circle .inner-circle .info {
	    display:none;
	}
	
	.circles .circle1 .inner-circle img{
		width: 100px;
		height: 60px;
		margin-left:-16px !important;
		margin-top:-5px !important;
	}
	
	.circles .circle2 .inner-circle img{
		width: 80px;
		height: 60px;
		margin-left:-6px !important;
		margin-top:-2px !important;
	}

	.circles .circle3 .inner-circle img{
		width: 75px;
		height: 55px;
		margin-left: -3px !important;
		margin-top: 0px !important;
	}

	.circles .circle .inner-circle hr{
		display:none;
	}
	
	.circles .circle:hover {
    	border: 5px solid #393939 !important;
    	box-shadow: 0 0 0 94px #f05a29 inset, 0 0 0 1px rgba(60, 60, 60, 1), 0 1px 2px rgba(40, 40, 40, 0.1);
	}
}
@media only screen and (device-width:768px){
	/* default iPad screens */
	.circles {
	   margin:11.5% auto 0px 12.5%;
	}
	.circles .circle {
	    /*
	    border: 4px solid white;
	    border-radius: 50%;
	    float: left !important;
	    padding: 58px;
	    */
	    padding: 62px;
	    margin: 30px 15px;
		height: 40px;
	    width: 40px;
	}
	.circles .circle .inner-circle .circle-title{
		width:95%; 
		font-size:12px;
		line-height:20px;
	}
	.circles .circle .inner-circle .info {
	    font-size: 11px;
	    margin-top:10%;
	}
	
	.circles .circle .inner-circle img{
		width: 85%;
	}
	
	.circles .circle:hover {
    	border: 5px solid #393939 !important;
    	box-shadow: 0 0 0 100px #f05a29 inset, 0 0 0 6px rgba(60, 60, 60, 1), 0 1px 2px rgba(40, 40, 40, 0.1);
	}
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
	/* For landscape layouts only */
}