/**
ontheway coming soon HTML5 creative Template
Copyright (c) 2014, Subramanian
Author: Subramanian
Profile: themeforest.net/user/FMedia/
Version: 1.0.0
Release Date: December 2014
**/
/*------------------------------------------------------------------
Table of contents
#clock - Fallback Clock styles are placed here
#Portfolio - Portfolio style are placed here
#Portfolio thumbnail filter effect - Portfolio thumbnail filter effect styles are placed here
#Custom Keyframes Animation - Custom Keyframes Animation styles are placed here
#Portfolio thumbnail items - Portfolio thumbnail styles are placed here
#portfolio image overlay - Portfolio thumbnail image overlay styles are placed here
#portfolio category Filter - options - Portfolio category filter styles are placed here
#portfolio category name animation - Portfolio category filter text animation styles are placed here
#Diamond shape mask image - Add Diamond shape mask image
#portfolio navigation - Portfolio detail content navigation (Next, previous, close and item number)
#Client logo align - Clients logo image styles are placed here
#Pricing Table - Pricing table styles are placed here
#Services Circular icons - Services circular icons styles are placed here
#Image/Thumbnail popup overlay icons - Image, thumbnail popup overlay style and animation are placed here
*/
/* #clock */
.countdown_timer {
position: absolute;
z-index: 110;
width: 550px;
top: 180px;
right: 60px;
text-align: right;
padding:10px 0px 10px 0px;
opacity: .25;
font-style: italic;
}
@media screen and (max-width: 1200px) and (min-width: 992px){
.countdown_timer { top: 120px; }
}
@media only screen and (max-width: 991px) {
.countdown_timer {
position: relative;
text-align: left;
width: 100%;
height: 120px;
top: 0px;
right: 0px;
padding-left: 10px;
padding-top: 20px;
opacity: 1;
}
.countdown_timer .font_medium{ font-size:14px; }
.countdown_timer .font_small { padding-right: 10px; }
.counter_time h4{ padding:0px; line-height:1; margin: 0px; }
}
.centerPosition { margin:0px; }
.typingEffect_holder{ position:relative; display: block; white-space:nowrap; }
.typing_cursor {
width: 25px;
height: 4px;
position: absolute;
background-color: #000000;
z-index: 523;
margin-left: 5px;
margin-top: -5px;
top: 100%;
visibility: hidden;
}
.typing_text{
font-size: 32px;
font-weight: 700;
font-family: 'header_font', 'Trebuchet MS', sans-serif;
line-height: 1;
}
.typing_cursor {
-webkit-animation-name: blinker;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: .5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: .5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@media only screen and (min-width: 1151px) and (max-width: 1500px) {
.typing_text { font-size: 24px; padding-left: 20px; font-weight: 500;}
.typing_cursor { width: 18px; }
}
@media only screen and (min-width: 992px) and (max-width: 1150px) {
.typing_text { font-size: 22px; padding-left: 20px; font-weight: 400;}
.typing_cursor { width: 18px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.typing_text { font-size: 24px;}
.typing_cursor { width: 18px; }
.homePageContent .centerPosition hr{ padding: 0px 0px 20px !important;}
}
@media screen and (min-width: 571px) and (max-width: 767px) {
.typing_text { font-size: 24px; }
.typing_cursor { width: 18px; }
.homePageContent .centerPosition hr{ padding: 0px 0px 20px !important;}
}
@media screen and (min-width: 481px) and (max-width: 570px) {
.typing_text { font-size: 20px; }
.typing_cursor { width: 18px; }
.homePageContent .centerPosition hr{ padding: 0px 0px 20px !important;}
}
@media screen and (max-width: 480px){
.typing_text { font-size: 14px; }
.typing_cursor { width: 14px; }
.homePageContent .centerPosition hr{ padding: 0px 0px 20px !important;}
}
.hideElement{ display:none !important; }
.hideElementInMobile { display: block; }
@media only screen and (max-width: 991px) {
.centerPosition { margin-bottom: 20px; }
.hideElementInMobile { display: none; }
.typing_cursor { width: 15px; }
}
.rocket_land{
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
width: calc(100% - 390px);
width: -moz-calc(100% - 390px);
width: -webkit-calc(100% - 390px);
}
.rocket_holder {
width: 400px;
height: 100px;
position: relative;
float: right;
}
.rocket img {
position: absolute;
top: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.rocket_smoke{
position:absolute;
top:0px;
right:0px;
width:100%;
height:100%;
overflow:hidden;
}
.rocket_smoke img{
position:relative;
top:-120px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.rocketStartfly .rocket img {
top: -300px;
}
.rocketStartfly .rocket_smoke img{
top:0px;
}
@media only screen and (max-width: 991px) {
.rocket_holder {
width: 200px;
float: right;
}
.rocketStartfly .rocket img {
top: -100px;
}
.rocket_land {
height: 100px;
width: calc(100% - 200px);
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
}
}
/* #Portfolio
========================================================== */
.masonry_container{
overflow:hidden;
margin:0px;
padding:0px;
}
.masonry_items{
width:100%;
position:relative;
display:block;
}
.fullDetails {
height:0px;
width:0px;
overflow-y:hidden;
padding:0px 0px 0px 0px;
}
.fullDetails .container { margin: 0 auto; padding: 0; }
.detail_spacing { margin-right:20px; display:block }
.detail_btn{ cursor:pointer; }
.portfolioPage { overflow:hidden; }
/* images cover up the gap */
.item img {
-webkit-filter : grayscale(1);
}
.item.hover_enable:hover img{
-webkit-filter : grayscale(0);
}
.item.active img{
-webkit-filter : grayscale(0);
}
.removeImgGrayFilter .item img { -webkit-filter : none; }
.item.active .overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity : 0;
}
.item.active .overlay_img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity : 0;
}
.popup_center .inner_cont h4, .popup_center .inner_cont p{
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
/* #Portfolio thumbnail filter effect */
.catFilterEffect_1 .item.hideItem .overlay_img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: .9;
-khtml-opacity: .9;
opacity : .9;
}
.catFilterEffect_1 .hideItem img{
-webkit-filter : grayscale(1);
}
.catFilterEffect_1 .item.hideItem .text_field{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: .1;
-khtml-opacity: .1;
opacity : .1;
}
.catFilterEffect_2 .item.hideItem{
display:none !important;
}
.catFilterffect{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: bounceIn_2;
animation-name: bounceIn_2;
}
/* ---- isotope_content ---- */
/* stuff that isn't in the gutter */
.masonry_items {
margin-left: 0%;
margin-right: 0%;
}
.item { width: 33.333%; }
.masonry_items .grid-sizer { width: 0%; }
.masonry_items .gutter-sizer { width: 0%; }
.item {
display: block;
float: left;
margin-bottom: 15px;
padding:0px 15px 0px 0px;
}
.titleShowOnHover .item { overflow:hidden; }
.item img {
display: block;
height: auto;
width: 100%;
margin: 0 auto;
position:relative;
}
.column5 .item { width: 33.33%; }
@media screen and (min-width: 992px) and (max-width: 1499px) {
.item{ width: 33.33%; }
.masonry_items .grid-sizer { width: 0%; }
}
@media screen and (min-width: 1200px) and (max-width: 1499px) {
.item{ width: 25%; }
.column5 .item { width: 25%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.item{ width: 33.3%; }
.column5 .item { width: 33.3%; }
}
@media screen and (min-width: 479px) and (max-width: 991px) {
.item{ width: 50%; }
.column5 .item { width: 50%; }
.titleShowOnHover .item{ overflow: visible; }
.titleShowOnHover .imageText{
position:relative !important;
top:0px;
bottom:auto;
}
.titleShowOnHover .itemOver .popup_overlay .popup_center{
margin-top: -30px !important;
}
}
@media screen and (max-width: 480px) {
.item, .column5 .item { width: 100%; }
.masonry_items .gutter-sizer { width: 0%; }
.masonry_items { margin-left: 0px; }
.masonry_items .item .classicFrame{ margin-bottom:10px !important; }
.titleShowOnHover .item{ overflow: visible; }
.titleShowOnHover .imageText{
position:relative !important;
top:0px;
bottom:auto;
}
.titleShowOnHover .itemOver .popup_overlay .popup_center{
margin-top: -30px !important;
}
}
/* #Portfolio thumbnail items */
.masonry_container img {
position:relative;
cursor:pointer;
}
.item .text_field{
padding-top:0px;
text-align:center;
font-weight:700;
}
.item .text_field h5{
margin:0px;
padding: 14px 0px 5px 0px;
font-size: 14px;
font-weight: 600;
}
.item .text_field h6{
font-size: 12px;
line-height:12px;
margin-top:0px;
padding-top:0px;
}
a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
position:relative;
margin-top:50px;
text-transform: uppercase;
visibility:hidden;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.porImgOver{
position:relative;
height:auto;
}
.porImgOver figure { margin-bottom:0px; }
.overlay_img{
left: 0px;
top: 0px;
position: absolute;
display:block;
width: 100%;
height: 100%;
z-index:10;
-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;
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-moz-opacity: .4;
-khtml-opacity: .4;
opacity : .4;
}
.item.hover_enable:hover .overlay_img{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity : 0;
webkit-transition: all 0.4s ease-out-in;
-moz-transition: all 0.4s ease-out-in;
-o-transition: all 0.4s ease-out-in;
-ms-transition: all 0.4s ease-out-in;
transition: all 0.4s ease-out-in;
}
.img_place { position:relative; display:block; line-height:0px; }
.thumbnail.img_place { margin:0px 2px 0px 0px }
.img_place:hover .overlay.social{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity : 1;
}
.img_place:hover .overlay.social .social_bookmarks{ top:70px; }
.img_place:hover .overlay.social .font_awesome{ top:70px; }
.porImgOver{
overflow:hidden;
}
.detail_btn .porImgOver img{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.detail_btn.addHover .porImgOver img{
-webkit-transition: all 3s ;
-moz-transition: all 3s;
-o-transition: all 3s ;
-ms-transition: all 3s;
transition: all 3s;
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
transform: scale(1.25);
}
/* #portfolio image overlay */
.overlay.content {
display: block;
height:0%;
zoom: 1;
}
.item.hover_enable:hover .overlay .imageText{ bottom:0%; }
.item.hover_enable:hover:hover .imageText .overlay.content{ height:102%; top:0px; }
.item.hover_enable .imageText .overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity : 1;
}
.imageText{
position:relative;
display:block;
z-index: 20;
}
.imageText .overlay.content{
height:0%;
overflow:hidden;
}
.imageText, .imageText .overlay{
width:100%;
bottom:1px;
left:0px;
position: relative;
-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;
}
.imageText .overlay{ z-index:2563; }
.imageText .pad { padding:10px; display:block; }
.overlay .navs{
width:100%;
height:100%;
left:0px;
position:absolute;
}
.overlay .navs .pad { padding:10px; display:block; }
.overlay .navs .font_awesome_2x{ top:auto !important; bottom:-60px !important; }
.overlay .navs .font_awesome_2x.alignRight li i:after{
content:"";
position:absolute;
left:-18px;
top:-11px;
width:45px;
height:45px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.overlay .navs .font_awesome, .overlay .navs .font_awesome_2x{
-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;
top:-60px;
}
.linkText{
width: 50%;
height:100%;
font-weight: 700;
padding: 40px 15px 5px 15px;
display:block;
position:relative;
text-align:center;
text-transform:uppercase;
font-size:14px;
-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;
}
.infoText{ padding:20px; width:50%; text-align:center; cursor:pointer; }
.infoText li i.detail_icon{ font-size:1.5em; left:0px; top:1px; }
.infoText:hover .fxEmbossBtn .btn_hover{
width:88%;
width:calc(100% - 4px);
width:-moz-calc(100% - 4px);
width:-webkit-calc(100% - 4px);
height:88%;
height:calc(100% - 4px);
height:-moz-calc(100% - 4px);
height:-webkit-calc(100% - 4px);
top:2px;
left:2px;
}
.retinaDevice .infoText:hover .fxEmbossBtn .btn_hover{
width:90%;
height:90%;
top:7%;
left:7%;
}
.item.hover_enable .text_field{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity : 1;
}
.item.hover_enable:hover .overlay .navs .font_awesome{
top:0px;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
-ms-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-delay: .25s;
-moz-transition-delay: .25s;
-o-transition-delay: .25s;
-ms-transition-delay: .25s;
transition-delay: .25s;
}
.item.hover_enable:hover .overlay .navs .font_awesome_2x{
top:auto !important;
bottom:0px !important;
-webkit-transition-property: bottom;
-moz-transition-property: bottom;
-o-transition-property: bottom;
-ms-transition-property: bottom;
transition-property: bottom;
-webkit-transition-duration: .3s;
-moz-transition-duration: .3s;
-o-transition-duration: .3s;
-ms-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-delay: .2s;
-moz-transition-delay: .2s;
-o-transition-delay: .2s;
-ms-transition-delay: .2s;
transition-delay: .2s;
}
.view { text-align: center; cursor: default; }
.view .mask {
position: absolute;
height:100%;
width:100%;
top: 0;
left: 0;
overflow: hidden;
background: url(../images/overlay_zoom.png) no-repeat center center;
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity : 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.view h2 {
text-align: center;
position: relative;
font-size: 15px;
font-weight: 700;
padding: 30px 0 10px 0;
height:0px;
-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:hover a.info { visibility:visible; }
.view:hover h2 { height:40px; }
.view:hover .mask {
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity : 1;
}
@media only screen and (min-width: 481px) and (max-width: 1150px) {
.img_place:hover .overlay.social .font_awesome{ top:50px; }
}
@media screen and (min-width: 992px) and (max-width:1200px ) {
.view h2 { padding: 15px 0 10px 0; }
.view:hover h2 { height:30px; }
a.info { margin-top:10px; }
}
@media screen and (min-width: 481px) and (max-width: 991px) {
.view h2, .view:hover h2 { padding: 20px 0 20px 0; height:auto; }
a.info { margin-top:15px; padding: 7px 14px; font-size: 12px; }
}
@media screen and (max-width: 480px) {
.img_place:hover .overlay.social .font_awesome{ top:100px; }
.view h2, .view:hover h2 { padding: 20px 0 20px 0; height:auto; }
a.info { margin-top:15px; padding: 7px 14px; font-size: 12px; }
}
/* #portfolio category Filter - options style */
/* options style */
#options li {
display: inline-block;
font-weight: 700;
line-height: 25px;
letter-spacing: 0.5px;
position:relative;
margin-right: 0px;
padding-right:18px;
margin-top: 5px;
height:27px;
overflow:hidden;
}
#options li a {
display: block;
width:100%;
left:0px;
text-decoration:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 5px;
}
#options li:hover a .catName,
#options li a.selected .catName {
bottom:25px;
}
.catName span{ display:block; text-transform: uppercase; }
#options li a { font-family: 'header_font', 'Trebuchet MS', sans-serif; font-size:14px; }
/* Category name animation */
#options li a .catName{
position:relative;
bottom:0px;
padding: 5px 0px 3px 7px;
text-indent:-3px;
zoom: 1; /* gives the object layout */
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
/* Isotope portfolio item style */
.isotope_items .item a{
position:relative;
visibility:visible;
display:block;
}
.isotope_items{
display:block;
}
.isotope_items .item {
overflow:hidden;
}
.isotope_option{ margin-bottom:20px; }
@media only screen and (max-width: 991px) {
.controls ul { margin-bottom: 5px; }
.controls li { padding-right:10px; }
.isotope_option{ margin-bottom:25px; }
}
@media only screen and (max-width: 767px) {
.controls ul { margin-bottom: 5px; }
.controls li:first-child { text-align:left; }
}
/* End Isotope styles ========================== */
/* #Client logo align */
.clients_logo{
width:100%;
text-align:center;
float:left;
}
.clients_logo.grid_mode a {
width: 23%;
padding: 2.4%;
float: left;
padding: 2% 0% 2% 0%;
margin: 0% 0% 2% 2%;
display: block;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.clients_logo a { margin:10px; paddimg:25px; display:inline-block; }
.clients_logo img{ max-width:120px; height:auto; }
@media only screen and (max-width: 479px) {
.clients_logo.grid_mode a {
width: 47%;
padding: 4% 0% 4% 0%;
}
.clients_logo.grid_mode a img{
max-width: 60px;
}
}
@media only screen and (min-width: 481px) and (max-width: 991px) {
.clients_logo.grid_mode a {
width: 47%;
padding: 4% 0% 4% 0%;
}
.clients_logo.grid_mode a img{
max-width: 100px;
}
}
.col-1by3{ position:relative; float:left; display:block; width:33.3%;}
.col-2by3{ position:relative; float:left; display:block; width:66.7%; }
.col-1by4{ position:relative; float:left; display:block; width:25%;}
.col-2by4{ position:relative; float:left; display:block; width:75%; }
.col-2by3 .services_list .desc,
.col-2by4 .services_list .desc {
padding-left: 0px !important;
}
.col-2by3 .services_list .circular_icon, .services_list .icon,
.col-2by4 .services_list .circular_icon, .services_list .icon {
float: none !important;
}
@media only screen and (min-width: 992px) and (max-width: 1519px) {
.fitToLowDevice { padding: 0px 0px 0px 0px !important; }
.col-1by3{ width:100%; margin-bottom: 50px; min-height: 310px;}
.col-2by3{ width:100%; }
.col-1by4{ width:100%;}
.col-2by4{ width:100%; }
}
@media only screen and (min-width: 481px) and (max-width: 991px) {
.fitToLowDevice { padding: 0px 0px 0px 0px !important; }
.col-1by3{ width:100%; margin-bottom: 50px;}
.col-2by3{ width:100%; }
.col-1by4{ width:100%; }
.col-2by4{ width:100%; }
}
@media only screen and (max-width: 479px) {
.fitToLowDevice { padding: 0px 0px 0px 0px !important; }
.col-1by3{ width:100%; }
.col-2by3{ width:100%; }
.col-1by4{ width:100%;}
.col-2by4{ width:100%; }
}
/* Tools text */
ul.tools {
margin: 0px 0 15px 0;
text-align: left;
display:block;
position: relative;
}
ul.tools.alignLeft { float: none; }
ul.tools.alignLeft li{ float: none; }
ul.tools li:first-child { margin: 0 0 0 0px; }
ul.tools li {
float: right;
width: auto;
margin: 0 0 0 20px;
display: inline;
font-size: 13px;
}
.post-list ul.tools li { float:left; margin: 0 20 0 0px;}
ul.tools li i{ padding-right:7px; }
ul.tools li.date {
float: left;
margin: 0 0 0 0px;
}
.thumb_desc .tools{ padding:10px 0px 20px;}
.text_icons i{ position:relative; top:1px; }
.text_icons.left i{ margin-left:5px; }
.text_icons.right i{ margin-right:5px; }
/* #Image/Thumbnail popup overlay icons style and animation */
.itemOver{
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.itemOver .overlay {
width:10%;
height:10%;
margin:0 auto;
left:50%;
top:50%;
text-align:center;
visibility:hidden;
overflow:hidden;
-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;
}
.itemOver .overlay.flatHover {
width: 100%;
height:100%;
left:0%;
top:0%;
z-index:1000;
}
.itemOver.addHover .overlay{
width: 100%;
height:100%;
left:0%;
top:0%;
visibility:visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity : 1;
}
.itemOver .overlay .popup_overlay {
width:100% !important;
max-width:100% !important;
height:100%;
z-index:100;
}
.itemOver.addHover .overlay .popup_overlay,
.notTouchDevice .itemOver.addHover .overlay .popup_overlay{ display:block; }
.notTouchDevice .itemOver .overlay .popup_overlay { display:none; }
.itemOver .popup_overlay .magnificPopup{
position: inherit;
}
.itemOver .overlay .popup_overlay .popup_links{
position:relavite !important;
margin: 50% auto;
display: block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.itemOver .overlay .popup_overlay .popup_links.short { margin: 33% auto; }
.itemOver .overlay .popup_overlay .popup_head.default{
width: auto;
max-height: none;
left: 0%;
top: 0%;
position: absolute;
padding-bottom: 5px;
margin: 10px 15px 15px 15px;
}
.itemOver .popup_overlay .popup_head.default h4 {
width: 100%;
font-size: 13px;
font-weight: 400;
margin-bottom: 15px;
padding-bottom: 15px;
font-family: 'body_font', sans-serif;
line-height: 22px;
}
.itemOver .overlay .popup_overlay .popup_foot.default {
width: 100%;
min-width: inherit;
top: auto;
bottom: 30px;
position: absolute;
left: 0px;
margin-left: auto;
margin-top: auto;
}
figure.itemOver .overlay .popup_overlay .popup_links{ margin: 30% auto; }
.single_post figure.itemOver .overlay .popup_overlay .popup_links{ margin: 25% auto; }
.post-list figure.itemOver .overlay .popup_overlay .popup_links{ margin: 46% auto; }
.itemOver .large_image .overlay .popup_overlay .popup_links{ margin: 36% auto; }
.itemOver .overlay .popup_overlay .popup_links>a{
width:40px;
height:40px;
top:50%;
margin-top:-20px;
margin-right:2px;
padding:2px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.medium_image .overlay .popup_overlay .popup_links>a { margin-top:0px; }
.itemOver .overlay .popup_links>a{
position:relative;
display:inline-table;
width:40px;
}
.itemOver .overlay .popup_links>a:hover{
background-color: rgba(0,0,0, .5);
}
.itemOver .overlay .popup_links>a:nth-child(1) {
animation-delay:.2s;
-webkit-animation-delay:.2s;
}
.itemOver .overlay .popup_links>a:nth-child(2) {
animation-delay:.4s;
-webkit-animation-delay:.4s;
}
.itemOver .overlay .popup_links>a:nth-child(3) {
animation-delay:.6s;
-webkit-animation-delay:.6s;
}
.itemOver .overlay .popup_links>a:nth-child(4) {
animation-delay:.8s;
-webkit-animation-delay:.8s;
}
.itemOver .overlay .popup_links>a:nth-child(5) {
animation-delay:1s;
-webkit-animation-delay:1s;
}
.itemOver .overlay .popup_links>a:nth-child(6) {
animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
.itemOver .overlay .popup_links>a:nth-child(7) {
animation-delay:1.4s;
-webkit-animation-delay:1.4s;
}
.itemOver .overlay .popup_links img,
.itemOver .overlay .popup_overlay .popup_links img{
max-width: 100%;
height: auto;
margin:0 auto !important;
display:block;
}
.itemOver.addHover .overlay .popup_overlay .popup_links>a{
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.itemOver .popup_links>a span{
width:40px;
height:40px;
display:block;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.itemOver .popup_links .link_audio{
background-image : url(../images/hover_icons/icon_audio.png);
background-image : -Webkit-image-set(url(../images/hover_icons/icon_audio.png) 1x, url(../images/hover_icons/icon_audio@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_image{
background-image : url(../images/hover_icons/icon_image.png);
background-image : -Webkit-image-set(url(../images/hover_icons/icon_image.png) 1x, url(../images/hover_icons/icon_image@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_link{
background-image : url(../images/hover_icons/icon_link.png);
background-image: -Webkit-image-set(url(../images/hover_icons/icon_link.png) 1x, url(../images/hover_icons/icon_link@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_video{
background-image : url(../images/hover_icons/icon_video.png);
background-image: -Webkit-image-set(url(../images/hover_icons/icon_video.png) 1x, url(../images/hover_icons/icon_video@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_desc{
background-image : url(../images/hover_icons/icon_desc.png);
background-image: -Webkit-image-set(url(../images/hover_icons/icon_desc.png) 1x, url(../images/hover_icons/icon_desc@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_gallery{
background-image : url(../images/hover_icons/icon_gallery.png);
background-image: -Webkit-image-set(url(../images/hover_icons/icon_gallery.png) 1x, url(../images/hover_icons/icon_gallery@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links .link_portfolio{
background-image : url(../images/hover_icons/icon_portfolio.png);
background-image: -Webkit-image-set(url(../images/hover_icons/icon_portfolio.png) 1x, url(../images/hover_icons/icon_portfolio@2x.png) 2x);
background-position: center center;
background-repeat:no-repeat;
}
.itemOver .popup_links>a:hover span {
-webkit-animation-name: swing;
animation-name: swing;
}
.itemOver .medium_image{ margin-bottom:28px; }
.itemOver .overlay .popup_overlay .popup_head{
display:none;
width:70%;
max-height:70px;
left:15%;
top:50%;
position:absolute;
text-align:center;
padding-bottom:5px;
margin-top:-105px;
animation-delay:.3s;
-webkit-animation-delay:.3s;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.itemOver.addHover .overlay .popup_overlay .popup_head{
display:block;
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.itemOver .popup_overlay .popup_head h4{
width: 100%;
font-size: 15px;
font-weight: 700;
padding-bottom: 5px;
margin-bottom: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
.itemOver .overlay .popup_overlay .popup_head hr{ margin: 0px 0px 2px; }
.itemOver .popup_overlay .popup_head h4 a{
width:auto;
padding-left:2px;
}
.itemOver .popup_overlay .popup_center{
width: 100%;
position:absolute;
display:block;
top:50%;
font-size: 15px;
font-weight: 700;
margin-top: -20px;
margin-bottom: 0px;
font-family: 'Trebuchet MS', sans-serif;
}
.itemOver .popup_overlay{ display:block; }
.itemOver .popup_overlay .popup_center .inner_cont{
position:relative;
-moz-transform: scale(1.50) rotate(45deg);
-webkit-transform: scale(1.50) rotate(45deg);
-o-transform: scale(1.50) rotate(45deg);
-ms-transform: scale(1.50) rotate(45deg);
transform: scale(1.50) rotate(45deg);
-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;
}
.itemOver.addHover .popup_overlay .popup_center .inner_cont{
-moz-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.itemOver .overlay .popup_overlay .popup_center hr{ margin: 0px 0px 2px; }
.itemOver .popup_overlay .popup_center h4 a{
width:auto;
padding-left:2px;
}
@media only screen and (min-width: 992px) and (max-width:1199px ) {
.itemOver .overlay .popup_overlay .popup_head{
width:90%;
left:5%;
max-height:50px;
margin-top:-85px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.itemOver .overlay .popup_overlay .popup_head{
margin-top:-125px;
}
.large_size .itemOver .overlay .popup_overlay .popup_head{
margin-top:-100px;
}
}
@media only screen and (min-width: 321px) and and (max-width: 600px) {
.itemOver .overlay .popup_overlay .popup_head{
margin-top:-125px;
}
.large_size .itemOver .overlay .popup_overlay .popup_head{
margin-top:-105px;
}
}
@media only screen and (max-width: 320px) {
.itemOver .overlay .popup_overlay .popup_head{
margin-top:-125px;
}
.large_size .itemOver .overlay .popup_overlay .popup_head{
margin-top:-95px;
}
}
.itemOver .overlay .popup_overlay .popup_foot {
display:none;
width:240px;
min-width:210px;
top:50%;
position:absolute;
left:50%;
margin-left:-120px;
margin-top:46px;
animation-delay:.3s;
-webkit-animation-delay:.3s;
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.itemOver .overlay .popup_overlay .popup_foot h4{
font-size:15px;
font-weight:700;
}
.itemOver.addHover .overlay .popup_overlay .popup_foot{
display:block;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@media only screen and (max-width: 991px) {
.itemOver .overlay .popup_overlay .popup_foot { margin-top:70px; }
.large_size .itemOver .overlay .popup_overlay .popup_foot { margin-top:46px; }
}
.item_feature>li .title{
font-size: 14px;
font-weight: 800;
line-height:1.6;
padding-right:15px;
}
.item_feature>li {
padding-bottom:10px;
padding-top:10px;
}
.item_feature.remove_bottomPadding>li {
padding-bottom:0px;
}
.item_feature.font_awesome>li {
padding-bottom:3px !important;
}
.item_feature.no_border>li { border-bottom:none }
.item_feature>li.last{ border-bottom:none }
.item_feature>li .meta{
font-weight: 400;
padding-right:10px;
}
.item_feature>li .meta a { padding-right:10px; }
.item_feature>li>ul{ display:inline-block; }
.item_feature>li .title.s2x {
top: 5px;
position: relative;
}
All system for education purposes only. For more tools: Telegram @jackleet