
/* ***************************************************
	ReadImagesBox - START ...
	
	VERSION 2015-08-02 - padding 10 on readimages class
	VERSION 2014-12-28 - Title, Pink, Round
	VERSION 2014-12-27
	VERSION 2012.12.04
	
*************************************************** */
/* clear:both can help to keep elements within the div */
.BoxThumbs {
	min-height: 40px;
	min-width: 40px;	
	margin:0px;
	padding: 18px 10px 18px 10px;	
	
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	/*
	border: 1px solid;
	border-color: #CCC #AAA #AAA #CCC;
	
	box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5);
	*/
	
	/* Glass Effect http://dabblet.com/gist/2775781 
	background-clip: padding-box;           
    border: 4px solid rgba(255,255,255,.2);    
    box-shadow:
      0 0 1px rgba(255,255,255,.8),         
      0 0 3px rgba(0,0,0,.5),               
      1px 1px 0 rgba(0,0,0,.5) inset,       
      -1px -1px 0 rgba(0,0,0,.5) inset;
	 */
		 
	/* Glass effect */
   border: 1px solid rgba(0,0,0,0.5);
   
   -moz-border-radius: 10px 10px 2px 2px;  
	-khtml-border-radius: 10px 10px 2px 2px;
   -webkit-border-radius: 10px 10px 2px 2px;  
   border-radius: 10px 10px 2px 2px;
	
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);	 
}

#readimages-swiper-carousel .swiper-slide {
	margin-top:6px;
}

.ReadImagesBox-transparent,
.ReadImagesBox-transparent-blue,
.ReadImagesBox-transparent-red,
.ReadImagesBox-transparent-green,
.ReadImagesBox-blue,
.ReadImagesBox-red,
.ReadImagesBox-gray,
.ReadImagesBox-green,
.ReadImagesBox-pink,
.ReadImagesBox-white,
.ReadImagesBox-black{
	-moz-border-radius: 10px 10px 2px 2px;  
	-khtml-border-radius: 10px 10px 2px 2px;  
	-webkit-border-radius: 10px 10px 2px 2px;  
	border-radius: 10px 10px 2px 2px; 
	margin:0 auto;
}

.ReadImagesBox-transparent{
	background: rgba(0,0,0,0.25);
}

.ReadImagesBox-transparent-blue{
	background: rgba(2, 76, 187, 0.35)
}
.ReadImagesBox-transparent-red{
	background: rgba(187, 2, 2,0.35);
}
.ReadImagesBox-transparent-green{
	background: rgba(9,187,1,0.35);
}


