/*--------------------------------------------------------------

# Copyright (C) joomla-monster.com

# License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License

# Website: http://www.joomla-monster.com

# Support: info@joomla-monster.com

---------------------------------------------------------------*/



/*********************** FOR CUSTOM EDITOR SELECTOR ************************/



.border_img {

	background: #ffffff;

	border: 1px solid #e3e3e3;

	padding: 5px;

	border-radius: 5px;

	-webkit-border-radius: 5px;

}



.web-font {

	font-size: 2em;

}



.webfont .web-font {

	font-size: 3.4em;

	line-height: 1.2em;

}



a.readon:link, 

a.readon:visited {}



p.blue {

    border-left: 3px solid #009bda;

    padding: 0 0 0 10px;

}



p.green {

    border-left: 3px solid #75a500;

    padding: 0 0 0 10px;

}



p.red {

    border-left: 3px solid #d40000;

    padding: 0 0 0 10px;

}



p.yellow {

    border-left: 3px solid #ffa200;

    padding: 0 0 0 10px;

}



p.grey {

    border-left: 3px solid #bdbdbd;

    padding: 0 0 0 10px;

}



p.bluefill {

    background: #009bda;

    display: block;

    padding: 10px;

    text-align: justify;

    color: #fff;

	text-shadow: none;

}



p.greenfill {

    background: #75a500;

    display: block;

    padding: 10px;

    text-align: justify;

    color: #fff;

	text-shadow: none;

}



p.redfill {

    background: #d40000;

    display: block;

    padding: 10px;

    text-align: justify;

    color: #fff;

	text-shadow: none;

}



p.yellowfill {

    background: #ffa200;

    display: block;

    padding: 10px;

    text-align: justify;

    color: #fff;

	text-shadow: none;

}



p.greyfill {

    background: #bdbdbd;

    display: block;

    padding: 10px;

    text-align: justify;

    color: #fff;

	text-shadow: none;

}



.quote {

	display: block;

	font-style: italic;

	padding: 10px 10px 10px 70px;

	background: url(../images/quote.png) no-repeat 0 top;

}



p.quote-left {

	display: block;

	position: relative;

	margin: 10px 0 0 10px;

	padding: 20px;

	background: #f4f4f4;

	border: 1px solid #e5e5e5;

	border-radius: 10px;

	-webkit-border-radius: 10px;

}



p.quote-left:before {

	content: '';

    position: absolute;

    left: -11px;

    top: 14px;

    width: 0;

    height: 0;

    border-top: 11px dashed transparent;

    border-bottom: 11px dashed transparent;

    border-right: 11px solid #e5e5e5;

}



p.quote-left:after {

	content: '';

    position: absolute;

    left: -10px;

    top: 15px;

    width: 0;

    height: 0;

    border-top: 10px dashed transparent;

    border-bottom: 10px dashed transparent;

    border-right: 10px solid #f4f4f4;

}



p.quote-right {

	display: block;

	position: relative;

	margin: 10px 10px 0 0;

	padding: 20px;

	background: #f4f4f4;

	border: 1px solid #e5e5e5;

	border-radius: 10px;

	-webkit-border-radius: 10px;

}



p.quote-right:before {

	content: '';

    position: absolute;

    right: -11px;

    top: 14px;

    width: 0;

    height: 0;

    border-top: 11px dashed transparent;

    border-bottom: 11px dashed transparent;

    border-left: 11px solid #e5e5e5;

}



p.quote-right:after {

	content: '';

    position: absolute;

    right: -10px;

    top: 15px;

    width: 0;

    height: 0;

    border-top: 10px dashed transparent;

    border-bottom: 10px dashed transparent;

    border-left: 10px solid #f4f4f4;

}



ul.linked,

ul.linked ul,

ul.special,

ul.special ul {

	list-style: none;

}



ul.linked li {

    background: none;

    padding: 0;

    margin: 0;

}



ul.linked li a:hover {

    margin: 0 0 0 3px;

    padding: 0 0 0 15px;

    text-decoration: none;

}



ul.linked li a {

    display: block;

    margin: 0 0 0 3px;

    padding: 0 0 0 10px;

    text-decoration: underline;

	background-repeat: no-repeat;

	background-position: left 7px;

}



