/* BODY PATTERN1 */
body.pattern1{background: url('../img/pat1.png') repeat;}
body.pattern1 #page-wrap{box-shadow: 0px 4px 7px #666;}

/* BODY WITH PATTERN2 */
body.pattern2{background: url('../img/pat2.png') repeat;}
body.pattern2 #page-wrap{box-shadow: 0px 4px 7px #333;}
/*BODY WITH PATTERN 3*/
body.pattern3{background: url('../img/pat3.png') repeat;}
body.pattern3 #page-wrap{box-shadow: 0px 4px 7px #cecece;}
/* BODY WITH PATTERN4 */
body.pattern4{background: url('../img/pat4.png') repeat;}
body.pattern4 #page-wrap{box-shadow: 0px 4px 7px #bfbfbf;}
/* BODY WITH PATTERN5 */
body.pattern5{background: url('../img/pat5.png') repeat;}
body.pattern5 #page-wrap{box-shadow: 0px 4px 7px #c39a5e;}
/* BODY WITH PATTERN6 */
body.pattern6{background: url('../img/pat6.png') repeat;}
body.pattern6 #page-wrap{box-shadow: 0px 4px 7px #ccc;}
/* BODY WITH PATTERN7 */
body.pattern7{background: url('../img/pat7.png') repeat;}
body.pattern7 #page-wrap{box-shadow: 0px 4px 7px #333;}
/* BODY WITH PATTERN8 */
body.pattern8{
    background: url('../img/pat8.png') repeat;
}

body.pattern8 #page-wrap{
    box-shadow: 0px 4px 7px #ccc;  
}

/* BODY WITH PATTERN9 */
body.pattern9{
    background: url('../img/pat9.png') repeat;
}

body.pattern9 #page-wrap{
    box-shadow: 0px 4px 7px #222;  
}

/* BODY WITH PATTERN10 */
body.pattern10{
    background: url('../img/pat10.png') repeat;
}

body.pattern10 #page-wrap{
    box-shadow: 0px 4px 7px #ccc;  
}

/* BODY WITH PATTERN11 */
body.pattern11{
    background: url('../img/pat11.png') repeat;
}

body.pattern11 #page-wrap{
    box-shadow: 0px 4px 7px #ccc;  
}

/* BODY WITH PATTERN12 */
body.pattern12{
    background: url('../img/pat12.png') repeat;
}

body.pattern12 #page-wrap{
    box-shadow: 0px 4px 5px #ccc;  
}

/* BODY WITH PATTERN13 */
body.pattern13{
    background: url('../img/pat13.png') repeat;
}

body.pattern13 #page-wrap{
    box-shadow: 0px 4px 5px #ccc;  
}

/* BODY WITH PATTERN14 */
body.pattern14{
    background: url('../img/pat14.png') repeat;
}

body.pattern14 #page-wrap{
    box-shadow: 0px 4px 5px #ccc;  
}

/* BODY WITH PATTERN15 */
body.pattern15{
    background: url('../img/pat15.png') repeat;
}

body.pattern15 #page-wrap{
    box-shadow: 0px 4px 5px #ccc;  
}

/* BODY WITH PATTERN15 */
/*body.pattern{background: url('../images/bg.jpg') no-repeat fixed;background-size:cover;}*/
body.pattern{    background: url('../img/pat14.png') repeat fixed;}
body.pattern #page-wrap{box-shadow: 0px 4px 5px #ccc;}


/*=====================================================================================
        1.BASIC STYLES
======================================================================================*/
:focus {outline: 0;}
body{color: #444;}
#page-wrap{margin:0 auto;padding:0;background: #fff;width: 1000px;border-top:5px solid #0281ff;border-bottom:8px solid #0281ff;}
/* HEADINGS */
h1, h2, h3, h4, h5, h6{
    color: #6f6f6f;
    text-transform: uppercase;
    margin-bottom: 5px;
}

h1{font: bold 20px 'Droid Sans', sans-serif;line-height: 30px;}
h2{font: bold 20px 'Droid Sans', sans-serif;line-height: 30px;}
h3{font: bold 20px 'Droid Sans', sans-serif;line-height: 30px;}
h4{font: bold 16px 'Droid Sans', sans-serif;line-height: 26px;}
h5{font: bold 16px 'Droid Sans', sans-serif;line-height: 24px;}
h6{font: bold 16px 'Droid Sans', sans-serif;line-height: 22px;}

/* PARAGRAPH */
p{font: normal 13px 'Droid Sans', sans-serif;line-height: 20px;margin-bottom:20px;}
p.ma_ar{text-align:center;}
p.ma_ar .btn-big{float:none !important;}
p.prod_p{text-align:center;}
p.prod_p img{padding:10px;margin-top:20px;box-shadow:0px 0px 3px #ccc;}
.imgg img{border-radius:5px;width:100%;}
/* LINKS */
a{
    text-decoration: none;
    font: 12px 'Droid Sans', sans-serif;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}



/* SPAN */
span{
    font: 12px 'Droid Sans', sans-serif;
}



/* LIGHT COLORED TEXT */
.text-light{
    color: #bbb;
}



/* FINDOUT MORE LINKS */
a.find-out-more{
    margin-top: 20px;
    float: left;
    font: 12px 'Droid Sans', sans-serif;
    display: block;
}



/* BLOCKQUOTE STYLES */
blockquote{
    background: #fcfcfc;
    font: italic 14px 'Droid Serif', serif;
    line-height: 24px;        
    padding: 15px 20px;
    margin: 15px 0;
    float: left;
}

blockquote.left{
    width: 60%;
    margin: 10px 15px 8px 0;
    float: left;
}

blockquote.right{
    width: 60%;
    margin: 10px 0 8px 15px;
    float: right;
}



/* TEXT HIGHLIGHT */
.highlight-dark{
    background: #8f8f8f;
    color: #fff;
}

.highlight-light{
    background: #ececec;
}




/*=====================================================================================
        HEADER CONTAINER STYLES
======================================================================================*/
#header-wrapper{width: 100%;border-bottom:2px solid #0281ff;}
#header{width: 940px; margin-top: 15px;margin-bottom: 15px; margin-right: auto; margin-left: auto;}
.inner_banner img{max-width:100%;}
/* LOGO */
#logo{margin-right: 30px;float: left;margin-bottom:20px;}
#logo img{max-width:100%;}

.cont_right{float:right;font:600 14px 'Droid Serif', serif;}
.cont_right ul{margin:0; padding:0;}
.cont_right ul li{display:block;padding:5px;}
.cont_right ul li a{font:inherit;}
/* SOCIAL BOOKMARKS */
.social{float: right;margin-bottom: 25px;}
.social li{float: left;width: 25px;height: 25px;border-radius: 25px; margin-right: 5px;cursor: pointer;}
/* SOCIAL GRID_12 ON PRESENTATION PAGE "MEDIA" */

.grid_12.social.presentation li{
    float: left;
    margin-bottom: 5px;
}

.grid_12.social.presentation-loading{
    margin-bottom: 40px;
    float: left;
    background: url('../img/ajax-loader.gif') no-repeat center center;
}

/* MAIN NAVIGATION CONTAINER */
#nav-container{
    width: 940px;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    height: 50px;
    float: left;
}

#nav-container select{
    display: none;
}

