/* RESET
______________________________________ */
/* http://meyerweb.com/eric/tools/css/reset/ 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { margin:0; padding:0; border:0; outline:0; font-size:100%; font:inherit; vertical-align:baseline; }
/* HTML5 display-role reset for older browsers 
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
table{ border-collapse:collapse; border-spacing:0; }*/


/* BODY DEFAULTS
______________________________________ 
html { height: 100%; font-family: 'Open Sans', sans-serif; font-size: 62.5%; }
body { width: 100%; background: #eaeafa; background-image: url('../imgs/backpattern1.jpg'); color: #747474; font-size: 1.3em; font-weight: 400; }
p, blockquote { font-size: 1em; line-height: 1.6; padding: 0 0 15px 0; }

a { color: #0090EC; text-decoration: none; font-weight: 700; }
a:hover { color: #474747; text-decoration: none; 
-webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; }

/* HEADINGS
______________________________________ 
h2 { font-size: 1.5em; margin: 0 0 5px 0; line-height: 1.3; font-weight: 300; color: #1f1f1f; }


/* MAIN WRAPPER
______________________________________ 
#wrapperbox { position: relative; margin: 20px auto; width: 1220px; padding: 0;
background: white; border-top: 7px solid #2dab8b; box-shadow: 0 0 10px rgba(87,87,87,0.2);   }
.wrapper { padding: 0 28px; }
*/


/*
aside, footer, figure, header,
section, img, object, embed {
    display: block;
}
section {
  margin-bottom: 2em;
}
.clear:before,
.clear:after {
  content: "\0020";
  display: block;
  height: 0;
  visibility: hidden;
}
.clear:before,
.clear:after {
  clear: both;
}
*/
.quote-wrapper {
  margin: 0 10px 20px;
  padding: 0px;
  min-height:150px;
  /*
  border:1px solid;
  color: #888;
  background: #743117;
  background: rgba(245,245,245,1);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(245,245,245,0.15);
  */
}
.quote-wrapper:after { content: ""; width: 0; height: 10px; display: block; border-style: solid; border-width: 15px 15px 0 0;}

.quote-item {
  margin: 0px 0px 20px 0;
  padding: 0;
  color: #888;
  background: #f5f5f5;
  background: rgba(245,245,245,1);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(245,245,245,0.15);
}
.quote-item h1 {
  float: left;
  margin-right: 15px;
}
.quote-item p { height: auto; padding:20px; margin: 5px 0 25px 0; position: relative; }
/*.quote-item p:after { content: ""; width: 0; height: 0; display: block; border-style: solid; border-width: 15px 15px 0 0;
border-color: #f5f5f5 transparent transparent transparent; position: absolute;  bottom: 0; left: 90px; }*/
.quote-item div.author:after { content: ""; width: 0; height: 0; display: block; border-style: solid; border-width: 15px 15px 0 0;
border-color: #f5f5f5 transparent transparent transparent; position: absolute; top:-23px; left: 90px; }

.quote-item div.author {  position: relative; top: 45px; left: 0px; }
.quote-item div.author img { width: 60px; height: auto; position: absolute; bottom: 0; }
.quote-item div.author .name {  position: relative; bottom: 0; top:/*-0.22em*/; left: 60px; background: #8DC73F; color: white; padding: 6px 10px 5px; /*min-width: 235px;*/ font-size: 12px; }



@-webkit-keyframes showsup {
  from { opacity: 0; -webkit-transform: translate(0, -20px); }
  to   { opacity: 1; -webkit-transform: translate(0, 0); }
}
@-moz-keyframes showsup {
  from { opacity: 0; -moz-transform: translate(0, -20px); }
  to   { opacity: 1; -moz-transform: translate(0, 0); }
}
@-o-keyframes showsup {
  from { opacity: 0; -o-transform: translate(0, -20px); }
  to   { opacity: 1; -o-transform: translate(0, 0); }
}
@keyframes showsup {
  from { opacity: 0; transform: translate(0, -20px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/*
.test-grid-b .quote-item.added {
  -webkit-animation: showsup 0.5s;
  -moz-animation: showsup 0.5s;
  -o-animation: showsup 0.5s;
  animation: showsup 0.5s;
}
*/
.test-grid .column {  float: left;}

.test-grid .one-half {width: 50%; border-right:0px solid #fff; border-left:0px solid #FFFFFF; /* Border 0 because same class used for others pages*/}
.test-grid .one-third { width: 33.333%; margin-left:0px;}
.one-quarter {  width: 25%;}
.hide { display: none;}

/* Grids */
.test-grid,
.test-grid-b {
  margin: 0 -10px;
}

[data-columns]:before {
  display: none;
}

.test-grid[data-columns]:before {
  content: '4 .column.one-third';
}
/*
.test-grid-b[data-columns]:before {
  content: '3 .column.one-half';
}
*/
@media screen and (min-width: 320px) and (max-width:479px) {
	.test-grid[data-columns]:before {
		content: '1 .column.one-half';
	}
	.quote-item div.author:after { display:none; }
}

@media screen and (max-width: 480px){
  .test-grid[data-columns]:before,
  .test-grid-b[data-columns]:before {
    content: '1';
  }
}

@media screen and (min-width: 481px) and (max-width:819px) {
  .test-grid[data-columns]:before {
    content: '2 .column.one-half';
  }
}
/*
@media screen and (max-width: 640px){
.quote-item div.author .name{ width: 72%; display:block;}
}
*/
@media screen and (min-width: 820px) and (max-width: 1299px) {
  .test-grid[data-columns]:before {
    content: '3 .column.one-third';
  }
}
@media screen and (min-width: 1300px){
  .test-grid[data-columns]:before {
    /* content: '4 .column.one-quarter';*/ /* FOUR COLUMN */
    content: '2 .column.one-half';
  }
}
/*
@media screen and (min-width: 481px) and (max-width: 1099px) {
  .test-grid-b[data-columns]:before {
    content: '2 .column.one-half';
  }
}
@media screen and (min-width: 1100px) {
  .test-grid-b[data-columns]:before {
    content: '3 .column.one-third';
  }
}
*/