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

    Mackbeth
    v 1.0
    by ShakespeareThemes

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


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

    TABLE OF CONTENT
    
    1.) Google Fonts
    2.) General
    3.) Typography
    4.) Components
    5.) Header
    6.) Main Slider
    7.) Homepage
    8.) Page Types
    9.) Sidebar
    10.) Twitter Feed
    11.) Bottom
    12.) Footer
    13.) Responsive

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


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

    1.) GOOGLE FONTS
    Please see the documentation on how to change fonts.

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

@import url(http://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin,latin-ext);

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

    2.) GENERAL
    Some general definitions and resets.

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

body {
	margin: 0;
	font-family: "Century Gothic";
	font-size: 14px;
}

    /* ----------------------------------
        RESET
    ---------------------------------- */

    ::-moz-focus-inner { border: 0; padding: 0; }
    a { text-decoration: none;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }
    a img { border: 0; }
    button { padding: 0; border: 0; font-family: 'Sintony', Arial, sans-serif; background: transparent; cursor: pointer;
        -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; }
    h1,h2,h3,h4,h5,h6 { margin: 0; }
    iframe { border: 0; }
    img { max-width: 100%; }
    input, textarea { font-family: 'Sintony', sans-serif; outline: 0; }
    ol, ul, li { margin: 0; padding: 0; list-style-type: none; }
    p { margin: 0 0 30px 0; line-height: 1.5em; }
    var { display: none; }

    /* ----------------------------------
        UTILITY CLASSES
    ---------------------------------- */

    .centered { text-align: center; }


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

    3.) TYPOGRAPHY

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

