/*
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENTS /\/\/\/\/\/\/\/\/\/\/\/\/\/\//\/\/\/\

	 1. IMPORT
	 2. HEADER
	 3. NAVIGATION
	 4. FOOTER & FOOTER WIDGETS
     5. SIDEBAR & SIDEBAR WIDGETS
     6. PORTFOLIO/PROJECTS
     7. BLOG STYLING
     8. HOME PAGE
     9. 404 PAGE
     10. ABOUT PAGE
     11. CONTACT PAGE FORM
     12. ICON LIST
     13. RECENT WORK CAROUSEL
     14. TESTIMONIALS
     15. PARALLAX
     16. Icon Service Boxes
     17. CLIENTS
     18. TYPOGRAPHY
     19. BUTTONS
     20. PRICING TABLES BOXS
     21. TABS
     22. ACCORDION & TOGGLE
     23. PROGRESS SKILL BAR
     24. PROMO BOX
     25. PAGINATION
     26. TITLE
     27. DROPCAPS
     28. HIGHLIGHT
     29. SWIPE J.S SLIDER
     30. CAROUSEL
     31. FLICKR
     32. LIST & BULLETS
     33. BUTTON UP
     34. MEDIA QUERIES
*/

/* =================================================================== */
/* Import Section
====================================================================== */


/*a {text-decoration: none ;}
a:hover{
    text-decoration: none;
	-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;
	color:#555;
}
a:focus{
    outline: none;
    text-decoration: none;
}
.not-ie a {
	-webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
	   -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		-ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
		 -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
			transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;
}*/





/* =================================================================== */
/* 2. HEADER
====================================================================== */


#header {
    background: #fff none repeat scroll 0 0;
    transition: all 0.4s ease-in-out 0s;
    width: 100%;
    z-index: 999;
}

#top-bar{background: #294b0f; color: #fff; padding: 5px 0 3px;}

.top-info ul{ list-style: none; float: right; padding:0; margin: 0;}

.top-info span { font: 13px/28px "open sans",Helvetica, Arial, sans-serif; padding-right: 15px; 
}/*padding-right: 15px;*/

.top-info span i { font-size: 13px; margin-right: 5px;} /*margin-right: 5px;*/

.top-info li{ float:left;}

.top-info li a{
    border: 1px solid #9f9f9f !important;
    border-radius: 100%;
    color: #9f9f9f;
    display: inline-block;
    font-size: 14px;
    height: 25px;
    line-height: 23px;
    margin: 0 2px;
    text-align: center;
    transition: background-color 400ms linear 0s;
    width: 25px;

}
.top-info li:hover a                {color:#fff!important;}
.top-info li:hover a.my-tweet       {background:#3ABDD1;}
.top-info li:hover a.my-facebook    {background:#648CD5;}
.top-info li:hover a.my-skype       {background:#00AFFF;}
.top-info li:hover a.my-pint        {background:#DE5656;}
.top-info li:hover a.my-rss         {background:#EF8D1F;}
.top-info li:hover a.my-google      {background:#E73904;}
.top-info li:hover a.my-whatsapp     {background:green;}
.top-info li:hover a.my-wikipedia    {background:#f6e365;}
.top-info li:hover a.my-youtube    {background:#bc0a1b;}
.top-info li:hover a.my-instagram    {background:#96660b;}
.top-info li:hover a.my-flickr    {background:#e5215d;}
.top-info li:hover a.my-linkedin    {background:#2182e5;}

/* ===================================================== */





/* -------------------------------------------------- */
/*	21. TABS                                          */


@media only screen and (max-width: 767px) {

    #info-bar {background:none; padding:0;}

    
    #top-bar{padding:5px 0;}

    .top-info ul li  { margin-top:-18px;}
    #elementId {
    display: block;
}
    #elementId {
     clear: both;
}
}


@media only screen and (min-width: 481px) and (max-width: 767px){
}

@media only screen and (max-width: 480px){

    
}