/*=========================================
      THEMING OF THE HOME COMPONENTS
/* =========================================

    1 - Top Slider Asset
    2 - BUTTONS
    3 - TYPE
    4 - PAGINATION
    5 - UTILITIES
    6 - FORMS
    7 - CODE
    8 - NAV
    9 - CARD
    10 - DROPDOWNS
=========================================
=========================================*/

/*
*
* ======================================================================
* Single Post Details Asset
* ======================================================================
*
*/
.myposter{overflow: hidden;float: left;width: 316px;margin-right: 30px;}
.mydetail{width: 70%;overflow: hidden;float: left;min-height: 100px;}
	
.details {position: relative;clear: both;margin: 0 auto;padding:10px 45px;list-style: none;text-align: center;overflow: hidden;
}

/* Common style */
.myposter figure {position: relative;float: left;overflow: hidden;width: 100%;background: #3085a3;text-align: center;cursor: pointer;border: 1px solid #fff;
    border-radius: 7px;
}

.myposter figure img {position: relative;display: block;min-height: 100%;max-width: 100%;opacity: 0.8;
}
.myposter figure figcaption, .myposter figure figcaption > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.myposter figure figcaption > a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;
}
/*---------------*/
/***** Effects Start *****/
/*---------------*/

.myposter figure.effect-julia img {max-width: none;height: 500px;-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;
}

.myposter figure.effect-julia p {width: 100%;display: inline-block;margin: 0 0 0.25em;padding: 0.4em 1em;background: rgba(255,255,255,0.9);color: #2f3238;text-transform: none;font-weight: 500;font-size: 75%;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-360px,0,0);transform: translate3d(-360px,0,0);
}
.myposter figure.effect-julia:hover img {opacity: 0.4;-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);
}

/*
=============================
Circle Effect
===============================
*/
figure.effect-julia .mycircle{background:none;border-radius: 50px;margin: 20px 22%;text-align: center;padding: 23% 0;font-size: 16px;font-weight: bold;color:#EDA72B;}
.mycircle:before, .mycircle:after{opacity:0;box-sizing:border-box;content:"\0020";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100px;border:5px solid #fff;box-shadow:0 0 50px #fff, inset 0 0 50px #fff}
.mycircle:after{z-index:1;-webkit-animation:gogoloader 2s infinite 1s;-moz-animation:gogoloader 2s infinite 1s;-o-animation:gogoloader 2s infinite 1s;animation:gogoloader 2s infinite 1s}
.mycircle:before{z-index:2;-webkit-animation:gogoloader 2s infinite;-moz-animation:gogoloader 2s infinite;-o-animation:gogoloader 2s infinite;animation:gogoloader 2s infinite}
@-webkit-keyframes gogoloader{0%{-webkit-transform:scale(0);opacity:0}50%{opacity:1}100%{-webkit-transform:scale(1);opacity:0}}


.m-detail{padding:5px;font-size:16px;text-align:left;color:#FFF;overflow:hidden;}
.m-detbac{background-color:#2d4355;}
.m-text{width:150px;margin-right:20px;color:darkturquoise;font-weight:600;float:left;line-height: 30px;}
.mobtitle{display: block;padding: 5px 0px;box-shadow: 0 1px 5px -2px rgba(0,0,0,1);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color:#ffffff;border-bottom: 2px #0C68A9 solid;}
.m-story{color:#f1f1f1;font-size:18px;font-weight:bold;}
a.m-tag{width:11.8%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-decoration:none;color:#cdcdcd;font-size:10px;float:left;padding:7px 10px;margin:5px;border-radius:5px;box-shadow:0 1px 5px -2px rgba(0,0,0,1);}
a.m-tag:hover{background:#ff3d2e;color:#FFF;}
.m-qc{margin-bottom: 10px;width: auto;}

.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* Paragraph Text Format */
.mhistry{margin: 10px auto;padding: 0 50px;color: wheat;text-align: left;}