.various-content *:first-child { margin-top: 0; }

    /* ----------------------------------
        HEADINGS
    ---------------------------------- */

    .various-content h1 { margin: 40px 0 0 0; font-size: 2.28em; font-weight: normal; }
    .various-content h2 { margin: 40px 0 0 0; font-size: 1.78em; font-weight: normal; }
    .various-content h3 { margin: 30px 0 0 0; font-size: 1.07em; font-weight: bold; }
    .various-content h4 { margin: 30px 0 0 0; font-size: 1.07em; font-weight: normal; }
    .various-content h5 { margin: 30px 0 0 0; font-size: 1em; font-weight: bold; }
    .various-content h6 { margin: 30px 0 0 0; font-size: 1em; font-weight: normal; }

    /* ----------------------------------
        PARAGRAPHS & SECTIONS
    ---------------------------------- */

    .various-content p {
	margin: 30px 0 0 0;
	line-height: 1.8em;
}
    .various-content p.lead { font-size: 1.35em; line-height: 1.6em; }
    .various-content section { margin: 60px 0 0 0; }
    .various-content section.minor { margin: 30px 0 0 0; }

    /* ----------------------------------
        LISTS
    ---------------------------------- */

    ul.default-list,
    ul.check-list { margin: 30px 0 0 0; list-style-type: none; }
    ul.default-list li,
    ul.check-list li { position: relative; margin: 10px 0 0 0; padding: 0 0 0 25px; list-style-type: none; }
    ul.default-list li:first-child,
    ul.check-list li:first-child { margin-top: 0; }
    ul.default-list li .ico,
    ul.check-list li .ico { position: absolute; left: 0; top: 4px; font-size: 10px; }

    .various-content ol { margin: 30px 0 0 0; list-style-type: decimal; }
    .various-content ol li { position: relative; margin: 10px 0 0 0; list-style-type: decimal; list-style-position: inside; }
    .various-content ol li:first-child { margin-top: 0; }

    /* ----------------------------------
        TABLE
    ---------------------------------- */

    .various-content table { width: 100%; }
    .various-content table { margin-top: 30px; border-collapse: collapse; border: 0; }
    .various-content table th { font-weight: bold; text-align: left; }
    .various-content table td,
    .various-content table th { padding: 20px 15px; vertical-align: top; border: 1px solid transparent; }


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

    4.) COMPONENTS

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

    /* ----------------------------------
        ACCORDION
    ---------------------------------- */

    .accordion { margin-top: 30px; }
    .accordion .accordion-item { margin-top: 10px; border: 1px solid transparent;
        -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
    .accordion .accordion-toggle { position: relative; margin: 0; padding: 14px 20px 14px 55px; font-size: 1.07em; cursor: pointer; }
    .accordion .accordion-toggle i { position: absolute; top: 16px; left: 22px; margin-right: 15px; font-size: 15px; }
    .accordion .accordion-content { display: none; padding: 0 20px 14px 55px; }
    .accordion .active .accordion-content { display: block; }

    /* ----------------------------------
        ALERT MESSAGES
    ---------------------------------- */

    p.alert { position: relative; margin: 30px 0 0 0; padding: 16px 20px 16px 55px; border: 1px solid transparent; }
    p.alert .ico { position: absolute; top: 16px; left: 22px; font-size: 24px; }

    /* ----------------------------------
        AUDIO PLAYER
    ---------------------------------- */

    .audio-player-inner { display: none; position: relative; height: 45px; }
    html.audio .audio-player-inner { display: block; }
    .audio-player .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 40; }
    .audio-player .ico i { position: relative; top: 13px; font-size: 18px; }
    .audio-player button { display: block; position: absolute; top: 0; left: 45px; width: 45px; height: 45px; font-size: 18px; text-align: center; }
    .audio-player button i {
        -webkit-transition: color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out; -ms-transition: color 300ms ease-in-out; -o-transition: color 300ms ease-in-out; transition: color 300ms ease-in-out; }
    .audio-player .icon-play { display: none; }
    .audio-player.paused .icon-pause { display: none; }
    .audio-player.paused .icon-play { display: inline; }
    .audio-player .progbar { position: relative; top: 21px; margin: 0 15px 0 95px; height: 4px; line-height: 0; font-size: 0; cursor: pointer; }
    .audio-player .progbar div { width: 0; height: 4px; line-height: 0; font-size: 0; }
    html.audio .audio-player .audio-player-oldbrowsers { display: none; }

    /* ----------------------------------
        BUTTON PAGINATION
    ---------------------------------- */

    .button-pagination { position: relative; margin-top: 60px; min-height: 40px; text-align: center; }
    .button-pagination p.status { position: absolute; left: 0; top: 7px; margin: 0; font-size: 1.1em; }
    .button-pagination a { display: inline-block; position: relative; padding: 10px 20px 9px 40px; border-radius: 7px;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    .button-pagination a .loading-anim { display: none; left: 6px; top: 3px; width: 30px; height: 30px; }
    .button-pagination a .ico { position: absolute; top: 12px; left: 15px; font-size: 15px; }

    /* LOADING */

    .button-pagination a.loading .loading-anim { display: block; }
    .button-pagination a.loading .ico { display: none; }

    /* ----------------------------------
        BUTTONS
    ---------------------------------- */

    .button {
	display: inline-block;
	padding: 14px 22px 13px 22px;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 7px;
}
    .button i { position: relative; margin-right: 12px; }
    .button.wide { padding: 14px 45px 13px 45px; }

    /* ----------------------------------
        CTA MESSAGE
    ---------------------------------- */

    .cta-message { margin-top: 30px; padding: 30px; border-radius: 7px; }
    .cta-message h2 { margin: 0; font-weight: normal; font-size: 1.6em; }
    .cta-message p { margin: 5px 0 0 0; font-size: 1.1em; }
    .cta-message .button { float: right; text-align: center; }

    /* ----------------------------------
        LIST SLIDER
    ---------------------------------- */

    .list-slider { position: relative; }
    .list-slider-items {
	height: auto;
	-webkit-transition: height 300ms ease-in-out;
	-moz-transition: height 300ms ease-in-out;
	-ms-transition: height 300ms ease-in-out;
	-o-transition: height 300ms ease-in-out;
	transition: height 300ms ease-in-out;
}
    .list-slider-items > ul { position: relative; top: 0; left: 0;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .list-slider-items > ul > li { float: left; }
    .list-slider-items > ul > li > * { float: none; }

    /* NAV */

    .list-slider-nav { position: absolute; right: 0; top: -100px; }
    .list-slider-nav button { display: block; position: relative; float: left; width: 28px; height: 28px; }
    .list-slider-nav button.prev { margin-right: 5px; }
    .list-slider-nav button i { display: block; position: absolute; top: -1px; left: -1px; width: 30px; height: 30px;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .list-slider-nav button.prev:active i { left: -5px; }
    .list-slider-nav button.next:active i { left: 3px; }
    .list-slider-nav button.disabled { cursor: default; }
    .list-slider-nav button.disabled:active i { left: -1px; }

    /* ----------------------------------
        LOADING ANIMATION
    ---------------------------------- */

    @keyframes loading { from { transform: rotate(0); } to { transform: rotate(359deg); } }
    @-moz-keyframes loading { from { -moz-transform: rotate(0); } to { -moz-transform: rotate(359deg); } }
    @-webkit-keyframes loading { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(359deg); } }
    @-o-keyframes loading { from { -o-transform: rotate(0); } to { -o-transform: rotate(359deg); } }

    .loading-anim { display: none; position: absolute; width: 100%; }
    .loading-anim span { display: block; position: relative; margin: 0 auto 0 auto; width: 50px; height: 50px; border-radius: 50%; }
    .loading-anim i { display: block; position: relative; top: 10px; left: 10px; width: 30px; height: 30px;
        animation-name: loading; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;
        -moz-animation-name: loading; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite;
        -webkit-animation-name: loading; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
        -o-animation-name: loading; -o-animation-duration: 1s; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite;
    }
    
    /* SMALL */

    .loading-anim.small span { width: 30px; height: 30px; }
    .loading-anim.small span i { left: 0; top: 0; }

    /* ----------------------------------
        PAGINATION
    ---------------------------------- */

    .pagination { margin-top: 90px; text-align: right; }
    .pagination li { display: inline-block; margin: 10px 0 0 0; font-size: 1.07em; }
    .pagination li a { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-weight: bold; border-radius: 7px; }

    /* ----------------------------------
        PROGRESS BARS
    ---------------------------------- */

    .progressbar { font-weight: bold; text-transform: uppercase; }
    .progressbar .inner { position: relative; padding: 18px 20px 17px 20px; width: 10px; white-space: nowrap;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        -webkit-transition: width 600ms ease-in-out; -moz-transition: width 600ms ease-in-out; -ms-transition: width 600ms ease-in-out; -o-transition: width 600ms ease-in-out; transition: width 600ms ease-in-out; }
    .progressbar .inner .percentage { position: absolute; top: 16px; right: 20px; }

    /* ----------------------------------
        PROJECT PREVIEW
    ---------------------------------- */

    .project-preview { border-bottom: 0px solid transparent; }
    .project-preview .thumb {
	position: relative;
	padding-bottom: 70%;
	width: 100%;
	height: 0;
	overflow: hidden;
}
    .project-preview .thumb .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    .project-preview .thumb .overlay-inner { position: absolute; width: 100%; height: 40px; top: 50%; text-align: center; }
    .project-preview .thumb .overlay a { position: relative; top: 200px; display: inline-block; margin: 0 2px 0 2px; width: 40px; height: 40px; text-align: center; border-radius: 7px; opacity: 0;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    .project-preview .thumb .overlay a i { position: relative; top: 11px; font-size: 18px; }
    .project-preview .thumb.hover .overlay { opacity: 1; }
    .project-preview .thumb.hover .overlay a { top: -20px; opacity: 1; }
    .project-preview .thumb.hover .overlay a:hover { top: -16px; }
    .project-preview .thumb.hover .overlay a:active { top: -13px; }
    .project-preview .thumb.hover .overlay a.link { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
    .project-preview .thumb img {
	display: block;
}
    .project-preview .title { position: relative; padding: 24px 0 20px 0; }
    .project-preview h3 {
	margin: 0;
	padding-right: 90px;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: lighter;
}
    .project-preview .date { position: absolute; top: 28px; right: 0; margin: 0; font-size: 0.8em; }

    /* ----------------------------------
        SECTION TITLE
    ---------------------------------- */

    h2.section-title { font-weight: normal; font-size: 2.4em; }
    h2.section-title strong { display: block; font-weight: bold; font-size: 0.45em; }

    /* ----------------------------------
        TABS
    ---------------------------------- */

    .tabs { position: relative; margin-top: 30px; z-index: 30; }
    .tabs .tab { display: block; position: relative; float: left; padding: 22px 25px 22px 55px; font-size: 1.07em; font-weight: bold; border: 1px solid transparent; border-left-width: 0; cursor: pointer; }
    .tabs .tab:first-child { border-left-width: 1px; }
    .tabs .tab i { position: absolute; top: 24px; left: 25px; font-size: 15px; }
    .tab-content { position: relative; top: -1px; z-index: 20; }
    .tab-content .item { display: none; padding: 20px; border: 1px solid transparent; }
    .tab-content .item.active { display: block; }


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

    5.) HEADER

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

header { position: relative; z-index: 50; }

    /* ----------------------------------
        TOPBAR
    ---------------------------------- */

    #topbar { padding: 15px 0 15px 0; }
    .topbar-inner { position: relative; height: 42px; }

    /* SOCIAL ICONS */

    #topbar .social-icons ul { float: left; position: relative; z-index: 30; }
    #topbar .social-icons li { display: block; float: left; margin-right: 10px; }
    #topbar .social-icons li a { display: block; width: 42px; height: 42px; }
    #topbar .social-icons li a i { display: block; position: relative; top: 6px; left: 6px; width: 30px; height: 30px; opacity: 1;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    #topbar .social-icons li a:active i { opacity: .7; }

    /* SEARCH */

    #topbar .search-form { position: absolute; top: 0; right: 0; width: 100%; height: 42px; z-index: 20; }
    #topbar .search-form .input { display: none; position: absolute; left: 0; width: 100%; height: 42px; z-index: 20; }
    #topbar .search-form .input button.close { display: block; position: absolute; top: 0; left: 0; width: 42px; height: 42px; font-size: 18px; z-index: 30; }
    #topbar .search-form .input input { position: absolute; padding: 9px 0 0 70px; width: 70%; line-height: 1px; font: 19px 'Sintony', sans-serif; background: none; border: 0; z-index: 20; }
    #topbar .search-form button.submit { position: absolute; top: 0; right: 0; width: 42px; height: 42px; font-size: 18px; z-index: 30; }
    #topbar .search-form button i { opacity: 1;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    #topbar .search-form button:active i { opacity: .7; }
    #topbar .search-form.active { z-index: 30; }

    /* RESPONSIVE CONTROLS */

    .responsive-controls { display: none; }
    .responsive-controls button { display: block; position: relative; width: 60px; height: 60px; z-index: 40; }
    .responsive-controls button i { font-size: 24px; }

    /* ----------------------------------
        NAVBAR
    ---------------------------------- */

    .navbar-inner { position: relative; }

    /* BRANDING */

    #branding {
	display: block;
	position: absolute;
	top: 25px;
	left: 0;
	width: 295px;
}
    #branding img { display: block;  }

    /* MAIN NAV */

    nav.main { position: relative; float: right; }
    nav.main > button { display: none; float: right; width: 60px; height: 60px; }
    nav.main > button i { font-size: 24px; }
    nav.main .indicator {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 6px;
	line-height: 0;
	font-size: 0;
	background:#FF3D00;
	z-index: 20;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	background-color: #FF3D00;
}
    /* lvl 1 */
    nav.main > ul { position: relative; z-index: 30; }
    nav.main > ul > li { float: left; position: relative; margin-top: 60px; }
    nav.main > ul > li > a {
	display: block;
	position: relative;
	z-index: 30;
	-webkit-transition: border-color 300ms ease-in-out;
	-moz-transition: border-color 300ms ease-in-out;
	-ms-transition: border-color 300ms ease-in-out;
	-o-transition: border-color 300ms ease-in-out;
	transition: border-color 300ms ease-in-out;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 46px;
	padding-left: 15px;
}
    nav.main > ul > li:last-child a,
    nav.main > ul > li.last a { padding-right: 0; }
    nav.main > ul > li > a strong {
	display: block;
	font-size: 13px;
	font-style: normal;
	font-weight: lighter;
}
    nav.main > ul > li > .arrow { display: block; position: absolute; left: -0; top: 4px; width: 14px; height: 14px; z-index: 20; }
    nav.main > ul > li > .arrow i { display: block; width: 14px; height: 14px; }
    /* lvl 2 */
    nav.main > ul > li > ul { display: none; position: absolute; left: 27px; }
    nav.main > ul > li > ul li { border-top: 1px solid transparent;}
    nav.main > ul > li > ul li:first-child { border: 0; }
    nav.main > ul > li > ul a { display: block; padding: 15px 17px; white-space: nowrap; }


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

    6.) MAIN SLIDER

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

#slider { position: relative; }
#slider .slider-inner { position: relative; }
#slider .carousel { margin: 0; }

    /* ----------------------------------
        ITEMS
    ---------------------------------- */

    #slider .carousel-inner .item { height: 650px; background-position: center; background-size: cover; background-repeat: no-repeat; }
    #slider .carousel-inner .item-inner { display: table; width: 100%; height: 100%; }
    #slider .carousel-inner .item-content {
	display: table-caption;
	vertical-align: middle;
	padding-top: 0;
	padding-right: 30px;
	padding-bottom: 0;
	padding-left: 30px;
	margin-top: 500px;
}
    #slider .carousel-inner .item h2 { margin: 40px 0; line-height: 1.5em; font-size: 3.2em; font-weight: normal; }
    #slider .carousel-inner .item p { margin: 40px 0 0 0; font-size: 1.4em; }
    #slider .carousel-inner .item p:first-child { margin-top: 0; }
    #slider .carousel-inner .item .button { margin: 10px 10px; line-height: normal; font-size: 0.75em; font-weight: normal; text-decoration: none; }

    /* ----------------------------------
        CONTROLS
    ---------------------------------- */

    #slider .nav { position: absolute; top: 50%; }
    #slider .nav button { display: block; position: relative; top: -23px; width: 46px; height: 46px; border-radius: 7px; }
    #slider .nav button i { display: block; position: absolute; top: 8px; left: 8px; width: 30px; height: 30px;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }    #slider .nav.prev { left: 20px; }
    #slider .nav.prev button:active i { left: 5px; }
    #slider .nav.next { right: 20px; }
    #slider .nav.next button:active i { left: 11px; }
    #slider button.pause { display: block; position: absolute; bottom: 25px; right: 20px; width: 46px; height: 46px; border-radius: 7px; }

    /* ----------------------------------
        INDICATOR
    ---------------------------------- */

    #slider .indicator { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; font-size: 0; line-height: 0; }
    #slider .indicator .progressbar { height: 6px; width: 0; }

    /* ----------------------------------
        LOADING
    ---------------------------------- */

    #slider .loading-anim { display: block; position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; z-index: 50; }


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

    7.) HOMEPAGE

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

    /* ----------------------------------
        WELCOME
    ---------------------------------- */

    #welcome .welcome-inner { padding: 80px 20px; }
    #welcome.big .welcome-inner { padding: 150px 20px; }
    #welcome h1 { margin: 0; font-size: 1.85em; font-weight: normal; line-height: 1.5em; }
    #welcome a { text-decoration: underline; }

    /* ----------------------------------
        HOME SERVICES
    ---------------------------------- */

    .home-services-inner { padding: 30px 0 40px 0; }
    #home-services .service { padding: 30px 20px 25px 20px; text-align: center; border-radius: 7px;
        -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; }
    #home-services .ico { display: block; margin: 0 auto 20px auto; width: 62px; height: 62px; border-radius: 50%; }
    #home-services .ico i { position: relative; top: 17px; font-size: 28px; }
    #home-services h2 { margin: 24px 0 0 0; font-weight: normal; font-size: 1.5em; }
    #home-services p { margin: 24px 0 0 0; line-height: 1.6em; }
    #home-services .service *:first-child {
	margin-top: 0;
	color: #FF3D00;
}

    /* ----------------------------------
        HOMEPAGE CORE
    ---------------------------------- */

    #homepage-core { padding: 80px 0 100px 0; }
    #homepage-core .cta-message { margin-top: 0; }
    #homepage-core section { margin-top: 80px; }
    #homepage-core section:first-child { margin-top: 0; }

    /* ----------------------------------
        BOTTOM BANNERS
    ---------------------------------- */

    .home-page .bottom-banners { margin-top: 80px; padding-top: 55px; border-top: 1px solid transparent; }
    .home-page .bottom-banners a { opacity: .3;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    .home-page .bottom-banners a:hover { opacity: .5; }
    .home-page .bottom-banners a:active { opacity: .3; }

    /* ----------------------------------
        RECENT ARTICLES
    ---------------------------------- */

    .home-page .recent-articles h2.section-title { padding-right: 150px; }
    .home-page .recent-articles .articles { margin-top: 80px; }
    .home-page .recent-articles .article .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 40; }
    .home-page .recent-articles .article .ico i { position: relative; top: 13px; font-size: 18px; }
    .home-page .recent-articles .article .title { position: relative; margin-bottom: 25px; padding: 0 0 20px 0; border-bottom: 1px solid transparent; }
    .home-page .recent-articles .article h3 { margin: 0; padding-right: 90px; font-size: 1.2em; text-transform: uppercase; }
    .home-page .recent-articles .article .date { position: absolute; top: 4px; right: 0; margin: 0; font-size: 0.8em; }
    .home-page .recent-articles .article .text p { line-height: 1.7em; font-size: 0.95em; }

    /* IMAGE & VIDEO ARTICLE */

    .home-page .recent-articles .article.image .thumb,
    .home-page .recent-articles .article.video .thumb { position: relative; margin-bottom: 24px; padding-bottom: 70%; width: 100%; height: 0; background-position: center; overflow: hidden; }
    .home-page .recent-articles .article.video .thumb a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 30; }

    /* AUDIO ARTICLE */

    .home-page .recent-articles .article.audio .audio-player { margin-bottom: 24px; }

    /* ----------------------------------
        RECENT PROJECTS
    ---------------------------------- */

    .home-page .recent-projects .projects { margin-top: 60px; }
    .home-page .recent-projects h2.section-title { padding-right: 150px; }


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

    8.) PAGE TYPES

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

    /* ----------------------------------
        PAGE TITLE
    ---------------------------------- */

    #page-title {
	padding-top: 13px;
	padding-right: 20px;
	padding-bottom: 13px;
	padding-left: 20px;
}
    #page-title h1 { margin: 0; font-weight: normal; font-size: 2.5em; }
    #page-title h1 span { position: relative; left: 20px; top: -4px; font-size: 0.45em; }

    /* ----------------------------------
        PAGE CORE
    ---------------------------------- */

    #page-core { padding: 80px 0 100px 0; }

    /* ----------------------------------
        ABOUT PAGE
    ---------------------------------- */

    .about-page section { margin-top: 80px; }
    .about-page section:first-child,
    .about-page section > *:first-child { margin-top: 0; }

    /* ABOUT INTRO */

    .about-page .about-intro { font-size: 1.1em; }
    .about-page .about-intro img { border-radius: 7px; }

    /* ABOUT TEAM */

    .about-page .team-member { margin-top: 60px; border: 1px solid transparent; border-radius: 12px; }
    .about-page .team-member .thumb { position: relative; padding-bottom: 70%; width: 100%; height: 0; overflow: hidden; border-radius: 12px 12px 0 0; }
    .about-page .team-member .thumb .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    .about-page .team-member .thumb .overlay-inner { position: absolute; width: 100%; height: 40px; top: 50%; text-align: center; }
    .about-page .team-member .thumb .overlay a { position: relative; top: 200px; display: inline-block; margin: 0 2px 0 2px; width: 40px; height: 40px; text-align: center; border-radius: 7px; opacity: 0;
        -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    .about-page .team-member .thumb .overlay a i { display: block; position: relative; top: 5px; left: 5px; width: 30px; height: 30px; }
    .about-page .team-member .thumb.hover .overlay { opacity: 1; }
    .about-page .team-member .thumb.hover .overlay a { top: -20px; opacity: 1; }
    .about-page .team-member .thumb.hover .overlay a:hover { top: -16px; }
    .about-page .team-member .thumb.hover .overlay a:active { top: -13px; }
    .about-page .team-member .thumb.hover .overlay a.ico2 { -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
    .about-page .team-member .thumb.hover .overlay a.ico3 { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
    .about-page .team-member .thumb.hover .overlay a.ico4 { -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; }
    .about-page .team-member .thumb.hovered .overlay a.ico2,
    .about-page .team-member .thumb.hovered .overlay a.ico3,
    .about-page .team-member .thumb.hovered .overlay a.ico4 { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; }
    .about-page .team-member .thumb img { display: block; }
    .about-page .team-member .description { padding: 35px 40px 40px 40px; }
    .about-page .team-member h3 { margin: 0 0 5px 0; font-size: 1.7em; font-weight: normal; }
    .about-page .team-member h4 { margin: 0; font-size: 1.15em; font-weight: normal; }
    .about-page .team-member .various-content { padding-top: 30px; }
    .about-page .team-member .various-content > * { margin: 0 0 30px 0; }
    .about-page .team-member .various-content > *:last-child { margin: 0; }
    .about-page .team-member .various-content p { line-height: 1.6em; }

    /* ----------------------------------
        BLOG PAGE
    ---------------------------------- */

    /* ARTICLE LIST */

    .blog-page .article-list article { margin-top: 130px; }
    .blog-page .article-list article:first-child { margin-top: 0; }

    /* ARTICLE IMAGE */

    .blog-page .article-image { position: relative; }
    .blog-page .article-image .ico { position: absolute; left: 0; bottom: 0; width: 45px; height: 45px; text-align: center; z-index: 30; }
    .blog-page .article-image .ico i { position: relative; top: 12px; font-size: 18px; }
    .blog-page .article-image .thumb { position: relative; padding-bottom: 40%; width: 100%; height: 0; overflow: hidden; }
    .blog-page .article-image .thumb img { position: absolute; top: -30%; z-index: 20; }

    /* ARTICLE TITLE */

    .blog-page .article-title { margin-top: 40px; padding-bottom: 18px; border-bottom: 1px solid transparent; }
    .blog-page .article-title:first-child { margin-top: 0; }
    .blog-page .article-title .date { margin: 0 0 5px 0; }
    .blog-page .article-title h2 { margin: 0; font-weight: normal; font-size: 2.4em; }

    /* AUDIO PLAYER */

    .blog-page .audio-player { margin-top: 35px; }

    /* ARTICLE LINK */

    .blog-page .article-link { position: relative; margin-top: 35px; width: 100%; height: 45px; overflow: hidden; }
    .blog-page .article-link .ico { display: block; position: absolute; top: 0; left: 0; width: 45px; height: 45px; text-align: center; }
    .blog-page .article-link .ico i { position: relative; top: 13px; font-size: 18px; }
    .blog-page .article-link a { display: block; padding: 14px 20px 0 65px; white-space: nowrap; }
    .blog-page .article-link a:hover { text-decoration: underline; }

    /* ARTICLE CONTENT */

    .blog-page .article-content { margin-top: 40px; padding-bottom: 40px; border-bottom: 1px solid transparent; }
    .blog-page .article-detail .article-content { padding-bottom: 0; }

    /* ARTICLE FOOTER */

    .blog-page .article-footer { position: relative; margin-top: 40px; }
    .blog-page .article-footer .button { position: absolute; top: -9px; left: 0; z-index: 30; }
    .blog-page .article-info { display: inline-block; position: relative; top: 4px; line-height: 1.8em; z-index: 20; }
    .blog-page .article-list .article-info { padding: 0 0 10px 200px; }
    .blog-page .article-info li { float: left; padding-right: 20px; }
    .blog-page .article-info li i { margin-right: 5px; font-size: 14px; }

    /* AUDIO ARTICLE */

    .blog-page article.audio .article-title { padding: 0; border: 0; }

    /* VIDEO ARTICLE */

    .blog-page article.video .article-image .thumb { background-position: center; background-repeat: no-repeat; background-size: cover; }

    /* LINK ARTICLE */

    .blog-page article.link .article-title { padding: 0; border: 0; }

    /* ARTICLE COMMENTS */

    .blog-page .article-comments { margin-top: 60px; }

    /* ----------------------------------
        CONTACT PAGE
    ---------------------------------- */

    /* CONTACT MAP */

    .contact-page .contact-map iframe { display: block; margin: 0; width: 100%; border: 0; }

    /* CONTACT FORM */

    .contact-page .contact-form { border-top: 6px solid transparent; }
    .contact-page .contact-form-inner { padding: 50px 0 80px 0; }
    .contact-page .contact-form-inner form { margin-top: 60px; }
    .contact-page .contact-form p { position: relative; margin: 0 0 25px 0; }
    .contact-page .contact-form p .error-ico { position: absolute; bottom: 12px; right: 10px; font-size: 24px; }
    .contact-page .contact-form p:last-child { margin: 0; }
    .contact-page .contact-form p.alert { margin: 30px 0; }
    .contact-page .contact-form label { display: block; margin: 0 0 16px 0; font-size: 14px; }
    .contact-page .contact-form input,
    .contact-page .contact-form textarea { display: block; margin: 0; padding: 4px 20px; width: 70%; font-size: 16px; resize: none; border-radius: 7px; border: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    .contact-page .contact-form textarea { height: 160px; }
    .contact-page .contact-form button.submit { margin: 15px 0 0 0; padding: 15px 22px 14px 22px; font-size: 14px; font-weight: bold; text-transform: uppercase; border-radius: 7px; }

    /* CONTACT BOTTOM */

    .contact-page .contact-info { margin-top: 40px; font-size: 1.05em; }
    .contact-page .contact-info li { position: relative; padding: 3px 0 3px 115px; line-height: 1.8em; }
    .contact-page .contact-info li .ico { position: absolute; top: 7px; left: 0; font-size: 18px; }
    .contact-page .contact-info li h3 { margin: 0; position: absolute; top: 3px; left: 32px; width: 75px; font-size: 1em; }
    .contact-page .contact-info.hours li { padding-left: 150px; }
    .contact-page .contact-info.hours h3 { width: 100px; }

    .contact-page .contact-description p { line-height: 1.6em; }
    .contact-page .contact-description p.lead { font-size: 1.2em; }

    /* ----------------------------------
        PORTFOLIO PAGE
    ---------------------------------- */

    .portfolio-page .projects .row { margin-top: 60px; }
    .portfolio-page .projects .row:first-child { margin-top: 0; }

    /* PROJECT IMAGES */

    .portfolio-page .project-images p { margin: 30px 0 0 0; }
    .portfolio-page .project-images p:first-child { margin-top: 0; }

    /* PROJECT DESCRIPTION */

    .portfolio-page .project-description .section-title { margin-bottom: 35px; }
    .portfolio-page .project-description .info { margin-bottom: 35px; padding: 12px 0 12px; border: 1px solid transparent; border-left: 0; border-right: 0; }
    .portfolio-page .project-description .info li {
	position: relative;
	padding: 2px 0 2px 70px;
	line-height: 1.8em;
	color: #999;
}
    .portfolio-page .project-description .info h3 { position: absolute; top: 2px; left: 0; margin: 0; width: 60px; font-size: 1em; text-transform: uppercase; }
    .portfolio-page .project-description .info span {
	margin-right: 10px;
	text-transform: lowercase;
}
    .portfolio-page .project-description .info span:last-child {margin: 0; }
    .portfolio-page .project-description .text > * { margin: 0 0 30px 0; }
    .portfolio-page .project-description .text p { line-height: 1.8em; }
    .portfolio-page .project-nav { margin: 50px 0 0 0; }
    .portfolio-page .project-nav a,
    .portfolio-page .project-nav span { display: inline-block; position: relative; width: 28px; height: 28px;  }
    .portfolio-page .project-nav i { display: block; position: absolute; top: -1px; left: -1px; width: 30px; height: 30px; text-indent: -1000em;
        -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; }
    .portfolio-page .project-nav .prev:active i { left: -5px; }
    .portfolio-page .project-nav .next:active i { left: 3px; }
    .portfolio-page .project-nav span.prev:active i,
    .portfolio-page .project-nav span.next:active i { left: -1px; }

    /* RECENT PROJECT */

    .portfolio-page .recent-projects { margin-top: 80px; }
    .portfolio-page .recent-projects .projects { margin-top: 60px; }

    /* ----------------------------------
        SEARCH RESULTS PAGE
    ---------------------------------- */

    .search-results-page .search-results > li { margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid transparent; }
    .search-results-page .search-results > li:first-child { margin-top: 0; }
    .search-results-page h2 { margin: 0; font-weight: normal; font-size: 1.5em; }
    .search-results-page h2 a { text-decoration: underline; }
    .search-results-page .link { margin: 18px 0 0 0; width: 100%; overflow-x: hidden; }
    .search-results-page .link a { text-decoration: underline; }
    .search-results-page .various-content { margin-top: 18px; }
    .search-results-page .various-content .string { padding: 0 2px; }

    /* ----------------------------------
        SERVICES PAGE
    ---------------------------------- */

    .services-page section { margin-top: 80px; }
    .services-page section:first-child,
    .services-page section > *:first-child { margin-top: 0; }

    /* SERVICES INTRO */

    .services-page .services-intro { padding-bottom: 50px; border-bottom: 1px solid transparent;}

    /* SERVICES LIST */

    .services-page .services-list .service { padding: 40px 30px; border-radius: 7px; border: 1px solid transparent; }
    .services-page .services-list .service .ico { display: inline-block; margin-bottom: 40px; width: 60px; height: 60px; text-align: center; border-radius: 7px; }
    .services-page .services-list .service .ico i { position: relative; top: 16px; font-size: 25px; }
    .services-page .services-list .service h2 { margin: 0 0 16px 0; font-weight: normal; font-size: 1.4em; }
    .services-page .services-list .service .various-content { margin: 0 0 20px 0; }
    .services-page .services-list .service .various-content p { line-height: 1.8em; }
    .services-page .services-list .service .btn { margin: 0; }

    /* SERVICES FEATURES */

    .services-page .services-features-inner { margin-top: 30px; }
    .services-page .feature { position: relative; margin-top: 30px; padding: 10px 0 0 60px; }
    .services-page .feature .ico { display: block; position: absolute; top: 0; left: 0; width: 46px; height: 46px; text-align: center; border-radius: 5px; }
    .services-page .feature .ico i { position: relative; top: 13px; font-size: 19px;  }
    .services-page .feature h3 { margin: 0 0 10px; font-weight: normal; font-size: 1.4em; }
    .services-page .feature p { margin: 0; font-size: 1.05em; line-height: 1.8em; }

    /* SERVICES DESCRIPTION */

    .services-page .services-description-inner { margin-top: 60px; }
    .services-page .services-description p.lead { font-size: 1.2em; }


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

    9.) SIDEBAR

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

    /* ----------------------------------
        WIDGETS
    ---------------------------------- */

    #sidebar .widget { margin-top: 50px; }
    #sidebar .widget:first-child { margin-top: 0; }
    #sidebar .widget h3 { margin: 0; font-size: 1.05em; text-transform: uppercase; }
    #sidebar .widget-content { margin-top: 22px; }
    #sidebar .widget-content:first-child { margin-top: 0; }

    /* SEARCH WIDGET */

    #sidebar .widget.search .input { position: relative; height: 48px; border-radius: 7px; }
    #sidebar .widget.search input { padding: 15px 50px 0 20px; width: 100%; font-size: 16px; background: transparent; border: 0;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    #sidebar .widget.search button { display: block; position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 7px; }
    #sidebar .widget.search button i { font-size: 18px; opacity: 1;
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; }
    #sidebar .widget.search button:active i { opacity: .8; }

    /* CATEGORIES WIDGET */

    #sidebar .widget.categories a { display: block; padding: 13px 14px; font-size: 1.15em; border-bottom: 1px solid transparent; }

    /* IMAGES WIDGET */

    #sidebar .widget.images .widget-content { position: relative; min-height: 50px; }
    #sidebar .widget.images.loading .loading-anim { display: block; }
    #sidebar .widget.images .feed { display: none; }
    #sidebar .widget.images li { float: left; margin: 0 15px 15px 0; width: 78px; }
    #sidebar .widget.images li.third { margin-right: 0; }
    #sidebar .widget.images li a { display: block; padding-bottom: 100%; width: 100%; height: 0; background-position: center; background-size: cover; opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;}
    #sidebar .widget.images li a:hover { opacity: .7; }
    #sidebar .widget.images li a:active { opacity: .5; }
    #sidebar .widget.images li img { display: none; }


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

    10.) TWITTER FEED

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

.twitter-feed-inner { padding: 50px 0; }
#twitter-feed .title { position: relative; text-align: right; }
#twitter-feed .title i { position: absolute; left: 0; top: 0; font-size: 28px; }
#twitter-feed h3 { margin: 0; padding-left: 40px;  font-size: 1.6em; font-weight: normal; }
#twitter-feed p.tweet { margin: 5px 0 10px 0; font-size: 1.2em; }
#twitter-feed p.date { margin: 0; font-size: 0.95em; }
#twitter-feed a { text-decoration: underline; }
#twitter-feed a:hover { text-decoration: none; }


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

    11.) BOTTOM

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