/* NAVIGATION */
#nav{
    width: 705px;
    margin-right: 20px;
    float: left;   
    list-style: none;
    height: 50px;
}

#nav > ul{
    display: block !important;
}

#nav li{
    float: left;
    list-style: none;
    position: relative;
    padding: 18px 16px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#nav li a{
    text-decoration: none;
    float: none;
    display: block;
    color: #6f6f6f;
    text-transform: uppercase;
    font: 12px 'Droid Sans', sans-serif;
}

#nav li:hover{
    background: #f6f6f6;
}

#nav li.active{
    background: #f6f6f6;
}

#nav li:hover > ul{
    display: block;
}

/* SUBMENU */
#nav li ul{
    display: none;
    position: absolute;
    padding-top: 5px;
    margin: 0;
    top: 100%;
    left: 0;
    z-index: 100;
}

#nav li ul li{
    border-top: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-left: 1px solid #ececec;
    background: #fff;
    padding: 12px 20px !important;
}

#nav li ul li:last-of-type{
    border-bottom: 1px solid #ececec;
}

#nav li ul li a{
    text-transform: none !important;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 15px;
    color: #8f8f8f;

}

#nav li ul li, #nav li ul li a{
    float: none;
}

#nav li ul li a {
    width: 130px;
    display: block;
}

/* THIRD LEVEL */
#nav li ul li ul {
    display: none;
}

#nav li ul li:hover ul {
    left: 100%;
    top: -1px;
    padding-top: 0 !important;
    padding-left: 5px;
}


/* SEARCH FIELD */
#search{float: right;width:200px;margin-top: 12px;margin-bottom: 12px;overflow: hidden;position: relative;}

#search-bkg{
    color: #8f8f8f;
    background: #f6f6f6;
    width: 159px;
    height: 13px;
    padding: 7px 0 7px 15px;
    margin-right: 10px;
    border: none;
    float: left;
    font: 10px 'Arial', sans-serif;
    font-style: italic;
}

#search-submit{
    border: none;
    background: #f6f6f6 url('../img/search.png') no-repeat center;
    width: 25px;
    padding-top: 8px;
    margin-right: 6px;
    text-indent: -9999px;
    cursor: pointer;
}


/* PAGE TITLE */
#page-title{
    width: 1000px;
    height: 70px;
    margin-bottom: 30px;
    float: left;
    background: url('../img/page-title.png') repeat-x;
}

#page-title h1{
    text-transform: none;
    font: 20px 'Pacifico', cursive;
    text-align: center;
    margin: 0 auto;
    color: #8f8f8f;
    text-shadow: 2px 2px #fff;
    margin-top: 17px;
}



/*=====================================================================================
        CONTENT WRAPPER STYLES
======================================================================================*/
#content-wrapper{margin: 0 auto;padding:2em 0;width: 960px;overflow: hidden;}

.section-title{
    margin-bottom: 20px;
    border-bottom: 1px solid #ececec;
    width: 100%;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
}

.section-title h5{
    float: left;
}

