/*
┌─┐┌─┐┬  ┬┬  ┬┬┌─┌─┐ ┌─┐┌─┐┌┬┐
├─┘├─┤└┐┌┘│  │├┴┐└─┐ │  │ ││││
┴  ┴ ┴ └┘ ┴─┘┴┴ ┴└─┘o└─┘└─┘┴ ┴
==============================
@project:Pavliks.com - Inteactive Text Box.
@description: Custom Styles
@developer: Kasun Peiris.
@version: 1.0.
@date:2015/11/25.

*/
.ITextBox{padding:3% 0}.ITextBox .ITextBox-image img{width:300px;height:200px}.ITextBox .ITextBox-heading{width:100%;font-weight:800}.ITextBox .ITextBox-content{width:100%;min-height:50px}.ITextBox .ITextBox-link{margin:20px 0}.ITextBox .ITextBox-link a{cursor:pointer;border:2px solid transparent;margin:5px;font-size:12px;padding:8px 6px;background:#1591b7;text-transform:uppercase;color:#fff;border-radius:4px}.ITextBox .ITextBox-link a:focus,.ITextBox .ITextBox-link a:hover{border:2px solid #1591b7;color:#1591b7;background:#fff}
/*
Design 1 
--------
*/
.ITextBox.Design_1 .ITextBox-image{display:inline-block;width:29.5%;float:left;position:relative}.ITextBox.Design_1 .content{display:inline-block;width:69.5%;float:right}.ITextBox.Design_1 .ITextBox-image .caption{color:#000;font-weight:700}.ITextBox.Design_1 .ITextBox-image-caption{background:#000;background:rgba(255,255,255,.8);text-align:left;padding:10px 0 5px 15px;position:absolute;bottom:0;left:0;right:0;margin-bottom:15px;transition:.5s all ease;opacity:0}.ITextBox.Design_1:focus .ITextBox-image-caption,.ITextBox.Design_1:hover .ITextBox-image-caption{opacity:1;transition:.5s all ease}.ITextBox.Design_1 .ITextBox-image{transition:.5s all ease;overflow:hidden;text-align:center}.ITextBox.Design_1 .ITextBox-image img{transition:1s all ease}.ITextBox.Design_1:focus .ITextBox-image img,.ITextBox.Design_1:hover .ITextBox-image img{transform:scale(1.2,1.2);transition:1s all ease}
/*
Design 2
--------
*/
.ITextBox.Design_2{padding:5%}.ITextBox.Design_2 .ITextBox-image,.ITextBox.Design_2 .content{width:100%;text-align:center}.ITextBox.Design_2 .ITextBox-image img{min-width:80%;margin:0 auto}.ITextBox.Design_2 .ITextBox-image{position:relative;transition:.5s all ease;overflow:hidden}.ITextBox.Design_2 .ITextBox-image .caption{color:#000;font-weight:700}.ITextBox.Design_2 .ITextBox-image-caption{background:#000;background:rgba(255,255,255,.8);text-align:left;padding:10px 0 5px 15px;position:absolute;bottom:0;left:0;right:0;margin-bottom:15px;transition:.5s all ease;opacity:0}.ITextBox.Design_2:focus .ITextBox-image-caption,.ITextBox.Design_2:hover .ITextBox-image-caption{opacity:1;transition:.5s all ease}.ITextBox.Design_2 .ITextBox-image img{transition:1s all ease}.ITextBox.Design_2:focus .ITextBox-image img,.ITextBox.Design_2:hover .ITextBox-image img{transform:scale(1.3,1.3);transition:1s all ease}.ITextBox.Design_2{transition:.5s all ease;-webkit-box-shadow:0 2px 2px rgba(34,25,25,0);-moz-box-shadow:0 2px 2px rgba(34,25,25,0);-ms-box-shadow:0 2px 2px rgba(34,25,25,0);box-shadow:0 2px 2px rgba(34,25,25,0);min-height:450px;margin:20px 0}.ITextBox.Design_2:focus,.ITextBox.Design_2:hover{transition:.5s all ease;-webkit-box-shadow:0 2px 2px rgba(34,25,25,.4);-moz-box-shadow:0 2px 2px rgba(34,25,25,.4);-ms-box-shadow:0 2px 2px rgba(34,25,25,.4);box-shadow:0 2px 2px rgba(34,25,25,.4)}


/*
Interactive Media Queries
-------------------------
*/

@media all and (max-width:1024px){.ITextBox.Design_1 .ITextBox-image{width:39.5%}.ITextBox.Design_1 .content{width:59.5%}}@media all and (max-width:768px){.ITextBox .ITextBox-image img{min-width:auto}.ITextBox.Design_1 .ITextBox-image,.ITextBox.Design_1 .content{width:100%;text-align:center}}