.bottom-inner { padding: 60px 0; }

    /* ----------------------------------
        WIDGETS
    ---------------------------------- */

    #bottom .widget h3 { position: relative; margin: 0 0 42px 0; padding-bottom: 20px; font-size: 1.25em; border-bottom: 1px solid transparent; }
    #bottom .widget h3 i { display: block; position: absolute; left: 0; bottom: -1px; width: 22px; height: 1px; line-height: 1px; font-size: 0; }
    #bottom .widget-content { position: relative; }

    /* TEXT WIDGET */

    #bottom .widget.text .widget-content > * { margin: 30px 0 0 0; }
    #bottom .widget.text .widget-content > *:first-child { margin-top: 0; }
    #bottom .widget.text .widget-content p { font-size: 1.05em; line-height: 1.5em; }

    /* ARTICLES WIDGET */

    #bottom .widget.articles li { padding: 20px 0 15px 0; border-top: 1px solid transparent; }
    #bottom .widget.articles li:first-child { padding-top: 0; border: 0; }
    #bottom .widget.articles li:last-child { padding-bottom: 0; }
    #bottom .widget.articles h4 { margin: 0 0 10px 0; line-height: 1.6em; font-weight: normal; font-size: 1.05em; }
    #bottom .widget.articles .date { margin: 0; font-size: 0.9em; }

    /* TAGS WIDGET */

    #bottom .widget.tags li { display: inline-block; margin: 0 3px 7px 0;  }
    #bottom .widget.tags a { display: block; padding: 12px 20px; font-size: 0.8em; text-transform: uppercase; border: 1px solid transparent;
        -webkit-transition: border-color 300ms ease-in-out; -moz-transition: border-color 300ms ease-in-out; -ms-transition: border-color 300ms ease-in-out; -o-transition: border-color 300ms ease-in-out; transition: border-color 300ms ease-in-out; }

    /* IMAGES WIDGET */

    #bottom .widget.images .widget-content { min-height: 50px; }
    #bottom .widget.images .loading-anim { display: block; }
    #bottom .widget.images .feed { display: none; }
    #bottom .widget.images li { float: left; margin: 0 8px 8px 0; width: 60px; }
    #bottom .widget.images li.fourth { margin-right: 0; }
    #bottom .widget.images li a { display: block; padding-bottom: 100%; width: 100%; height: 0; background-position: center; background-size: cover; opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;}
    #bottom .widget.images li a:hover { opacity: .7; }
    #bottom .widget.images li a:active { opacity: .5; }
    #bottom .widget.images li img { display: none; }


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

    12.) FOOTER

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

