/*
 * Joiee v1.0 - Template Stylesheet
 *
 * This file is part of Joiee, a HTML template build for sale at ThemeForest.
 * For questions, suggestions or support request, please mail me at maimairel@yahoo.com
 *
 * Development Started:
 * December 10, 2012
 *
 */

@import url('typography.css');
@import url('form.css');
@import url('button.css');
@import url('main.css?v=20160120');
@import url('widgets.css');
@import url('icons.css');

/* #Demo Styles
================================================== */

.icons-list, 
.icons-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.icons-list li {
    float: left;
    margin: 0 6px 6px 0;
}

.icons-list.boxed li span {
    display: block;
    font-size: 24px;
    padding: 8px;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.icons-list.boxed li span [class*="icon-"] {
    width: 24px;
    height: 24px;
}

/* #Bootstrap Tweaks
================================================== */

.alert {
    font-size: 13px;
}

.pager li > a {
    color: #444;
}

.pager li > a:hover {
    color: #555;
}

.search-query {
    background-repeat: no-repeat;
    background-position: right center;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE2cHgiPjxwYXRoIGZpbGw9IiNjY2NjY2MiIGQ9Ik0xNC45MDUsMTMuMDkxbC0zLjc1Mi0zLjc1M2MwLjYxLTAuOTQ2LDAuOTcxLTIuMDY5LDAuOTcxLTMuMjc3QzEyLjEyNCwyLjcxOCw5LjQwMywwLDYuMDYyLDAgQzIuNzE4LDAsMCwyLjcxOCwwLDYuMDYxYzAsMy4zNDMsMi43MTgsNi4wNjIsNi4wNjIsNi4wNjJjMS4yMDcsMCwyLjMzLTAuMzU4LDMuMjc3LTAuOTY5bDMuNzUxLDMuNzUyIGMwLjEyNiwwLjEyNiwwLjMzMiwwLjEyNiwwLjQ1NSwwbDEuMzYxLTEuMzYxQzE1LjAzMSwxMy40MiwxNS4wMzEsMTMuMjE2LDE0LjkwNSwxMy4wOTF6IE0xLjkyNCw2LjA2MSBjMC0yLjI3OSwxLjg1Ni00LjEzNiw0LjEzNy00LjEzNmMyLjI4MiwwLDQuMTM3LDEuODU2LDQuMTM3LDQuMTM2YzAsMi4yODItMS44NTUsNC4xMzctNC4xMzcsNC4xMzcgQzMuNzgsMTAuMTk4LDEuOTI0LDguMzQyLDEuOTI0LDYuMDYxeiIvPjwvc3ZnPg==");
}

/* #Isotope Styles
================================================== */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

/* #Revolution Slider
================================================== */

.fullwidthbanner-container {
    width: 100% !important;
    position: relative;
    padding: 0;
    max-height: 550px !important;
    overflow: hidden;
}

.fullwidthbanner-container ul, 
.fullwidthbanner-container ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* #Customizer (remove this part when not needed)
================================================== */

#joiee-customizer {
    position: fixed;
    display: none;
    top: 200px;
    left: 0;
    background-color: #fff;
    width: 72px;
    padding: 4px;
    z-index: 99999;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-left: 0;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    border-radius: 0 6px 6px 0;
}

#joiee-customizer.active {
    display: block;
}

#joiee-customizer .color-list, 
#joiee-customizer .color-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#joiee-customizer .color-list {
    margin-bottom: 5px;
}

#joiee-customizer .color-list li {
    float: left;
    margin: 2px;
}

#joiee-customizer .color-list li span {
    display: block;
    cursor: pointer;
    width: 32px; height: 32px;
}
	