/* section title within a div (column grid) - no need for right margin */
.grid_1 .section-title,
.grid_2 .section-title,
.grid_3 .section-title,
.grid_4 .section-title,
.grid_5 .section-title,
.grid_6 .section-title,
.grid_7 .section-title,
.grid_8 .section-title,
.grid_9 .section-title,
.grid_10 .section-title,
.grid_11 .section-title,
.grid_12 .section-title{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.grid_12.note{
    background: #f6f6f6;
    width: 940px;
}

.grid_12.note .text{
    font: italic 16px 'Droid Serif', serif;
    padding:10px;
    float: left;
    text-align: left;
    min-width: 680px;
}

.grid_12.note .btn-big{
    margin-right: 35px;
    margin-bottom: 20px;
    width: auto;
}


/*=====================================================================================
        HOME PAGE STYLES
======================================================================================*/
.carousel{
    width: 100%;
    float: left;
}

.carousel .section-title h6{
    width: 50%;
    float: left;
}

.carousel .carousel-nav{
    float: right;
    width: 50%;
}

.carousel .carousel-nav li{
    float: right;
    margin-right: 5px;
    background: #8f8f8f;
    position: relative;
    top: -2px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.carousel .carousel-nav li:first-of-type{
    margin-right: 0;
}

.carousel .carousel-nav li a.next{
    background: url('../img/next.png') no-repeat 9px center;
    width: 22px;
    height: 22px;
    display: block;
}

.carousel .carousel-nav li a.prev{
    background: url('../img/prev.png') no-repeat 8px center;
    width: 22px;
    height: 22px;
    display: block;
}

.carousel .section-title{
    border-bottom: none;
    margin-bottom: 10px;
}

.carousel-li{
    width: 100%;
    float: left;
}

.carousel-li > li{
    width: 220px;
    float: left;
    margin-right: 20px;
    height: auto !important;
}

.carousel-li li img{
    opacity: 0.7;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.carousel-li li img:hover{
    opacity: 1;
}

.carousel-li .img-hover{
    top: 70% !important;
}


/*=====================================================================================
        ABOUT US PAGE STYLES
======================================================================================*/
.team img{
    float: left;
    margin-right: 20px;
}

.team h5{
    text-transform: none;
    color: #666;
    position: relative;
    top: -6px;
}

.team .social{
    width: auto;
    float: left;
}

.team .social li{
    float: left;
    margin-top: 20px;
}



/*=====================================================================================
        SERVICES PAGE STYLES
======================================================================================*/
.services-info{width: 100%;float: left;}
.news_update{background:#f2f2f2;padding:0 10px 10px;border-radius:5px;}

.manufacturer{padding:10px;border-radius:5px;border:1px solid #ccc;background:#f9f9f9;display:table;width:100%;}
.manufacturer h2{font-size:16px;border-bottom:2px solid #e8e8e8;margin-bottom:20px;}
.manufacturer .grid_3{border:1px solid #e8e8e8;padding:5px;max-width:192px;}
.manufacturer .grid_3 img{max-width:100%;}
.manufacturer .grid_3 h5{padding-top:5px;text-align:center;font-size:14px;font-weight:600;}

.services-info h6.title{
    height: 30px;
    padding-top: 19px;
}

.services-wrap h6.title{
    padding-top: 19px;
    height: 50px;
}

.services-wrap .icon{
    width: 60px;
    height: 60px;
    margin-right: 20px;
    display: block;
    float: left;
    text-indent: -9999px;
    cursor: pointer;

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.icon1{
    background: #ececec url('../img/services/brush.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon2{
    background: #ececec url('../img/services/box.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon3{
    background: #ececec url('../img/services/mac.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon4{
    background: #ececec url('../img/services/chart.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon5{
    background: #ececec url('../img/services/pie.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon6{
    background: #ececec url('../img/services/rocke-t.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon7{
    background: #ececec url('../img/services/android.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon8{
    background: #ececec url('../img/services/arrow-down.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon9{
    background: #ececec url('../img/services/arrow-left.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon10{
    background: #ececec url('../img/services/arrow-right.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon11{
    background: #ececec url('../img/services/arrow-up.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon12{
    background: #ececec url('../img/services/book.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon13{
    background: #ececec url('../img/services/calendar.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon14{
    background: #ececec url('../img/services/camera.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon15{
    background: #ececec url('../img/services/chain.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon16{
    background: #ececec url('../img/services/chain2.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon17{
    background: #ececec url('../img/services/chrome.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon18{
    background: #ececec url('../img/services/firefox.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon19{
    background: #ececec url('../img/services/safari.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon20{
    background: #ececec url('../img/services/clapboard.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon21{
    background: #ececec url('../img/services/cog.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon22{
    background: #ececec url('../img/services/construction.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon23{
    background: #ececec url('../img/services/cup.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon24{
    background: #ececec url('../img/services/cut.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon25{
    background: #ececec url('../img/services/download.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon26{
    background: #ececec url('../img/services/flag.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon27{
    background: #ececec url('../img/services/folder.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon28{
    background: #ececec url('../img/services/globe.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon29{
    background: #ececec url('../img/services/graph.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon30{
    background: #ececec url('../img/services/hd.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon31{
    background: #ececec url('../img/services/help.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon32{
    background: #ececec url('../img/services/home.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon33{
    background: #ececec url('../img/services/idea.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon34{
    background: #ececec url('../img/services/image.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon35{
    background: #ececec url('../img/services/lab.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon36{
    background: #ececec url('../img/services/label.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon37{
    background: #ececec url('../img/services/lock.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon38{
    background: #ececec url('../img/services/mail.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon39{
    background: #ececec url('../img/services/marker.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon40{
    background: #ececec url('../img/services/paperclip.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon41{
    background: #ececec url('../img/services/pdf.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon42{
    background: #ececec url('../img/services/pencil.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon43{
    background: #ececec url('../img/services/phone.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon44{
    background: #ececec url('../img/services/preview.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon45{
    background: #ececec url('../img/services/rss.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon46{
    background: #ececec url('../img/services/shop.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon47{
    background: #ececec url('../img/services/speach-buble.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon48{
    background: #ececec url('../img/services/speaker.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon49{
    background: #ececec url('../img/services/tool.png')  no-repeat;
    background-position:  -60px -0px;
}

.icon50{
    background: #ececec url('../img/services/warning.png')  no-repeat;
    background-position:  -60px -0px;
}

.services-wrap.services-presentation .icon{
    margin-right: 2px;
    margin-bottom: 2px;
}
/*=====================================================================================
        PORTFOLIO PAGE STYLES
======================================================================================*/
/* PORTFOLIO FILTER QUICKSAND STYLE */
#portfolio-filter{
    float: right;
    width: 460px;
    margin-left: 20px;
    padding-top: 8px;
}

#portfolio-filter li{
    float: right;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 22px;
    position: relative;
    top: -6px;
}

#portfolio-filter li a{
    color: #a1a3a6;
    padding-right: 5px;
    padding-left: 5px;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}



/* PORTFOLIO IMAGE STYLE */
figure.img-styled img{
    opacity: 0.9;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

figure.img-styled:hover img{
    opacity: 1;
}

figure.img-styled .img-container{
    position: relative;
    overflow: hidden;
}

figure.img-styled .img-hover{
    position: absolute !important;
    top: 75%; 
    max-width: 90%; 
}

figure.img-styled .img-hover{
    display: none;
}

figure.img-styled .img-hover li{
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

figure.img-styled .img-hover li a{
    color: #fff;
    text-indent: -9999px;
    display: block;
}


figure.img-styled .img-hover li.title a{
    text-indent: 0;
    border-right: 1px solid #fff;
    padding-right: 10px;
}

figure.img-styled .img-hover li.portfolio-single{
    background: url('../img/chain.png') no-repeat center;
    width: 11px;
    opacity: 1;
}

figure.img-styled .img-hover li.portfolio-grid{
    background: url('../img/grid.png') no-repeat center;
    width: 11px;
}

figure.img-styled .img-hover li.portfolio-zoom{
    background: url('../img/zoom.png') no-repeat center;
    width: 11px;
}

figure.img-styled .img-hover li.video-play{
    background: url('../img/play.png') no-repeat center;
    width: 11px;
}

figure.img-styled .img-hover li:first-of-type{
    margin-left: 10px;
}

figure.no-sliding .img-hover{
    display: block;
}

figcaption{
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fcfcfc;
    border-bottom: 1px solid #f3f3f3;
}

figcaption p{
    text-align: center;
    text-transform: uppercase;
}

/* PORTFOLIO WITH SHOWCASE */
.showcase-wrapper{
    width: 940px;
    position: relative;
    margin: 0 auto 50px;
    padding: 0 30px;
    float: left;
    background: url('../img/patt.png') repeat;
}

.showcase-wrapper .shadow-top{
    width: 1000px;
    position: relative;
    left: -30px;
    height: 12px;
    background: url('../img/shadow-top.png') repeat-x;
    margin-bottom: -12px;

}

.showcase-wrapper .shadow-bottom{
    width: 1000px;
    height: 12px;
    position: relative;
    left: -30px;
    background: url('../img/shadow-bottom.png') repeat-x;
    margin-top: -12px;
    float: left;
}

.showcase{
    width: 940px;
    float: left;
}

.showcase .section-title{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #fff;  
} 

.showcase .section-title h5{
    width: 50%;
}


/* SHOWCASE NAVIGATION STYLE */
.showcase-nav{
    width: 50%;
    float: left;
    position: relative;
}

.showcase-nav li{
    float: right;
}

.showcase-nav li a{
    padding-right: 5px;
    padding-left: 5px;
    color: #a1a3a6;
}

.showcase-nav.bottom{
    width: 100%;
    border-top: 1px solid #fff;
    padding-top: 5px;
    margin-bottom: 15px;
}


/*SHOWCASE ITEM STYLE */
.showcase-item{
    margin-top: 10px;
    margin-right: 0;
    margin-left: 0;
}

.showcase-item img{
    margin-right: 30px;
    width: 600px;
    float: left;
}

.showcase-item .description{
    width: 310px;
    float: left;
}

.showcase-item .description ul li{
    font: 12px 'Droid Sans', sans-serif;
    line-height: 22px;
    border-bottom: 1px solid #fff;
    color: #999999;
    margin-bottom: 10px;
}

.showcase-item .description ul li a{
    padding-left: 5px;
}

.showcase-item .description p{
    margin-bottom: 20px;
}

.showcase-item .description .btn-big{
    float: right;
}


/* ACTIVE IMAGE IN SHOWCASE PORTFOLIO LIST */
.showcase-li figure.img-styled  img{
    opacity: 0.6;
}

.showcase-li figure.img-styled:hover img{
    opacity: 1 !important;
}

.img-styled.showcase-active img{
    opacity: 1 !important;
}


/*PORTFOLIO SINGLE PROJECT WITHOUT SHOWCASE */
.showcase-wrapper.single{
    background: none;
    padding: 0 10px !important;
}

.showcase-wrapper.single .showcase .section-title{
    margin-top: 0;
    border-bottom: 1px solid #ececec; 
}

.showcase-wrapper.single .showcase-item {
    margin-bottom: 0;
}

.showcase-wrapper.single .showcase-item .description ul li{
    border-bottom: 1px solid #ececec;
}



/*=====================================================================================
        BLOG PAGE STYLES
======================================================================================*/
.grid_9.blog{
    width: 680px;
    padding-right: 20px;
    float: left;
}

/*last post has no margin bottom nor padding bottom */
.grid_9.blog li.blog-post:nth-last-child(3){
    margin-bottom: 0px;
    padding-bottom: 40px;
}

.grid_9.blog li.blog-post:nth-last-child(3) .post{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.grid_9.blog .blog-post{
    width: 100%;
    margin-bottom: 40px;
    float: left;
}


/* META STYLES ON BLOG POST*/
.grid_9.blog .meta{
    width: 60px;
    margin-right: 20px;
    float: left;
    cursor: pointer;
}

.grid_9.blog .meta li{
    float: left;
    margin-bottom: 10px;
}

.grid_9.blog .meta .category{
    width: 100%;
    height: 60px;
    text-indent: -9999px;
}

.grid_9.blog .meta .date{
    width: 100%;
    height: 60px;
    background: #ececec;  
}

.grid_9.blog .meta .date p{
    color: #8f8f8f;
    font: bold 14px 'Droid Sans', sans-serif;
    text-align: center;
    padding-top: 14px;
}


/* POST CONTENT(POST IMAGE, TITLE AND TEXT) STYLING */
.grid_9.blog .post{
    float: left;
    width: 600px;
    position: relative;
    border-bottom: 1px solid #ececec;
    padding-bottom: 40px;
}

.grid_9.blog .post figure{
    margin-bottom: 20px;
    position: relative;
}

.post figure.img-styled .img-hover li.title a{
    border-right: none;
}

.post .video-container .title a{
    border-right: 1px solid #fff !important;
}

.post .video-container{
    margin-bottom: 20px;
}

.post .video-container figure {
    margin-bottom: 0 !important;
}

/* BLOG SINGLE POST*/
.grid_9.blog.single .blog-post{
    margin-bottom: 0;
}

.grid_9.blog.single .post{
    border-bottom: none;
}


/* BLOG POST COMMENTS */
.grid_9.blog .post-comments{
    float: left;
    width: 600px;
    margin-left: 80px;
    margin-bottom: 40px;
}

.grid_9.blog .post-comments h5{
    border-bottom: 1px solid #ececec;
    padding-bottom: 5px;
}

.post-comments .comments-li{
    float: left;
    width: 100%;
    margin-top: 20px;
}

.post-comments .comments-li > li{
    float: left;
    width: 100%;
}

.post-comments .comments-li .comment{
    margin-bottom: 15px;
    padding-left: 117px;
    float: left;
    background: #fcfcfc;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
}


/* COMMENT AVATAR */
.post-comments .comments-li .comment .avatar{
    position: absolute;
    left: 15px;
    width: 87px;
}


/* COMMENT META */
.post-comments .comments-li .comment .comment-meta{
    color: #a9a9a9;
    font: 12px 'Droid Sans', sans-serif;
    margin: 0 0 10px;
}

.post-comments .comments-li .comment .comment-meta h5{
    border-bottom: none;
    font: bold 14px Arial, sans-serif;
    cursor: pointer;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


/* CHILD COMMENT */
.child{
    margin-left: 100px;
    margin-bottom: 15px;
    float: left;
}


/* COMMENT FORM */
.grid_9.blog .blog-post .comment-form{
    margin-left: 80px;
    float: left;
    width: 600px;
}

.grid_9.blog .blog-post .comment-form h5{
    border-bottom: 1px solid #ececec;
    padding-bottom: 5px;
}

.comment-form form{
    margin-top: 20px;
}

.comment-form label{
    width: 100%;
    font: 12px 'Droid Sans', sans-serif;
    color: #8f8f8f;
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
}

.comment-form .name, .comment-form .email{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 300px;
    height: 12px;
    font: 12px 'Droid Sans', sans-serif;
    padding: 10px;
    color: #a9a9a9;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.comment-form .comment-text{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 578px;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 22px;
    padding: 10px;
    color: #a9a9a9;
}

.comment-form .submit{
    color: #fff;
    font: bold 12px 'Droid Sans',sans-serif;
    cursor: pointer;
}

.comment-form .name:focus, .comment-form .email:focus, .comment-form .comment-text:focus{
    border-color: #aaa;
}



/*=====================================================================================
        CONTACT PAGE STYLE
======================================================================================*/
.contact{padding:2em 0;}
.contact iframe{padding:5px;box-shadow:0px 0px 3px #ccc;}
.contact .grid_6{margin-bottom:20px;}
.contact .grid_6 p{margin-bottom:0;text-transform:uppercase;}
.style_me{padding:20px 0 20px 20px;box-shadow:0px 0px 3px #ccc;}
.contact-form{float: left;width: 100%;}
.contact-form .sub_div{margin:0 auto;width:120px;padding-right:20px;}
.contact-form form{ padding-right: 20px;position: relative;width: 100%;display:table;}
.contact-form label{width: 100%;font: 12px 'Droid Sans', sans-serif;color: #8f8f8f;display: block;margin-bottom:8px;margin-top:8px;}
.contact-form .name, .contact-form .email{background: #fff;border: 1px solid #ccc;border-radius: 2px;width:90%;height: 12px;font: 12px 'Droid Sans', sans-serif;padding: 10px;color: #444; -webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}
.contact-form .file{background: #fff;border: 1px solid #ccc;border-radius: 2px;width:90%;font: 12px 'Droid Sans', sans-serif;padding: 5px 10px;color: #444; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;    transition: all 0.3s ease 0s;}
.career{padding:15px;box-shadow:0px 0px 3px #ccc;display:table;width:100%;}
.career h6{padding-bottom:8px;border-bottom:1px solid #e8e8e8;}

.contact-form .contact-message{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 90%;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 22px;
    padding: 10px;
    color: #444;
}

.contact-form .submit{
    color: #fff;
    font: bold 12px 'Droid Sans',sans-serif;
    cursor: pointer;
}

.contact-form .name:focus, .contact-form .email:focus, .contact-form .contact-message:focus{
    border-color: #aaa;
}


/* GOOGLE MAPS CONTAINER - DEFAULT IS WIDE MAP */
#map_canvas{
    float: left;
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
}

/* CLASS FOR SHORT MAP VERSION ON CONTACT PAGE */
.map-short{
    width: 940px;
    margin: 0 auto;
}



/*=====================================================================================
        SIDEBAR  STYLE
======================================================================================*/
.aside{float: right;}
.aside-widgets{float: left;}
.aside-widgets > li{margin-bottom: 40px;width: 100%;float: left;}
.aside-widgets > li h6{border-bottom: 1px solid #ececec;padding-bottom: 5px;margin-bottom: 20px;}
.aside-widgets li li{padding-bottom: 10px;}

.enquiry input{width:94%;padding:5px;margin-bottom:5px;}
.enquiry h5{background:#0281ff;color:#fff;padding:5px;}
.enquiry {box-shadow:0px 0px 2px #ccc;}
.enquiry form{padding:5px 8px;}
.enquiry form input, textarea{ font: 12px 'Droid Sans', sans-serif;border:1px solid #e8e8e8;}
.enquiry textarea{width:94%;padding:5px;margin-bottom:5px;height:60px;resize:none;}
.enquiry .sub_div{width:120px;margin:0 auto;}
.enquiry .sub_div input[type="submit"]{width:100%;background:#53c16b;border:none;border-radius:3px;color:#fff;font-weight:bold;cursor:pointer;}

.aside-widgets li a{
    color: #8f8f8f;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 20px;
    display: block;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/* CATEGORIES AND ARCHIVES */
.aside-widgets li.categories li,
.aside-widgets li.archives li{
    padding-top: 5px;
    padding-bottom: 5px;
}

.aside-widgets li.categories li:first-of-type,
.aside-widgets li.archives li:first-of-type{
    padding-top: 0;   
}

.categories li,
.archives li{
    background: url('../img/aside.png') no-repeat 0 12px;
    border-bottom: 1px dotted #eee;
}

.categories li:first-of-type,
.archives li:first-of-type{
    background: url('../img/aside.png') no-repeat 0 7px;
}

.categories li:last-of-type,
.archives li:last-of-type{
    border-bottom: none;
}

.categories a,
.archives a{
    padding-left: 15px;
}


/* TABS IN SIDEBAR */
.aside-widgets li.tab-widget li{
    padding-bottom: 0;
}

.aside-widgets li.tab-widget li a{
    display: inline;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}



/*=====================================================================================
        PAGINATION STYLE
======================================================================================*/
.pagination{
    width: 100%;
    float: right;
    margin-top: 40px;
}

.pagination li{
    float: right;
    background: #ececec;
    height: 25px;
    text-align: center;
    margin-left: 5px;
    font: 12px Arial, sans-serif;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.pagination li a{
    color: #8f8f8f;
    padding-top: 6px;
    padding-right: 9px;
    padding-left: 9px;
    display: block;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.pagination li:hover a, .pagination li.active a{
    color: #fff;
}

.pagination li.arrow{
    background: #8f8f8f;    
}

.pagination li.arrow a{
    padding-top: 5px;
    color: #fff;
}

/* PORTFOLIO PAGE PAGINATION */
.pagination.portfolio{
    margin-bottom: 40px;
    margin-top: 0;
}



/*=====================================================================================
        FOOTER STYLES
======================================================================================*/
#footer{width:100%;margin: 0 auto;background:#f6f6f6;border-top:1px solid #e8e8e8;}
#footer section{float:none;}
#footer h6{margin-bottom: 20px;}
#footer .address p{line-height:21px;margin-bottom:6px;font-size:13px;}
#footer .address p b{text-transform:uppercase;}
#footer .address a{font-size:13px !important;}
img.right{float:right;}
#footer article.grid_3 ul li{text-transform:uppercase;font-size:15px;font-weight:600;padding:3px 0;list-style:url(../images/li.png);margin-left:20px;}
#footer article.grid_3 ul li a{color:#333;}
/* FOOTER COPYRIGHT INFO SECTION */

.container_12 .copyright{
    padding-top: 20px;
    width: 940px;
    margin: 0 10px;
}

.container_12 .copyright p{font: 12px Arial, sans-serif;color: #666;float: left; width: 900px;margin-right: 15px;padding:5px 0 0px;}

/* bottom ruler in footer - doesn't have bottom margin */
.ruler.bottom{margin-bottom: 0;}

/* FROM FOOTER TO-TOP LINK STYLE */
.container_12 .copyright .to-top{
    background: #8f8f8f;
    width: 25px;
    height: 25px;
    position: relative;
    top: -6px;
    cursor: pointer;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}



/*=====================================================================================
        ELEMENTS
======================================================================================*/

/* BIG BUTTON */

.btn-big{
    width: 143px;
    height: 45px;
    margin-top: 20px;
    float: right;
    box-shadow: 0 1px 2px #ccc;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

.note .btn-big{}

.btn-big span{
    font: bold 14px 'Droid Sans', sans-serif;
    color: #fff;
    padding: 15px;
    display: block;
    text-align: center;
}


/* MEDIUM BUTTON STYLE */
.btn-medium{
    width: 100px;
    height: 30px;
    float: right;
    margin-top: 20px;

    box-shadow: 0 1px 2px #ccc;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

.btn-medium span{
    font: bold 12px 'Droid Sans', sans-serif;
    color: #fff;
    padding: 9px 18px;
    display: block;
    text-align: center;
}


/* SMALL BUTTON STYLE */
.btn-small{
    width: 70px;
    height: 26px;
    margin-top: 20px;
    float: right;
    box-shadow: 0 1px 2px #ccc;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

.btn-small span{
    font: bold 12px 'Droid Sans', sans-serif;
    color: #fff;
    padding: 7px;
    display: block;
    text-align: center;
}

/* CLASS PREVIEW FOR STYLING BUTTONS JUST FOR TEMPLATE PREVIEW PURPOSES */
.preview{
    float: left;
    margin-top: 0;
    margin-bottom: 10px;
}



/* CODE STYLING */
code{
    float: left;
    width: 100%;
    background: #f6f6f6;
    padding: 5px 10px;
    margin-bottom: 20px;
}



/* DROPCAPS STYLES */
.dropcap1{
    color: #6f6f6f;
    float: left;
    margin-right: 10px;
    font: 67px 'Droid Sans',sans-serif;
    line-height: 59px;
}

.dropcap2, .dropcap3{
    color: #fff;
    background: #6f6f6f;
    float: left;
    margin-right: 10px;
    font: bold 35px 'Droid Sans',sans-serif;
    line-height: 35px;
    padding: 8px;
    position: relative;
    top: 3px;
}

.dropcap3{
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font: bold 32px 'Droid Sans',sans-serif;
    line-height: 30px;
    padding: 11px;
    text-align: center;
}




/* HORIZONTAL RULER STYLE */
.grid_1 .ruler, 
.grid_2 .ruler, 
.grid_3 .ruler, 
.grid_4 .ruler,
.grid_5 .ruler,
.grid_6 .ruler,
.grid_7 .ruler,
.grid_8 .ruler,
.grid_9 .ruler,
.grid_10 .ruler,
.grid_11 .ruler,
.grid_12 .ruler{
    width:100% !important;
    background: #ececec;
    height: 1px;
    float: left;
    margin: 0;
}

.ruler{
    width: 940px;
    background: #ececec;
    margin-bottom: 40px;
    margin-right: 10px;
    margin-left: 10px;
    height: 1px;
    float: left;
}



/* INFORMATION BOXES */
/*INFO BOX STYLE */
.infobox{
    background: #e0f2ff;
    border: 1px solid #c1def2;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.infobox p{
    background: url('../img/info-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #61adb0;
    text-shadow: 0 1px 0 #fff;
}


/* WARNING BOX STYLE */
.warning-box{
    background: #f3efd3;
    border: 1px solid #dedabd;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.warning-box p{
    background: url('../img/warning-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 27px;
    color: #a19c7a;
    text-shadow: 0 1px 0 #fff;
}


/* SHOP BOX STYLE */
.shop-box{
    background: #b4dafb;
    border: 1px solid #9fc7eb;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.shop-box p{
    background: url('../img/shop-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 27px;
    color: #fff;
    text-shadow: 0 1px 0 #a3c2fc;
}


/* NOTE BOX STYLE */
.note-box{
    background: #f8f6bc;
    border: 1px solid #e7e48b;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.note-box p{
    background: url('../img/note-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #989426;
    text-shadow: 0 1px 0 #fff;
}


/* SUCCESS BOX STYLE */
.success-box{
    background: #ebfdd7;
    border: 1px solid #cef4a4;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.success-box p{
    background: url('../img/success-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #7eb244;
    text-shadow: 0 1px 0 #fff;
}


/* ERROR BOX STYLE */
.error-box{
    background: #fadddd;
    border: 1px solid #fcc1c1;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.error-box p{
    background: url('../img/error-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #d86d6d;
    text-shadow: 0 1px 0 #fff;
}



/* TABS STYLES */
.tabs{width: 100%;overflow: hidden;float: left;}
.tabs li{background: #f8f8f8;float: left;border-top: 1px solid #ececec;border-right: 1px solid #ececec;border-bottom: 1px solid #ececec;overflow: hidden;
position: relative;padding: 0;line-height: 32px;}
.tabs_new li a{padding:0 !important;}
.tabs_new .btn-big{margin-top:0 !important;}
.tabs li:first-of-type{border-left: 1px solid #ececec;}
.tabs li a{color: #8f8f8f;padding: 0px 16px;text-shadow: 0 1px 0 #ffffff;font-size:14px;font-weight:600;}
.tabs li.active{border-bottom: 3px #fff;background: #fff;}
.tabs li.active a{line-height: 31px;}
.tab-content-wrap{
    border: 1px solid #ececec;    
    margin-top: -1px;
    overflow: hidden;
    width: 100%;
    float: left;
}

.tab-content{
    padding: 15px;
    background: #fff;
}



/* COLORED AND GREY LISTS STYLES */
.colored-list, .grey-list{
    width: 100%;
    float: left;
}

.colored-list li, .grey-list li{
    padding-bottom: 5px;
    padding-top: 5px;
    font: 12px 'Droid Sans', sans-serif;
    line-height: 20px;
    color: #8f8f8f;
    border-bottom: 1px dotted #eee;
}

.border-list li{
    border-bottom: 1px dotted #eee;
    background: url('../img/aside.png') no-repeat 0 12px;
}

.border-list li:first-of-type{
    background: url('../img/aside.png') no-repeat 0 7px;
}

.colored-list li:first-of-type, .grey-list li:first-of-type{
    padding-top: 0;
}

.colored-list li:last-of-type, .grey-list li:last-of-type{
    border-bottom: none;
}

.colored-list li span, .grey-list li span{
    padding-left: 18px;
}



/* LISTS WITH GREY ICONS */

/* CHECKLIST */
.list-check.grey{
    background: url('../img/check-mark-grey.png') 0 6px no-repeat;
}

/* ARROW */
.list-arrow.grey{
    background: url('../img/arrow-mark-grey.png') 0 10px no-repeat;
}

/* ERROR */
.list-error.grey{
    background: url('../img/error-mark-grey.png') 0 10px no-repeat;
}

/* SQUARE */
.list-square.grey{
    background: url('../img/square-mark-grey.png') 0 11px no-repeat;
}

/* STAR */
.list-star.grey{
    background: url('../img/star-mark-grey.png') 0 9px no-repeat;
}

/* THUMBDOWN */
.list-thumbdown.grey{
    background: url('../img/thumbdown-mark-grey.png') 0 8px no-repeat;
}

/* THUMBUP */
.list-thumbup.grey{
    background: url('../img/thumbup-mark-grey.png') 0 7px no-repeat;
}



/*=====================================================================================
        MEDIA 
======================================================================================*/
/* TWEETER WIDGET */
.tweets-list-container{
    width: 100%;
    overflow: hidden;
    position: relative;
}

.tweet-list{
    position: absolute;
    list-style-type: none;
}

.tweet-list li{
    padding-bottom: 10px;
}


/* FLICKR FEED WIDGET */
.social-feed{
    width: 100%;
    float: left;
}
.social-feed li{
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    margin-bottom: 5px; 
    opacity: 0.5;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.social-feed li:hover{
    opacity: 1;
}

.social-feed li:nth-child(5n){
    margin-right: 0;
}

.social-feed li a img{
    width: 40px;
    height: 40px;
}

/* VIDEO CONTAINER FOR VIMEO, YOUTUBE */
.video-container{
    overflow: hidden;
    float: left;
}


/*=====================================================================================
        COLUMNS - 960 GS ILLUSTRATION
======================================================================================*/
p.big{
    font-size: 14px;
}

.note.column-illustration{
    background: #f6f6f6 !important;
    margin-bottom: 40px !important;
}

.grid_12.column-illustration{
    margin-bottom: 20px;
}

.grid_12.column-illustration.last{
    background: #f6f6f6;
    margin-bottom: 40px  !important;
    cursor: pointer;
}

.column-illustration .grid_1, 
.column-illustration .grid_3, 
.column-illustration .grid_4, 
.column-illustration .grid_6, 
.column-illustration .grid_8, 
.column-illustration .grid_12{
    background: #f6f6f6;
    margin-bottom: 0;
    cursor: pointer;
}

.column-illustration .grid_1 span, 
.column-illustration .grid_3 span, 
.column-illustration .grid_4 span, 
.column-illustration .grid_6 span, 
.column-illustration .grid_8 span, 
.column-illustration .grid_12 span, 
.grid_12.column-illustration.last span{
    text-align: center;
    display: block;
    padding: 5px 0;
}

.column-illustration .grid_1 .hover, 
.column-illustration .grid_3 .hover, 
.column-illustration .grid_4 .hover, 
.column-illustration .grid_6 .hover, 
.column-illustration .grid_8 .hover, 
.column-illustration .grid_12 .hover, 
.grid_12.column-illustration.last .hover{
    display: none;


}
.column-illustration .grid_1:hover .normal, 
.column-illustration .grid_3:hover .normal, 
.column-illustration .grid_4:hover .normal, 
.column-illustration .grid_6:hover .normal, 
.column-illustration .grid_8:hover .normal, 
.column-illustration .grid_12:hover .normal, 
.grid_12.column-illustration.last:hover .normal{
    display: none;
}

.column-illustration .grid_1:hover .hover, 
.column-illustration .grid_3:hover .hover, 
.column-illustration .grid_4:hover .hover, 
.column-illustration .grid_6:hover .hover, 
.column-illustration .grid_8:hover .hover, 
.column-illustration .grid_12:hover .hover, 
.grid_12.column-illustration.last:hover .hover{
    display: block;
    color: #fff;
}


/*=====================================================================================
        MEDIA QUERIES
======================================================================================*/
/* DEVICES BETWEEN 768PX AND 959px */
@media only screen and (min-width: 768px) and (max-width: 959px){
    #page-wrap, #page-title{
        width: 748px !important;
    }

    #header,
    #nav-container,
    #content-wrapper, 
    .container_12 
   {
        width: 708px !important;
    }
  #footer{
        width: 100% !important;
    }
    .ruler{
        width: 688px !important;
    }

    .social{
        width: 431px;
    }

    /* NAVIGATION */
    #nav{
        width: 473px;
    }

    #nav li{
        padding: 18px 15px;
    }

    img{
        max-width: 100% !important;
    }

    /* GRID SYSTEM */
    .grid_1{
        width: 39px !important;
    }
    .grid_2{
        width: 98px !important;
    }
    .grid_3{
        width: 157px !important;
    }
    .grid_4{
        width: 216px !important;       
    }
    .grid_5{
        width: 275px !important;
    }
    .grid_6{
        width: 334px !important;
    }
    .grid_7{
        width: 393px !important;
    }
    .grid_8{
        width: 452px !important;
    }
    .grid_9{
        width: 511px !important;
    }
    .grid_10{
        width: 570px !important;
    }
    .grid_11{
        width: 629px !important;
    }
    .grid_12{
        width: 688px !important;
    }
    
    /* PORTFOLIO CAROUSEL */
    .carousel-li > li{
        width: 216px !important;
    }
    

    /* NOTE */
    .grid_12.note .text{
        padding: 25px;
        min-width: 640px !important; 
    }

    .grid_12.note .btn-big{
        display: none;
    }

    /* ABOUT US PAGE - TEAM SOCIAL */

    .team .social{
        width: auto;
    }

    /* PORTFOLIO SHOWCASE */
    .showcase-wrapper{
        width: 688px;
    }

    .showcase-wrapper .shadow-top{
        width: 748px;
    }
    .showcase{
        width: 688px;
    }

    .showcase-item img{
        max-width: 420px !important;
    }

    .showcase-item .description{
        width: 238px;
    }

    /*BLOG PAGE */
    .grid_9.blog{
        width: 491px !important;
    }

    .grid_9.blog .post,
    .grid_9.blog .post-comments,
    .grid_9.blog .blog-post .comment-form{
        width: 411px;
    }

    .child{
        margin-left: 50px;
    }

    .comment-form .name, 
    .comment-form .email{
        width: 200px;
    }

    .comment-form .comment-text{
        width: 389px;
    }

    /* ELEMENTS PAGE */
    .tabs li:last-of-type{
        display: none;
    }

    .infobox p,
    .error-box p,
    .success-box p,
    .note-box p,
    .warning-box p,
    .shop-box p{
        margin: 5px;
    }

    .video-container{
        width: 100%;
    }

    .video-container img{
        width: 100%;
        height: auto;
    }
    
    .video-container .video-js{
        width: 100% !important;
        height: 122px !important;
    }
    
    
    /* CONTACT FORM */
    .contact-form .name, 
    .contact-form .email{
        width: 200px;
    }

    .contact-form .contact-message{
        width: 310px;
    }

    .map-short{
        width: 708px;
    }

    /*FOOTER COPYRIGHT */
    .copyright{
        width: 688px !important;
    }

    .container_12 .copyright p{
        width: 648px; 
    }
    
    /* SOCIAL FEED */
    .social-feed li:nth-child(3n){
        margin-right: 0;
    }
    .social-feed li:nth-child(5n){
        margin-right: 5px !important;
    }
}

/* ALL MOBILE SIZES */
@media only screen and (min-width: 480px) and (max-width: 767px){
    #page-wrap, #page-title{
        width: 440px !important;
    }

    #header,
    #nav-container,
    #content-wrapper, 
    .container_12 
    {
        width: 380px !important;
    }
	 #footer{
        width: 100% !important;
    }

    #logo{
        width: 100%;
        margin-right: 0;
    }

    .social{
        width: 100% !important;
    }
    .social li{
        float: left;
    }

    .team .social{
        width: 100% !important;
    }

    .copyright{
        width: 360px !important;
    }

    .ruler{
        width: 360px !important;
    }

    #nav-container #nav{
        display: none;
    }
    #nav-container select{
        display: block;
        width: 260px;
        margin-top: 12px;
        margin-right: 20px;
        margin-bottom: 12px;
        height: 28px;
        background: #f6f6f6;
        border: none;
        color: #8f8f8f;
        font: italic 12px Arial, sans-serif;
        float: left;
    }

    #nav-container select{
        padding: 5px 7px;;
    }

    #nav-container #search{
        width: 100px !important;
        float: left;
    }

    #nav-container #search-bkg{
        width: 45px;
        padding-left: 10px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12{
        width: 380px !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* PORTFOLIO CAROUSEL */
    .carousel-li > li{
        width: 180px !important;
    }
    
    .caroufredsel_wrapper{
        height: 132px !important; 
    }
    
    .section-title{
        margin-left: 0;
        margin-right: 0;
    }

    .container_12 .copyright p{
        width: 100%; 
        float: left;
        margin-bottom: 10px;

    }

    .container_12 .copyright .to-top-link{
        width: 100%;
        float: left;    
    }

    .container_12 .copyright .to-top-link img{
        top: 0;
        float: right;
    }

    .grid_12.note .text{
        padding: 25px;
        min-width: 310px !important;
    }

    .grid_12.note .btn-big{
        display: none;
    }

    img{
        max-width: 100% !important;
    }

    .showcase-wrapper{
        width: 100%;
        padding: 0;
    }

    .showcase-wrapper .shadow-top{
        width: 440px;
        left: 0;
    }
    .showcase{
        width: 380px;
        margin: 0 30px;
    }

    .showcase-wrapper.single .showcase{
        width: 380px;
        margin: 0;
    }

    .showcase-wrapper.single{
        margin: 0 auto;
    }

    .showcase-item img{
        max-width: 100% !important;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .showcase-item .description{
        width: 100%;
    }

    .grid_9.blog{
        width: 380px !important;
    }

    .grid_9.blog .post,
    .grid_9.blog .post-comments,
    .grid_9.blog .blog-post .comment-form{
        width: 300px;
    }

    figure.img-styled .img-hover{
        top: 70%;
    }
    
    .child{
        margin-left: 30px;
    }

    .comment-form .name, 
    .comment-form .email{
        width: 150px;
    }

    .comment-form .comment-text{
        width: 278px;
    }

    .infobox p,
    .error-box p,
    .success-box p,
    .note-box p,
    .warning-box p,
    .shop-box p{
        margin: 5px;
    }

    .contact-form form{
        width: 100%;
        padding: 0;
    }
    .contact-form .name, .contact-form .email{
        width: 200px;
    }
    .contact-form .contact-message{
        width: 358px;
    }

    .map-short{
        width: 380px;
    }

    #map_canvas{
        height: 300px !important;
    }

    .section-title h5{
        width: 100%;
        float: left;
    }

    #portfolio-filter{
        width: 100%;
        float: left;
        margin-left: 0;
    }

    figure.img-styled img{
        width: 100% !important;
    }
    
    .video-container{
        width: 100%;
    }

    .video-container img{
        width: 100%;
        height: auto;
    }
    
    .video-container .video-js{
        width: 100% !important;
    }
    
    /* social feed */
    .social-feed li:nth-child(5n){
        margin-right: 5px !important;
    }
    
    .social-feed li:nth-child(8n){
        margin-right: 0;
    }
}

@media only screen and (min-width: 240px) and (max-width: 479px){
    #page-wrap, #page-title{
        width: 320px !important;
    }

    #header,
    #nav-container,
    #content-wrapper, 
    .container_12{
        width: 260px !important;
    }
	#footer{
        width: 100% !important;
    }

    .ruler{
        width: 240px !important;
    }
    
    img{
        max-width: 100% !important;
    }
    
    .section-title h5{
        width: 100%;
        float: left;
    }
    
    #logo{
        width: 100%;
        margin-right: 0;
    }

    .social{
        width: 100% !important;
    }
    .social li{
        float: left;
    }

    /* NAVIGATION */
    #nav-container #nav{
        display: none;
    }

    #nav-container select{
        display: block;
        width: 100%;
        margin-top: 12px;
        margin-right: 20px;
        margin-bottom: 12px;
        height: 28px;
        background: #f6f6f6;
        border: none;
        color: #8f8f8f;
        font: italic 12px Arial, sans-serif;
        float: left;
    }

    #nav-container select{
        padding: 5px 7px;;
    }

    #nav-container #search{
        display: none;
    }
    
    /* ABOUT PAGE */
    .team .social{
        width: 100% !important;
    }

    .team img{
        float: none;
        margin-bottom: 20px;
    }

    
    /* NOTE */
    .grid_12.note .text{
        padding: 25px;
        min-width: 210px !important;
    }

    .grid_12.note .btn-big{
        display: none;
    }
    
    /* COLUMNS */
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12{
        width: 260px !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    
    /* PORTFOLIO CAROUSEL */
    .carousel-li > li{
        width: 260px !important;
    }
    
    .caroufredsel_wrapper{
        height: 191px !important; 
    }

    /* PORTFOLIO PAGE */
    .showcase-wrapper{
        width: 100%;
        padding: 0;
    }

    .showcase-wrapper .shadow-top{
        width: 320px;
        left: 0;
    }
    .showcase-wrapper .showcase{
        width: 260px;
        margin: 0 30px;
    }

    .showcase-wrapper.single .showcase{
        width: 260px;
        margin: 0;
    }

    .showcase-item img{
        max-width: 100% !important;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .showcase-item .description{
        width: 100%;
    }

    #portfolio-filter{
        width: 100%;
        float: left;
        margin-left: 0;
    }

    figure.img-styled img{
        width: 100% !important;
    }
    
    
    /* BLOG PAGE */
    .grid_9.blog{
        width: 260px !important;
        padding-right: 0;
    }

    .grid_9.blog .meta{
        width: 100%;
        margin-right: 0;
    }

    .grid_9.blog .post,
    .grid_9.blog .post-comments,
    .grid_9.blog .blog-post .comment-form{
        width: 260px;
        margin-left: 0;
    }
    
    figure.img-styled .img-hover{
        top: 50%;
    }

    .child{
        margin-left: 20px;
    }

    .comment-form .name, 
    .comment-form .email{
        width: 150px;
    }

    .comment-form .comment-text{
        width: 238px;
    }

    .infobox p,
    .error-box p,
    .success-box p,
    .note-box p,
    .warning-box p,
    .shop-box p{
        margin: 5px;
    }

    .video-container{
        width: 100%;
    }

    .video-container img{
        width: 100%;
        height: auto;
    }
    
    .video-container .video-js{
        width: 100% !important;
    }
    
    /* social feed */
    .social-feed li{
        margin-right: 5px !important;
    }
    
    .social-feed li:nth-child(5n){
        margin-right: 0 !important;
    }
    
    /* FOOTER */
    .container_12 .copyright p{
        width: 100%; 
        float: left;
        margin-bottom: 10px;
    }
    
    .copyright{
        width: 240px !important;
    }

    .container_12 .copyright .to-top-link{
        width: 100%;
        float: left;    
    }

    .container_12 .copyright .to-top-link img{
        top: 0;
        float: right;
    }
    
    .contact-form form{
        width: 260px;
        padding: 0;
    }
    .contact-form .name, .contact-form .email{
        width: 150px;
    }
    .contact-form .contact-message{
        width: 238px;
    }

    .map-short{
        width: 260px;
    }

    #map_canvas{
        height: 200px !important;
    }

}