footer { font-size: 0.95em; }
.footer-inner { padding: 50px 0; }

    /* ----------------------------------
        COPYRIGHT
    ---------------------------------- */

    footer .copyright { float: left; margin: 0; }

    /* ----------------------------------
        FOOTER NAV
    ---------------------------------- */

    nav.footer { float: right; }
    nav.footer li { display: inline-block; }


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

    13.) RESPONSIVE

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

    /* ----------------------------------
        LARGE DESKTOP (default)
    ---------------------------------- */

    #screen-width,
    #screen-width span:before { content: "1200"; }

    /* ----------------------------------
        SMALL DESKTOP
    ---------------------------------- */

    @media (max-width: 1199px) {

    /* SIDEBAR */

    #sidebar .widget.images li { float: left; margin: 0 14px 14px 0; width: 61px; }

    /* BOTTOM */

    #bottom .widget.images li,
    #bottom .widget.images li.fourth { margin: 0 8px 8px 0; width: 65px; }
    #bottom .widget.images li.third { margin-right: 0; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "1199"; }

    }

    /* ----------------------------------
        LARGE TABLET
    ---------------------------------- */

    @media (max-width: 979px) {

    /* COMPONENTS */

    /* buttons */
    .button.wide { padding-left: 20px; padding-right: 20px; }

    /* list slider */
    .list-slider-nav { top: -110px; }
    .list-slider-nav button { width: 40px; height: 40px; }
    .list-slider-nav button i { top: 5px; left: 5px; }
    .list-slider-nav button.prev:active i { left: 2px; }
    .list-slider-nav button.next:active i { left: 8px; }
    /* tabs */
    .tabs .tab { padding: 14px 20px 12px 20px; }
    .tabs .tab span { display: none; }
    .tabs .tab i { position: relative; top: auto; left: auto; }

    /* HEADER */

    /* topbar*/
    #topbar { padding: 15px 20px 5px 20px; }
    .topbar-inner { height: auto; }
    #topbar .responsive-controls { display: block; padding-bottom: 10px;}
    #topbar .responsive-controls .social { float: left; }
    #topbar .responsive-controls .search { float: right; }
    #topbar .social-icons { display: none; margin-top: 10px; }
    #topbar .social-icons li a { margin-bottom: 10px; width: 60px; height: 60px; }
    #topbar .social-icons li a i { font-size: 24px; top: 15px; left: 15px; }
    #topbar .search-form { display: none; position: relative; margin: 10px 0 10px 0; width: auto; height: 60px; }
    #topbar .search-form .input { display: block; position: relative; height: 60px; }
    #topbar .search-form .input input { padding-top: 22px; width: 80%; padding-left: 20px; font-size: 14px; }
    #topbar .search-form button.submit { width: 60px; height: 60px; }
    #topbar .search-form button.submit i { font-size: 24px; }
    #topbar .search-form .input button.close { display: none; }
    /* navbar */
    .navbar-inner { min-height: 150px; }
    #branding { max-width: 70%; }
    nav.main { float: none; padding-top: 42px; }
    nav.main > button { display: block; }
    nav.main .indicator { display: none; }
    nav.main > ul { display: none; clear: both; padding: 20px 0 10px 0; }
    nav.main > ul > li { position: relative; float: none; margin: 0; padding-bottom: 10px; border-top: 1px solid transparent; }
    nav.main > ul > li:first-child { border: 0; }
    nav.main > ul > li > a { position: relative; padding: 20px 60px 10px 0; z-index: 20; font-size: 1.2em; }
    nav.main > ul > li > a > span { display: none; }
    nav.main > ul > li .arrow { display: block; position: absolute; top: 14px; left: auto; right: 9px; width: 42px; height: 42px; cursor: pointer; z-index: 30; }
    nav.main > ul > li .arrow i { position: relative; top: 6px; left: 6px; width: 30px; height: 30px;
        transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0);
        -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }
    nav.main > ul > li .arrow.active i { transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); }
    nav.main > ul > li > ul { position: relative; left: auto; top: auto; padding-bottom: 5px; }
    nav.main > ul > li > ul li { border: 0; }
    nav.main > ul > li > ul li a { padding: 5px 0; font-size: 1.2em; line-height: 1.5em; white-space: normal; }

    /* HOMEPAGE */

    /* welcome */
    #welcome br { display: none; }

    /* PAGE TYPES */

    /* page title */
    #page-title h1 span { display: block; left: auto; top: auto; margin-top: 5px; }
    /* blog page */
    .blog-page .article-list .article-info { padding-left: 0; }
    /* contact page */
    .contact-page .contact-info li,
    .contact-page .contact-info.hours li { padding-left: 0;  }
    .contact-page .contact-info li h3 { display: block; position: relative; top: auto; left: auto; width: auto; padding-left: 32px; }
    /* portfolio page */
    .portfolio-page .project-nav a,
    .portfolio-page .project-nav span { width: 40px; height: 40px; }
    .portfolio-page .project-nav i { top: 5px; left: 5px; }
    .portfolio-page .project-nav .prev:active i { left: 2px; }
    .portfolio-page .project-nav .next:active i { left: 8px; }

    /* SIDEBAR */

    #sidebar .widget.images li { float: left; margin: 0 14px 14px 0; width: 76px; }
    #sidebar .widget.images li.third { margin-right: 14px; }
    #sidebar .widget.images li.second { margin-right: 0; }

    /* TWITTER FEED */

    #twitter-feed { padding: 0 20px; }
    #twitter-feed .title { margin-bottom: 20px; text-align: left; }

    /* BOTTOM */

    #bottom .widget.images li,
    #bottom .widget.images li.third,
    #bottom .widget.images li.fourth { margin: 0 10px 10px 0; width: 78px; }
    #bottom .widget.images li.second { margin-right: 0; }

    /* FOOTER */

    footer .copyright { float: none; text-align: center; }
    nav.footer { float: none; margin-top: 30px; text-align: center; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "979"; }

    }

    /* ----------------------------------
        SMALL TABLET
    ---------------------------------- */

    @media (max-width: 767px) {

    /* GENERAL */

    body { padding: 0; }

    /* TYPOGRAPHY */

    .various-content section .row > * > *:first-child { margin-top: 30px; }
    .various-content section .row > *:first-child > *:first-child { margin-top: 0; }

    /* COMPONENTS */

    /* cta message */
    .cta-message .button { display: inline-block; float: none; margin-top: 20px; }
    /* button pagination */
    .button-pagination p.status { position: static; left: auto; top: auto; margin-bottom: 30px; }
    /* list slider */
    .list-slider-nav { position: relative; top: auto; right: auto; margin: 0 auto 30px auto; width: 85px; height: 40px; }
    .list-slider-items { margin: auto; width: 430px; }
    .list-slider-items > ul > li { width: 430px; }
    /* pagination */
    .pagination { text-align: center; }

    /* HEADER */

    #navbar { padding: 0 20px; }
    #branding { max-width: 60%; }

    /* MAIN SLIDER */

    #slider .carousel-inner .item h2 { font-size: 2.8em; }

    /* HOMEPAGE */

    /* bottom banners */
    .home-page .bottom-banners { text-align: center; }
    /* home services */
    .home-services-inner { padding-left: 20px; padding-right: 20px; }
    /* homepage core*/
    #homepage-core { padding-left: 20px; padding-right: 20px; }
    #homepage-core .cta-message .button { margin-top: 30px; }

    /* PAGE TYPES */

    /* page core */
    #page-core { padding-left: 20px; padding-right: 20px; }
    /* about page */
    .about-page .about-intro .various-content { padding-bottom: 30px; }
    .about-page .team-member { margin-left: auto; margin-right: auto; width: 430px; }
    /* blog page */
    .blog-page .article-footer .button { position: static; }
    .blog-page .article-info { display: block; padding: 0; margin-bottom: 30px;  }
    /* contact page */
    .contact-page .contact-form { padding: 0 20px 0 20px; }
    .contact-page .contact-form p:last-child { margin-bottom: 25px; }
    .contact-page .contact-form-inner { padding-bottom: 50px; }
    .contact-page .contact-info { margin-bottom: 60px; }
    /* portfolio page */
    .portfolio-page .projects ul.row { margin-left: auto; margin-right: auto; width: 430px; }
    .portfolio-page .projects ul.row > li { margin-top: 60px; width: 430px; }
    .portfolio-page .projects ul.row > li:first-child { margin-top: 0; }
    .portfolio-page .recent-projects .projects ul.row > li { margin-top: 0; }
    .portfolio-page .project-description { margin-top: 60px; }
    /* services page */
    .services-page .services-list .row > * .service { margin-top: 30px; }
    .services-page .services-list .row > *:first-child .service { margin-top: 0; }
    .services-page .services-description { margin-top: 60px; }

    /* SIDEBAR */

    #sidebar { margin-top: 100px; }
    #sidebar .widget.images li,
    #sidebar .widget.images li.third,
    #sidebar .widget.images li.second { margin-right: 14px; }

    /* BOTTOM */

    #bottom { padding: 0 20px; }
    .bottom-inner { padding-bottom: 0; }
    #bottom .widget { margin-bottom: 60px; }
    #bottom .widget.images li,
    #bottom .widget.images li.second,
    #bottom .widget.images li.third,
    #bottom .widget.images li.fourth { margin: 0 10px 10px 0; width: 70px; }

    /* FOOTER */

    footer { padding: 0 20px; }

    /* SCREEN WIDTH */

    #screen-width,
    #screen-width span:before { content: "767"; }

    }

    /* ----------------------------------
        PHONE
    ---------------------------------- */

    @media (max-width: 480px) {

    /* COMPONENTS */

    /* list slider */
    .list-slider-items { width: 250px; }
    .list-slider-items > ul > li { width: 250px; }

    /* PAGE TYPES */

    /* about page */
    .about-page .team-member { width: 250px; }
    /* portfolio page */
    .portfolio-page .projects ul.row { width: 250px; }
    .portfolio-page .projects ul.row > li { width: 250px; }

    }
.main-1 {
	display: block;
	float: left;
	padding-top: 0px;
	padding-right: 27px;
	padding-bottom: 46px;
	padding-left: 27px;
	position: relative;
	z-index: 30;
}

 /* ----------------------------------
        ALEX CSS EFECTOS SOBRE IMAGEN
    ---------------------------------- */
.project-preview .thumb img
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
.project-preview .thumb img:hover
{
opacity:0.7;
background-color: rgb(0,0,255,0.5);
filter:alpha(opacity=50); /* For IE8 and earlier */
}