.sidebar .home-widget-item .image, 
.sidebar .home-widget-item {
width: 280px !important;
}	
/* #Media Queries
================================================== */
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */
	
	
@media only screen and (max-width: 959px) {
    
    .header-top-right {
    float: none;
    clear: both;
    }
	.header-top-content ul {
	margin-bottom: 0;	
	}
    #main-nav, #main-nav ul {
    float: left;
    }
    .search {
    position: absolute;
    top: 35px;
    right: 0;
    }
    .main-header-wrap .header-slider h1  {
    font-size: 20px;
    padding-bottom: 10px;
    line-height: 125%;
    }
    .main-header-wrap .header-slider p {
    font-size: 12px;
    line-height: 150%;
    }
    a.btn-red {
    padding: 3px 10px;
    font-size: 12px;
    }
    .main-header-wrap {
    padding: 10px 0;
	background-size: auto 100%;
	background-position: 50% 0;
    }
    .main-header-wrap .header-seminar .title {
    font-size: 14px;
    height: 35px;
    padding-top: 0;
    line-height: 35px;
    background-position: 0 50%;
    }
    .main-header-wrap .header-seminar .seminar-cont .box .date span {
    font-size: 14px;
    }
    .main-header-wrap .header-seminar .seminar-cont .box .date {
    border-right: 2px solid #B2B2B2;
    font-size: 10px;
    font-weight: bold;
    height: auto;
    padding-top: 0px;
    width: 40px;
    }
    .main-header-wrap .header-seminar .seminar-cont .box .link {
    width: 210px;
    font-size: 12px;
    }
    .home-widget-item .image, .home-widget-item {
    width: 236px !important;
    }
    
    .spotlight {
    width: 410px;
    }
    .sidebar .header-seminar .title {
	font-size: 15px;	
	}
	.sidebar .header-seminar .seminar-cont .box .date {
	font-size: 10px;
	height: auto;	
	}
	.sidebar .header-seminar .seminar-cont .box .date span {
    font-size: 18px;
	}
	.sidebar .header-seminar .seminar-cont .box .link {
    font-size: 12px;
    width: 130px;
	}

	.sidebar .home-widget-item .image, 
	.sidebar .home-widget-item {
	width: 220px !important;
	}	
	.staff-cont .box-left { width: 245px;  }
	.staff-cont .box-right{ width: 245px;  }
	.post {
    padding-right: 0px;
    font-size: 12px;
    }
    .blog .post .side {
    width: 60px;
    }
    .blog .post .side .post-type{
    float: none;
    }
    .blog .post .side .date {
    float: none;
    margin-left: 0
    }
    .blog .post .wrap {
    margin-left: 75px;
    }
    .blog .post .side .date span.day {
    display: block;
    line-height: 100%;
    }
    .blog .post .side .date span {
    line-height: 100%;
    }
    .blog .post .side {
    float: left;
    }






	
	

}
/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */
	

@media only screen and (max-width: 767px) {
    #main-nav {
        clear: left;
        text-align: center;
        float: none;
        margin-bottom: 23px;
        width: 100%;
    }
    
    .header-top-content ul {
    margin-left: 0;
    float: none !important;
    }
    .header-top ul li {
     font-size: 10px;
     padding: 0 8px;
	
    }
	
	
    .header-top-right  {
    width: auto !important;
    float: none !important;
    padding-top: 15px !important;
    }
    .search {
    position: static;
    top: 0;
    left: 0;
    float: none !important;
    margin-bottom: 15px;
    }
    .selectnav {
    height: 40px;
    }
    .js #main-nav-list {
        display: none;
    }

    .js .selectnav {
        width: 100%;
        display: block;
    }
    .main-header-wrap .header-slider {
    width: 300px;
    padding-left: 0;
    padding-bottom: 15px;
    }
    .main-header-wrap .header-seminar {
    width: 298px;
    }
    .portfolio-carousel .caroufredsel_wrapper, 
    .portfolio-carousel .portfolio-items {
    height: auto !important;
    position: relative !important;
    }
    .portfolio-items {
    width: 300px !important;
    height: 1000px !important;
    float: none !important; 
    }
    .home-widget-item .image {
    width: 300px !important;
    }
    .home-widget-item  {
    width: 300px !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    float: left !important; 
    }
    .callout {
    height: auto;
    background-size: cover;
    }

    .spotlight {
    width: 280px;
    }
    .spotlight-content {
    float: none !important;
    width: auto;
    font-size: 12px;
    }
    .legalwise-seminars {
    width: auto !important;
    float: left !important;
    width: 260px !important;
    }
    .legalwise-seminars img {
    width: 80px;
    }
    .domani {
    width: auto !important;
    float: none !important; 
    }
	.sidebar .header-seminar .seminar-cont .box .link {
    font-size: 13px;
    width: 215px;	
	}
	.sidebar .home-widget-item .image, 
	.sidebar .home-widget-item, 
	.sidebar .header-seminar {
    width: 300px !important;
	}	
	.staff-cont .box-left { width: 145px; font-size: 12px;  }
	.staff-cont .box-right{ width: 145px; font-size: 12px;}
	
	.staff-cont .name-title {
  	font-size: 11px;
	}
	.staff-cont .name-title h3 {
  	font-size: 12px;
	}
	


	
}
/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */
    
    
 @media only screen and (min-width: 480px) and (max-width: 767px) {
    #joiee-customizer, 
    #joiee-customizer.active {
        display: none;
    }
    

    .header-seminar {
    float: left !important;
    }
    .portfolio-items {
    margin-left: auto !important;
    margin-right: auto !important;
    }
    .spotlight, .testimonials  {
    width: auto;
    }
    .legalwise-seminars {
    width: 380px !important;
    }
	.sidebar .home-widget-item .image, 
	.sidebar .home-widget-item, 
	.sidebar .header-seminar {
    width: 300px !important;
	}	
	.container  .sidebar {
	width: 300px !important;
	float: none !important;
	margin-left: auto !important;	
	margin-right: auto !important;
	display:block !important;
	}
    .staff-cont .box-left { width: 200px; font-size: 12px;  }
	.staff-cont .box-right{ width: 200px; font-size: 12px;}
    
}