/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
 
 
/*==========  Mobile First Method  ==========*/
 
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}


/*==========  Non-Mobile First Method  ==========*/
 
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {
	.portfolio figure {
	width: 100%;
}
.portfolio figure > img {
	/* display: block; */
	margin: 0 auto;
	width: 100%;
}
.css3accordion {
	width: 100%;
	height: 300px;
	 margin: 0 auto 10px; 
	overflow: auto;
	/* position: relative; */
}
.css3accordion > ul {
	text-align: left;
}
.css3accordion > ul > li {
	width: calc(98% - 20px);
	padding-top: 20px;
	position: relative;
	float: none;
	overflow: auto;
	margin-right: 20px;
	border-top: 4px solid #E7E7E7;
}
.css3accordion > ul > li .thumb {
	width: calc(100% - 10px);
	float: none;
}
.css3accordion > ul > li.last {
	width: 100%;
}
.clearboth{ clear:both;}
.css3accordion>ul>li:hover:not(.last) {width:100%;}
.css3accordion>ul>li:hover ~ li {width: calc(100% - 10px);}
.divider { margin-top:20px;}
.css3accordion .hoverBorderWrapper >img{ text-align:left;}

#footer > .pt-70{padding-top: 20px !important;}	
.clearboth{ clear:both;margin-top: 5px;}

}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 479px) {
	.portfolio figure {
	width: 100%;
}
.portfolio figure > img {
	/* display: block; */
	margin: 0 auto;
	width: 100%;
}
.css3accordion {
	width: 100%;
	height: 300px;
	 margin: 0 auto 10px; 
	overflow: auto;
	/* position: relative; */
}
.css3accordion > ul {
	text-align: left;
}
.css3accordion > ul > li {
	width: calc(98% - 20px);
	padding-top: 20px;
	position: relative;
	float: none;
	overflow: auto;
	margin-right: 20px;
	border-top: 4px solid #E7E7E7;
}
.css3accordion > ul > li .thumb {
	width: calc(100% - 10px);
	float: none;
}
.css3accordion > ul > li.last {
	width: 100%;
}
.css3accordion>ul>li:hover:not(.last) {width:100%;}
.css3accordion>ul>li:hover ~ li {width: calc(100% - 10px);}
.divider { margin-top:20px;}
.css3accordion .hoverBorderWrapper >img{ text-align:left;}

#footer > .pt-70{padding-top: 20px !important;}	
.clearboth{ clear:both;margin-top: 5px;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 360px) {
	
	.portfolio figure {
	width: 100%;
}
.portfolio figure > img {
	/* display: block; */
	margin: 0 auto;
	width: 100%;
}
.css3accordion {
	width: 100%;
	height: 300px;
	 margin: 0 auto 10px; 
	overflow: auto;
	/* position: relative; */
}
.css3accordion > ul {
	text-align: left;
}
.css3accordion > ul > li {
	width: calc(98% - 20px);
	padding-top: 20px;
	position: relative;
	float: none;
	overflow: auto;
	margin-right: 20px;
	border-top: 4px solid #E7E7E7;
}
.css3accordion > ul > li .thumb {
	width: calc(100% - 10px);
	float: none;
}
.css3accordion > ul > li.last {
	width: 100%;
}
.css3accordion>ul>li:hover:not(.last) {width:100%;}
.css3accordion>ul>li:hover ~ li {width: calc(100% - 10px);}
.divider { margin-top:20px;}
.css3accordion .hoverBorderWrapper >img{ text-align:left;}

#footer > .pt-70{padding-top: 20px !important;}
.clearboth{ clear:both;margin-top: 5px;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 319px) {
		.portfolio figure {
	width: 100%;
}
.portfolio figure > img {
	/* display: block; */
	margin: 0 auto;
	width: 100%;
}
.css3accordion {
	width: 100%;
	height: 300px;
	 margin: 0 auto 10px; 
	overflow: auto;
	/* position: relative; */
}
.css3accordion > ul {
	text-align: left;
}
.css3accordion > ul > li {
	width: calc(98% - 20px);
	padding-top: 20px;
	position: relative;
	float: none;
	overflow: auto;
	margin-right: 20px;
	border-top: 4px solid #E7E7E7;
}
.css3accordion > ul > li .thumb {
	width: calc(100% - 10px);
	float: none;
}
.css3accordion > ul > li.last {
	width: 100%;
}
.css3accordion>ul>li:hover:not(.last) {width:100%;}
.css3accordion>ul>li:hover ~ li {width: calc(100% - 10px);}
.divider { margin-top:20px;}
.css3accordion .hoverBorderWrapper >img{ text-align:left;}
.clearboth{ clear:both;margin-top: 5px;}

#footer > .pt-70{padding-top: 20px !important;}
}