ul.special li {

    margin: 0 0 0 3px;

    padding: 0 0 0 10px;

	background-repeat: no-repeat;

	background-position: left 7px;

	background-image: url(../images/special.png);

}



/** image hover effects **/



.dj-image-hover {

	display: inline-block;

	width: 100%;

}



.view {

	display: inline-block;

	max-width: 100%;

	overflow: hidden;

	position: relative;

	text-align: center;

	cursor: default;



}



.view .mask,

.view .content {

	width: 100%;

	height: 100%;

	position: absolute;

	overflow: hidden;

	top: 0;

	left: 0;

}



.view img {

	display: inline-block;

	position: relative;

	border: 1px solid #e3e3e3;

	background: #ffffff;

	padding: 2%;

	border-radius: 5px;

	-webkit-border-radius: 5px;

	max-width: 94% !important;

}



.view h2 {

   color: #fff !important;

   text-align: center;

   position: relative;

   font-size: 1.4em !important;

   line-height: 1.2em !important;

   padding: 10px !important;

   background: rgba(0, 0, 0, 0.7);

   margin: 10px 0 0 0 !important;

}



.view h2 a:link,

.view h2 a:visited {

	color: #fff;

	border: none;

}



.view h2 a:hover {

	color: #cccccc;

}



.view p {

   font-family: "Times New Roman", Times, serif;

   font-style: italic;

   font-size: 1em;

   color: #3a3a3a;

   position: relative;

   padding: 10px;

   text-align: center;

}



.view a.readon:link,

.view a.readon:visited {

	float: none;

}



/** first effect **/



.view-first img {

   -webkit-transition: all 0.2s linear;

   -moz-transition: all 0.2s linear;

   -o-transition: all 0.2s linear;

   -ms-transition: all 0.2s linear;

   transition: all 0.2s linear;

}



.view-first .mask {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   background-color: rgba(255,255,255, 0.6);

   -webkit-transition: all 0.4s ease-in-out;

   -moz-transition: all 0.4s ease-in-out;

   -o-transition: all 0.4s ease-in-out;

   -ms-transition: all 0.4s ease-in-out;

   transition: all 0.4s ease-in-out;

}



.view-first h2 {

   -webkit-transform: translateY(-100px);

   -moz-transform: translateY(-100px);

   -o-transform: translateY(-100px);

   -ms-transform: translateY(-100px);

   transform: translateY(-100px);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   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;

   -ms-transition: all 0.2s ease-in-out;

   transition: all 0.2s ease-in-out;

}



.view-first p {

   -webkit-transform: translateY(100px);

   -moz-transform: translateY(100px);

   -o-transform: translateY(100px);

   -ms-transform: translateY(100px);

   transform: translateY(100px);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   -webkit-transition: all 0.2s linear;

   -moz-transition: all 0.2s linear;

   -o-transition: all 0.2s linear;

   -ms-transition: all 0.2s linear;

   transition: all 0.2s linear;

}



.view-first:hover img {

   -webkit-transform: scale(1.1,1.1);

   -moz-transform: scale(1.1,1.1);

   -o-transform: scale(1.1,1.1);

   -ms-transform: scale(1.1,1.1);

   transform: scale(1.1,1.1);

}



.view-first a.info {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   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;

   -ms-transition: all 0.2s ease-in-out;

   transition: all 0.2s ease-in-out;

}



.view-first:hover .mask {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

}



.view-first:hover h2,

.view-first:hover p,

.view-first:hover a.info {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transform: translateY(0px);

   -moz-transform: translateY(0px);

   -o-transform: translateY(0px);

   -ms-transform: translateY(0px);

   transform: translateY(0px);

}



.view-first:hover p {

   -webkit-transition-delay: 0.1s;

   -moz-transition-delay: 0.1s;

   -o-transition-delay: 0.1s;

   -ms-transition-delay: 0.1s;

   transition-delay: 0.1s;

}



.view-first:hover a.info {

   -webkit-transition-delay: 0.2s;

   -moz-transition-delay: 0.2s;

   -o-transition-delay: 0.2s;

   -ms-transition-delay: 0.2s;

   transition-delay: 0.2s;

}