.ReadImagesBox-blue {
	background-color:#08294d;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-radial-gradient(circle, #1a82f7, BLACK); 			/* Safari 5.1+, Chrome 10+ */
	background: -moz-radial-gradient(circle, #1a82f7, BLACK); 			 	/* Firefox 3.6+ */ 
	background: -ms-radial-gradient(circle, #1a82f7, BLACK); 				/* IE 10 */ 			
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #1a82f7, BLACK); /* Opera 12 */
}

.ReadImagesBox-red {
	background-color:#ba0e19;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ba0e19), to(#1c0202 ));
	background: -webkit-radial-gradient(circle, #ba0e19, #1c0202 );
	background: -moz-radial-gradient(circle, #ba0e19, #1c0202 );
	background: -ms-radial-gradient(circle, #ba0e19, #1c0202 );
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #ba0e19, 1c0202); /* Opera 12 */	
}

.ReadImagesBox-green {
	background-color:#2F6610;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#2F6610), to(#012200 ));
	background: -webkit-radial-gradient(circle, #2F6610, #012200 );
	background: -moz-radial-gradient(circle, #2F6610, #012200 );
	background: -ms-radial-gradient(circle, #2F6610, #012200 );
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #2F6610, 012200); /* Opera 12 */	
}
.ReadImagesBox-pink {
	background-color:#ffffff;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#f8f4f0), to(#f1e5da)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-radial-gradient(circle, #f8f4f0, #f1e5da)); 			/* Safari 5.1+, Chrome 10+ */
	background: -moz-radial-gradient(circle, #f8f4f0, #f1e5da)); 			 	/* Firefox 3.6+ */ 
	background: -ms-radial-gradient(circle, #f8f4f0, #f1e5da)); 				/* IE 10 */ 			
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #f8f4f0, #f1e5da)); /* Opera 12 */	
}
.ReadImagesBox-gray {
	background-color:#ffffff;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(white), to(#E0E0E0)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-radial-gradient(circle, #FFFFFF, #E0E0E0); 			/* Safari 5.1+, Chrome 10+ */
	background: -moz-radial-gradient(circle, #FFFFFF, #E0E0E0); 			 	/* Firefox 3.6+ */ 
	background: -ms-radial-gradient(circle, #FFFFFF, #E0E0E0); 				/* IE 10 */ 			
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #FFFFFF, #E0E0E0); /* Opera 12 */	
}
.ReadImagesBox-white {
	background-color:#ffffff;			
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(white), to(#F0F0F0)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-radial-gradient(circle, #FFFFFF, #F0F0F0); 			/* Safari 5.1+, Chrome 10+ */
	background: -moz-radial-gradient(circle, #FFFFFF, #F0F0F0); 			 	/* Firefox 3.6+ */ 
	background: -ms-radial-gradient(circle, #FFFFFF, #F0F0F0); 				/* IE 10 */ 			
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #FFFFFF, #F0F0F0); /* Opera 12 */	
}
.ReadImagesBox-black {
	background-color:#000000;				
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#969696), to(#2F2727)); /* Safari 4-5, Chrome 1-9 */
	background: -webkit-radial-gradient(circle, #969696, BLACK); 			/* Safari 5.1+, Chrome 10+ */
	background: -moz-radial-gradient(circle, #969696, BLACK); 			 	/* Firefox 3.6+ */ 
	background: -ms-radial-gradient(circle, #969696, BLACK); 				/* IE 10 */ 			
	background-image: -o-radial-gradient(50% 50%, 70% 70%, #969696, BLACK); /* Opera 12 */
}
/* ***************************************************
	ReadImagesBox - END
*************************************************** */


/* ***************************************************
	ReadImagesFrame - START	
	Margin 	6
	Border 10
	Padding 2
	----------------
	TOTAL PX 18 + 18 
	
	Shadow 10
	Radius  8
*************************************************** */
.ReadImagesFrame-none{
	margin:18px;
	padding:0px;
	background-color:transparent;
	-moz-border-radius:8px 8px 8px 8px;
	-khtml-border-radius:8px 8px 8px 8px;
	-webkit-border-radius:8px 8px 8px 8px;
	border-radius:8px 8px 8px 8px;	
}

.ReadImagesFrame {
	margin:6px;	
	background:#fff;
	padding:2px;

	/* padding box */
	-moz-background-clip:padding;-webkit-background-clip:padding;-o-background-clip:padding-box;-ms-background-clip:padding-box;-khtml-background-clip:padding-box;background-clip:padding-box;

	/* Border linkedin - START */
	-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;-o-border-top-left-radius:4px;-ms-border-top-left-radius:4px;-khtml-border-top-left-radius:4px;border-top-left-radius:4px;
	-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px;-o-border-top-right-radius:4px;-ms-border-top-right-radius:4px;-khtml-border-top-right-radius:4px;border-top-right-radius:4px;
	-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;-o-border-bottom-right-radius:4px;-ms-border-bottom-right-radius:4px;-khtml-border-bottom-right-radius:4px;border-bottom-right-radius:4px;
	-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;-o-border-bottom-left-radius:4px;-ms-border-bottom-left-radius:4px;-khtml-border-bottom-left-radius:4px;border-bottom-left-radius:4px;
	/* Border linkedin - END */

	/* shadow */
	-moz-box-shadow:0 0 10px #303030;-webkit-box-shadow:0 0 10px #303030;-o-box-shadow:0 0 10px #303030;box-shadow:0 0 10px #303030;
}


.ReadImagesFrame:hover  {
	/* Shadow */
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);	
		
	/* transiction */
	-webkit-transition : all 0.3s ease-in-out;
	-moz-transition : all 0.3s ease-in-out;
	-ms-transition : all 0.3s ease-in-out;
	-o-transition : all 0.3s ease-in-out;
	transition : all 0.3s ease-in-out;

}

.ReadImagesFrame-transparent {	
	border:10px solid #303030;
	border:10px solid rgba(0,0,0,0.65);
}

.ReadImagesFrame-transparent:hover {				
}

.ReadImagesFrame-white {	
	background-color:#222222;	
	border:10px solid #fafafa;
	/*border:10px solid rgba(255,255,255,0.65);*/
}

.ReadImagesFrame-black {	
	background-color:#fafafa;
	border:10px solid #000000;
	/*border:10px solid rgba(255,255,255,0.65);*/
}
/* ***************************************************
	ReadImagesFrame - END
*************************************************** */



/* ***************************************************
	ReadImagesThumbs - START
*************************************************** */
 .ReadImagesThumbs-white,
 .ReadImagesThumbs-black,
 .ReadImagesThumbs-pink
 {
 border: solid 1px #c0c0c0; 
 }

 .ReadImagesThumbs-white {background-color:#fafafa;}
 .ReadImagesThumbs-white:hover {	background: #FCFAE5 !important;}
 
 .ReadImagesThumbs-black {background-color:#000000;}
 .ReadImagesThumbs-black:hover {	background-color:#111111;}
 
 .ReadImagesThumbs-pink {background-color:#f0e5db;}
 .ReadImagesThumbs-pink:hover {	background-color:#e7d6c7;}
 
 .ReadImagesThumbs-transparent {background-color:rgba(0, 0, 0, 0.5);}
 .ReadImagesThumbs-transparent:hover {background-color:rgba(0, 0, 0, 0.8);}
 
 
 
 
 .ReadImagesThumbs {	
	
	margin: 0 auto;
	padding:6px;
	display: block;
	
	-moz-border-radius:5px 5px 5px 5px;
	-khtml-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
}

.ReadImagesThumbs:hover  {	
	
	/* Shadow */
	box-shadow:0px 0px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0px 0px 12px rgba(0, 0, 0, 0.5);	

	/* Transiction */
	-webkit-transition : all 0.3s ease-in-out;
	-moz-transition : all 0.3s ease-in-out;
	-ms-transition : all 0.3s ease-in-out;
	-o-transition : all 0.3s ease-in-out;
	transition : all 0.3s ease-in-out;
	
	/* zoom */
	-moz-transform: scale(1.04);
	-webkit-transform: scale(1.04);
	-o-transform: scale(1.04);
	-ms-transform: scale(1.04);
}


.ReadImagesThumbs-round12 {
background-color:rgba(0, 0, 0, 0);
	-moz-border-radius: 12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}
.ReadImagesThumbs-round {
background-color:rgba(0, 0, 0, 0);
	-moz-border-radius: 50%;
	-khtml-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 1px solid #transparent	/*
	box-shadow: 0px -4px 12px #666;
	*/
}
.ReadImagesThumbs-round25 {
background-color:rgba(0, 0, 0, 0);
	-moz-border-radius: 0 25%;
	-khtml-border-radius: 0 25%;
	-webkit-border-radius: 0 25%;
	border-radius: 0 25%;
	border: 1px solid #transparent	/*
	box-shadow: 0px -4px 12px #666;
	*/
}
.ReadImagesThumbs-round50 {
background-color:rgba(0, 0, 0, 0);
	-moz-border-radius: 0 50%;
	-khtml-border-radius: 0 50%;
	-webkit-border-radius: 0 50%;
	border-radius: 0 50%;
	border: 1px solid #transparent	/*
	box-shadow: 0px -4px 12px #666;
	*/
}
.ReadImagesThumbs-round:hover, 
.ReadImagesThumbs-round12:hover 
{
background-color:rgba(0, 0, 0, 0);
}

/* ***************************************************
	ReadImagesThumbs - END
*************************************************** */
.readimages {
	list-style: none; 
	padding: 10px;
	margin: 0;
 }
.readimages:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.readimages  li div {
	margin: 6px;
}

.readimages figure{
	/*
	padding-top: 0px !important; 
	padding-right: 0px !important; 
	padding-bottom: 0px !important; 
	padding-left: 0px !important; 
	margin: 8px auto;
	height:110%;
	*/
}

.readimages li div {
	/*
	hack, maybe a bug - disabled on 28 dec 2014
	padding-right: 14px !important; 
	*/
}
.readimages figure{
	float:left;
}

.readimages li { 
	float: left; 
	background:none !important;
	width: 33.33333333%; /* will be overwrite from the class */
	padding-top: 0px !important; 
	padding-right: 0px !important;  
	padding-bottom: 0px !important; 
	padding-left: 0px !important; 
	margin:0px !important; 
}
.readimages li img,
.readimages figure img { 
	display: block; 
	width: 100%; 
	height: auto;
	box-sizing: border-box; /* 2014-12-27  */
}

div.ReadImagesTitle,
figcaption.ReadImagesTitle{
padding: 0 6px;
font-size: smaller;
text-align: center;
min-height:32px;
}

/* fix a flirk problem - all links were moving right during the scrilling 
http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
*/
body{
-webkit-backface-visibility: hidden;
}