/*------------------------------------------------------------------
[Master Stylesheet]

Project:	News Agency
Version:	1.0
Assigned to:	Templines
Primary use:	News Agency
-------------------------------------------------------------------*/



/* FONTS*/
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);
@import url('../fonts/Icon-font-7-stroke/css/pe-icon-7-stroke.css');
@import url('../fonts/font-awesome-4.5.0/css/font-awesome.min.css');



/* PLUGIN CSS */

@import url('../plugins/bootstrap/bootstrap.css');                /* bootstrap */
@import url('../plugins/3d-bold-navigation/style.css');          /* sidebar panel */
@import url('../plugins/bootstrap-select/bootstrap-select.css');   /* select customization-2 */
@import url('../plugins/slider-pro/slider-pro.css');         /* main slider */
@import url('../plugins/owl-carousel/owl.carousel.css');              /* other sliders */
@import url('../plugins/owl-carousel/owl.transitions.css');           /* other sliders */
@import url('../plugins/owl-carousel/owl.theme.css');                 /* other sliders */
@import url('../plugins/flexslider/flexslider.css');         /* slider */
@import url('../plugins/prettyphoto/prettyPhoto.css');            /* modal */
@import url('../plugins/isotope/isotope.css');                        /* isotope */
@import url('../plugins/datetimepicker/jquery.datetimepicker.css');          /* calendar */
@import url('../plugins/news-ticker/css/endlessRiver.css');          /* effects */
@import url('../plugins/validation/validation-2.2.min.css');          /* validation */



/* MAIN CSS */

@import url('theme.css');
@import url('magnific-popup.css');
@import url('color.css');
@import url('responsive.css');


.small-dialog {
	background: white;
	padding: 20px 30px;
	text-align: left;
	max-width: 600px;
	margin: 40px auto;
	position: relative;
	
}

/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;

	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 



	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}

.row.equal-5-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) { 
	.row.equal-5-column {
		display: block;
	}

	.col-ec-2 {
		width: 100%;
	}


	.col-ec-2 img {
		width: 200px !important;
	}

}


@media screen and (max-width: 480px) { 
	img.sp-image.img-responsive {
	    margin-left: 0!important;
	    width: 100% !important;
	    height: auto !important;
	}

	
	.col-ec-4 {
		width: 100%;
	}
}


@media (min-width: 768px) {
     .col-ec-2 {
     	width: 20%;
     }

     .col-ec-4 {
     	width: 33.33%;
     }
}