/** second effect **/



.view-second img {

   -webkit-transition: all 0.5s ease-out;

   -moz-transition: all 0.5s ease-out;

   -o-transition: all 0.5s ease-out;

   -ms-transition: all 0.5s ease-out;

   transition: all 0.5s ease-out;

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

}



.view-second .mask {

   background-color: #dcdcdc;

   -webkit-transform: rotate(0deg) scale(1);

   -moz-transform: rotate(0deg) scale(1);

   -o-transform: rotate(0deg) scale(1);

   -ms-transform: rotate(0deg) scale(1);

   transform: rotate(0deg) scale(1);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

   -webkit-transition: all 0.3s ease-out;

   -moz-transition: all 0.3s ease-out;

   -o-transition: all 0.3s ease-out;

   -ms-transition: all 0.3s ease-out;

   transition: all 0.3s ease-out;

}



.view-second h2 {

   -webkit-transform: translateY(-200px);

   -moz-transform: translateY(-200px);

   -o-transform: translateY(-200px);

   -ms-transform: translateY(-200px);

   transform: translateY(-200px);

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

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

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

   -ms-transition: all 0.2s ease-in-out;

   transition: all 0.2s ease-in-out;

}



.view-second p {

   -webkit-transform: translateY(-200px);

   -moz-transform: translateY(-200px);

   -o-transform: translateY(-200px);

   -ms-transform: translateY(-200px);

   transform: translateY(-200px);

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

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

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

   -ms-transition: all 0.2s ease-in-out;

   transition: all 0.2s ease-in-out;

}



.view-second a.info {

   -webkit-transform: translateY(-200px);

   -moz-transform: translateY(-200px);

   -o-transform: translateY(-200px);

   -ms-transform: translateY(-200px);

   transform: translateY(-200px);

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

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

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

   -ms-transition: all 0.2s ease-in-out;

   transition: all 0.2s ease-in-out;

}



.view-second:hover img {

   -webkit-transform: rotate(720deg) scale(0);

   -moz-transform: rotate(720deg) scale(0);

   -o-transform: rotate(720deg) scale(0);

   -ms-transform: rotate(720deg) scale(0);

   transform: rotate(720deg) scale(0);

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

   filter: alpha(opacity=0);

   opacity: 0;

}



.view-second:hover .mask {

   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

   filter: alpha(opacity=100);

   opacity: 1;

   -webkit-transform: translateY(0px) rotate(0deg);

   -moz-transform: translateY(0px) rotate(0deg);

   -o-transform: translateY(0px) rotate(0deg);

   -ms-transform: translateY(0px) rotate(0deg);

   transform: translateY(0px) rotate(0deg);

   -webkit-transition-delay: 0.4s;

   -moz-transition-delay: 0.4s;

   -o-transition-delay: 0.4s;

   -ms-transition-delay: 0.4s;

   transition-delay: 0.4s;

}



.view-second:hover h2 {

   -webkit-transform: translateY(0px);

   -moz-transform: translateY(0px);

   -o-transform: translateY(0px);

   -ms-transform: translateY(0px);

   transform: translateY(0px);

   -webkit-transition-delay: 0.7s;

   -moz-transition-delay: 0.7s;

   -o-transition-delay: 0.7s;

   -ms-transition-delay: 0.7s;

   transition-delay: 0.7s;

}



.view-second:hover p {

   -webkit-transform: translateY(0px);

   -moz-transform: translateY(0px);

   -o-transform: translateY(0px);

   -ms-transform: translateY(0px);

   transform: translateY(0px);

   -webkit-transition-delay: 0.6s;

   -moz-transition-delay: 0.6s;

   -o-transition-delay: 0.6s;

   -ms-transition-delay: 0.6s;

   transition-delay: 0.6s;

}



.view-second:hover a.info {

   -webkit-transform: translateY(0px);

   -moz-transform: translateY(0px);

   -o-transform: translateY(0px);

   -ms-transform: translateY(0px);

   transform: translateY(0px);

   -webkit-transition-delay: 0.5s;

   -moz-transition-delay: 0.5s;

   -o-transition-delay: 0.5s;

   -ms-transition-delay: 0.5s;

   transition-delay: 0.5s;

}