/*
Theme Name: Azul Marketing + Events Management
Theme URI: http://www.ame.ph
Author: Reiner Evangelista
Author URI: http://www.creativeweblogic.com
Description: 2015 web design layout.
Version: 1.0
*/

@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800);


body {
    font: 400 15px/1 'Open Sans', sans-serif;
    color: #333;
    background: #FFF;
}


/*HEADER
--------------------------------------------------*/
header {
    width: 100%;
    background: #FFF;
    padding: 15px 0 0 0;
}

header .container,
header .container-fluid {
    position: relative;
    display: flex;
    align-items: center;
}

header h1,
header h3 {
    font-size: 0;
    margin: 10px 0 0 0;
    display: inline-block
}

header .left {
    width: 30%;
}

header .right {
    width: 70%;
    text-align: right;
}


/*NAVIGATION
--------------------------------------------------*/
header .navigation {
    font-size: 0;
    text-align: left;
    padding: 0;
    margin: 0;
    display: inline-block
}

header .navigation li {
    list-style: none;
    padding: 61px 0 37px 0;
    margin-left: 40px;
    display: inline-block;
    vertical-align: middle;
    position: relative
}

header .navigation li a {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    color: #888
}

header .navigation li a:hover {
    color: #0c87bf
}

header .navigation li.active a {
    color: #0c87bf
}

header .navigation li.active a:before {
    content: '';
    width: 100%; height: 5px;
    background: #439e42;
    display: block;
    position: absolute; bottom: 0
}

header .navigation>.current-menu-item>a,
header .navigation>.current-menu-item>a:hover {
    color: #0c87bf
}

header .navigation li:hover a {
    color: #0c87bf;
}

.single .menu-item-27 a {
    color: #0c87bf
}

/* Social */
header .navigation li.social {
    padding: 0;
    margin-left: 20px;
    position: relative; top: 12px
}

header .navigation li.social a {
    font-size: 30px;
    text-shadow: none;
    margin: 0 -2px;
    display: inline-block;
    opacity: 0.8
}

header .navigation li.social a:hover {
    opacity: 1
}

.single-people .menu-item-19 a {
    color: #0c87bf
}

.single-people .menu-item-19 a:before {
    content: '';
    width: 100%; height: 5px;
    background: #439e42;
    display: block;
    position: absolute; bottom: 0
}


/*BANNER
--------------------------------------------------*/
.cw-banner {
    width: 100%;
    background: #e2e2e2;
    position: relative;
}

.cw-banner .slider {
    width: 100%;
    position: relative;
}

.cw-banner .slider a {
    color: #FFF
}

.cw-banner .slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    position: relative
}

.slotholder {
    z-index: 2000 !important
}

.cw-banner .slider .tp-bannertimer {
    display: none
}

.cw-banner .slider .title {
    width: 50%;
    color: #FFF;
    padding: 0 75px;
    white-space: normal !important
}

.cw-banner .slider .title h2 {
    display: block
}

.cw-banner .slider .title p {
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    text-shadow: 1px 2px 2px rgba(0,0,0,0.75);
    color: #FFF;
    display: block;
    white-space: normal !important
}

.cw-banner .slider .background {
    width: 100%; height: 350px;
    background: url(img/bg-gradient.png)
}

/*options*/
.cw-banner .tp-bullets.tp-thumbs {
    width: 100% !important;
    background: none;
    padding: 0;
    margin: 0 !important;
    left: 0 !important;
    bottom: 0 !important
}

.cw-banner .tp-bullets.tp-thumbs .tp-mask {
    position: absolute !important;
    right: 90px; bottom: 30px
}

.cw-banner .tp-bullets.tp-thumbs .thumb {
    padding-left: 10px;
    position: relative;
    opacity: 1
}

.cw-banner .tp-bullets.tp-thumbs .thumb img {
    border: 3px solid #FFF;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
}

.cw-banner .tp-bullets.tp-thumbs .thumb.selected img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.tp-thumbcontainer {
    right: 0 !important
}


/*PAGE
--------------------------------------------------*/
.cw-page {
    padding: 120px 0 120px 0;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;
    overflow: hidden;
}

.cw-page .container {
    position: relative;
    z-index: 2
}

.cw-page h2 {
    color: #4db748
}

.cw-page p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    text-align: justify;
    color: #e2e2e2;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.cw-page div.big {
    font-size: 21px;
    line-height: 1.5;
    font-weight: 300;
    color: #e2e2e2;
    margin-bottom: 20px
}

.cw-page .title {
    margin-bottom: 15px;
    border-bottom: 1px solid #b0a196
}

.cw-page .content {
    padding-top: 30px;
}

.cw-page ol,
.cw-page ul {
    padding: 0;
    margin: 0
}

.cw-page ol li {
    line-height: 1.5;
    margin: 10px 0 10px 20px
}

.cw-page ul li {
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
    padding-left: 25px;
    margin-bottom: 20px;
    position: relative;
}

.cw-page ul li:before {
    font-family: 'Glyphicons Halflings';
    font-size: 14px;
    color: #0c87bf;
    content:"\e258";
    position: absolute; left: 0; top: 1px
}

.cw-page hr {
    border-color: #a29996;
    margin-bottom: 45px;
    opacity: 0.5
}

.cw-page .bg-left {
    position: absolute; left: 0; bottom: 0
}

.cw-page .bg-right {
    position: absolute; right: 0; top: 0
}


/*EVENTS
--------------------------------------------------*/
.events-carousel {
    margin: 0 -10px;
    position: relative;
    z-index: 2;
}

.events-carousel h4 {
    font-size: 17px;
    font-weight: 300;
    color: #ffffff;
}

.events-carousel .owl-wrapper-outer {
    margin-bottom: 30px;
}

.events-carousel .item {
    margin: 0 10px;
}

.events-carousel a {
    display: block;
    margin-bottom: 15px;
}

ul.event-details {
    padding: 0;
    display: flex;
    flex-direction: column;
}

ul.event-details li {
    font-size: 12px;
    color: #e2e2e2;
    list-style: none;
    display: flex;
    align-items: center;
}

ul.event-details li:before {
    font-family: 'Glyphicons Halflings';
    font-size: 14px;
}

ul.event-details .client:before {
    content: "\e008";
    color: #0c87bf;
}

ul.event-details .service:before {
    content: "\e139";
    color: #f1c40f
}

ul.event-details .location:before {
    content: "\e062";
    color: #e74c3c
}


/*PROFILE
--------------------------------------------------*/
.cw-profile h1 {
    text-transform: none;
}

.cw-profile .position {
    color: #999999;
    margin-left: 5px;
}


/*ACCORDION
--------------------------------------------------*/
.cw-accordion {
    margin-top: 3px;
}

.cw-accordion article {
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e2e2
}

.cw-accordion h4 {
    line-height: 1.5;
    text-align: left;
    color: #ffffff;
    padding-left: 30px;
    margin: 0 0 15px 0;
    position: relative;
    cursor: pointer
}

.cw-accordion h4:before {
    content: '\e081';
    font-family: 'Glyphicons Halflings';
    font-size: 22px;
    color: #0c87bf;
    position: absolute; left: 0; top: -3px
}

.cw-accordion h4.minus {
    color: #0c87bf
}

.cw-accordion h4.minus:before {
    content: '\e082';
    font-family: 'Glyphicons Halflings';
    font-size: 22px;
    color: #0c87bf;
    margin-right: 15px;
}

.cw-accordion .child {
    padding-left: 35px
}


/*PAGE COLUMNS
--------------------------------------------------*/
.cw-page-columns {
    margin: 0 -25px;
    display: flex;
    justify-content: space-between;
}

.cw-page-columns .item {
    flex: 1;
    padding: 0 25px;
}

.cw-page-columns .item img {
    margin:  0 auto;
}


/*CONTACT US
--------------------------------------------------*/
.cw-page .contact-info {
    margin: 0 -25px;
    display: flex;
    justify-content: space-between;
}

.cw-page .contact-info .item {
    padding: 0 25px;
}

.cw-page .contact-info h5 {
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.cw-page .contact-info ul {
    color: rgba(255,255,255,0.9);
    display: flex;
}

.cw-page .contact-info ul:before {
    font: 2em/1 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
}

.cw-page .contact-info ul li {
    line-height: 1.3;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.cw-page .contact-info ul li:before {
    display: none;
}

.cw-page .contact-info ul.mobile {
    margin-bottom: 15px
}

.cw-page .contact-info ul.phone:before { content: "\e182"; }
.cw-page .contact-info ul.mobile:before { content: "\e145"; }
.cw-page .contact-info .address:before { content: "\e062"; }

.form-box {
    background: rgba(0,0,0,0.75);
    padding: 30px 20px 20px 20px;
    border-radius: 6px;
}

.wpcf7 .form-control {
    color: #ffffff;
    background: none;
    border: 0;
    border-bottom: 1px solid #999999;
    border-radius: 0;
}

.wpcf7 .form-control:focus {
    box-shadow: none;
}

.wpcf7 label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}

.wpcf7 .note {
    color: #e2e2e2;
}

.wpcf7-not-valid-tip {
    font: 12px/1 Arial, Helvetica, sans-serif !important;
    color: #FFF !important;
    background: #f00;
    padding: 5px 10px;
    margin: 5px 0 0 0 !important;
    border-radius: 4px;
    display: inline-block !important
}

.wpcf7-response-output {
    font: 12px/1.5 Arial, Helvetica, sans-serif !important;
    padding: 5px 10px !important;
    margin: 15px 0 0 0 !important;
    border: none !important;
    border-radius: 4px;
    display: inline-block !important
}

.wpcf7-validation-errors {
    color: #000 !important;
    background: #f7e700;
}

.wpcf7-mail-sent-ok {
    color: #FFF !important;
    background: #398f14;
}


/*GOOGLE MAP
--------------------------------------------------*/
.cw-google-map {
    width: 100%; height: 500px;
}

.cw-google-map iframe {
    width: 100%; height: 500px;
}


/*BAR
--------------------------------------------------*/
.cw-bar {
    width: 100%;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.3;
    color: #ffffff;
    background-image: linear-gradient(to right,#0c87bf,#4db748,#888888);
    padding: 20px 0;
    position: absolute; bottom: 30px;
    z-index: 5555;
}

.cw-bar h5 {
    font-weight: 400;
    margin-top: 5px
}

.cw-bar .who {
    font-size: 20px
}

.cw-bar ul {
    padding-left: 25px;
    position: relative;
}

.cw-bar ul:before {
    font: 15px/1 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute; left: 1px; top: 3px
}

.cw-bar ul li {
    line-height: 1.3;
    list-style: none;
    padding: 0;
    margin: 0
}

.cw-bar ul li:before {
    display: none;
}

.cw-bar ul.phone {
    margin-bottom: 7px
}

.cw-bar ul.phone:before { content: "\e182"; }
.cw-bar ul.mobile:before { content: "\e145"; }
.cw-bar .address:before { content: "\e062"; }

.cw-bar hr {
    border-color: #ffffff;
    margin: 15px 0;
    opacity: 0.25
}


/*EVENTS (Archive)
--------------------------------------------------*/
.cw-events-archive {
    margin: 0 -30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cw-events-archive .item {
    width: 33.33%;
    padding: 0 30px;
    margin-bottom: 30px;
}

.cw-events-archive .item a {
    font-weight: 300;
    line-height: 1.2;
    color: #ffffff;
    display: block;
    position: relative;
}

.cw-events-archive .item .image {
    position: relative;
}

.cw-events-archive .item .image img {
    margin-bottom: 5px;
}

.cw-events-archive .item .image .overlay {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.cw-events-archive .item a:hover .image .overlay {
    background: rgba(0,0,0,0.5);
    opacity: 1;
}

.cw-events-archive .item .image .overlay i {
    font-size: 1.75em;
    color: #e2e2e2;
}


/*EVENTS (Single)
--------------------------------------------------*/
.cw-events-single {
    padding: 60px 0 60px 0;
}

.cw-events-single .video {
    text-align: center;
    margin-bottom: 30px;
}

.cw-events-single .video h1 {
    font-size: 2.5em;
    font-weight: 100;
    line-height: 1.1;
    text-transform: uppercase;
    color: #009f8b;
}

.cw-events-single .information {
    padding: 0 0 5px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e2e2;
}

.cw-events-single .information .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cw-events-single .information .item {
    flex: 1;
    display: flex;
    align-items: center;
}

.cw-events-single .information .item:before {
    font: 2em 'Glyphicons Halflings';
    margin-right: 10px;
}

.cw-events-single .content {
    margin-bottom: 30px;
}

.cw-events-single .content p {
    text-align: justify;
    line-height: 1.75;
    margin-bottom: 15px;
}

.cw-events-single .gallery {
    margin: 0 -4px 30px -4px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cw-events-single .gallery .item {
    width: 14.285%;
    padding: 4px;
}

.cw-events-single .gallery .item img {
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.cw-events-single .gallery .item img:hover {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.8;
}

.cw-events-single .social {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-events-single .social .fb-share-button {
    margin-right: 10px;
}

.icon-client:before {
    content: "\e008";
    color: #0c87bf;
}

.icon-service:before {
    content: "\e139";
    color: #f1c40f
}

.icon-date:before {
    content: "\e109";
    color: #009f8b;
}

.icon-location:before {
    content: "\e062";
    color: #e74c3c
}


/*EVENT TEASERS
--------------------------------------------------*/
.cw-teaser {
    padding: 60px 0 45px 0;
    position: relative;
    z-index: 100
}

.cw-teaser p {
    font-size: 13px;
    line-height: 1.8;
    text-align: justify;
}

.cw-teaser h2 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 30px;
}

.cw-teaser h4 {
    font-weight: 300;
    margin: 0 0 10px 0;
}

.cw-teaser .events {
    padding-left: 30px;
    margin-bottom: 15px;
}

.cw-teaser .events h2 {
    font-size: 25px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 5px 0 10px 0;
}

.cw-teaser .events a {
    color: #333333;
    padding: 10px 10px 5px 70px;
    border-bottom: 1px solid #e2e2e2;
    display: block;
    position: relative;
}

.cw-teaser .events a:hover {
    background: #f1f1f1;
}

.cw-teaser .events a .date {
    min-width: 50px;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background: #009f8b;
    padding: 8px;
    position: absolute; left: 10px; top: 10px
}

.cw-teaser .events a .date strong {
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 5px;
    display: block;
}

.cw-teaser .events a .details {
    font-size: 12px;
    color: #888888
}

.cw-teaser .events a .details div {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.cw-teaser .events a .details div:before {
    font: 12px 'Glyphicons Halflings';
    margin-right: 7px;
}


/*CLIENTS
--------------------------------------------------*/
.cw-clients {
    font-size: 0;
    background: #eaeaea;
    padding: 30px 0 20px 0;
}

.cw-clients h4 {
    font-weight: 600;
    text-transform: uppercase;
    margin: 0
}

.cw-clients p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0
}

.cw-clients .left {
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}

.cw-clients .logos {
    width: 75%;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
}

.cw-clients .logos .item {
    height: 75px;
    text-align: center;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-clients .logos .item img {
    width: auto; height: auto;
}


/*FOOTER
--------------------------------------------------*/
footer {
    font-size: 12px;
    font-weight: 600;
    color: #555555;
    padding: 30px 0 30px 0
}


/*404
--------------------------------------------------*/
.cw-404 {
    text-align: center;
    background: #f1f1f1;
    padding: 120px 0
}

.cw-404 h2 {
    font-size: 2.5em;
    text-transform: uppercase;
    color: #a0a09f;
    margin-bottom: 18px;
}

.cw-404 h2 strong {
    font-size: 5em;
    display: block;
}

.cw-404 p {
    font-size: 1.5em;
    font-weight: 300;
    text-align: center;
    color: #666666;
    margin-bottom: 45px;
}


/*MISCELLANEOUS
--------------------------------------------------*/
:focus {
    text-decoration: none !important;
    outline: none;
}

a {
    color: #0c87bf;
    transition: all 0.3s ease-in-out;
}

a:hover {
    color: #00634c;
    text-decoration: none
}

h1 {
    font-size: 70px;
    font-weight: 300;
    line-height: 0.8;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 25px 0
}

h2 {
    font-size: 25px;
    font-weight: 400;
    color: #009f8b
}

h3 {
    font-weight: 400
}

.no-border {
    padding-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.margin-b0 { margin-bottom: 0px !important }
.margin-b15 { margin-bottom: 15px !important }
.margin-b30 { margin-bottom: 30px !important }
.margin-b45 { margin-bottom: 45px !important }
.margin-t15 { margin-top: 15px !important }

button,
.btn {
    transition: all 0.3s ease-in-out;
}

.btn-custom {
    color: #fff;
    background-color: #009f8b;
    border: 0;
    border-radius: 0;
}

.btn-custom:hover {
    color: #fff;
    background-color: #008d78
}


/*Wordpress WYSIWYG Setting*/
img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}


/*EMBED VIDEO
--------------------------------------------------*/
.embed-container {
    max-width: 100%;
    height: auto;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
}


.embed-container img {
    max-width: 100%; height: auto;
    display: inline-block;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    width: 100%; height: 100%;
    position: absolute; left: 0; top: 0;
}


/*IMAGE PRELOADER
--------------------------------------------------*/
.cw-banner .loader {
    width: 100%; height: 80%;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    align-items: center;
    justify-content: center;
    z-index: 8000;
}

.cw-banner .loader .loader-inner {
    display: block;
}

.cw-banner .ball-pulse div {
    background: #009f8b
}


/*EFFECTS
--------------------------------------------------*/
.image {
    max-height: 100%;
    display: block;
}

.image-zoom {
    display: block;
    overflow: hidden
}

.image-zoom img {
    transform:scale(1);
    -ms-transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    transition: all 0.3s ease-in-out;
}

.image-zoom:hover img {
    transform:scale(1.1);
    -ms-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -o-transform:scale(1.1);
}

.image-fade {
    background: #000000
}

.image-fade img {
    -webkit-filter: brightness(1);
    filter: brightness(1);
    transition: all 0.3s ease-in-out;
}

.image-fade:hover img {
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    transition: all 0.3s ease-in-out;
}


/*SOCIAL ICONS
--------------------------------------------------*/
.icon-facebook-circled {
    color: #436eac
}

.icon-twitter-circled {
    color: #0598c9
}

.icon-gplus-circled {
    color: #444444
}

.icon-instagram-circled {
    color: #964b00
}

.icon-pinterest-circled {
    color: #cb2027
}


/*MOBILE NAVIGATION
--------------------------------------------------*/
.cw-mobile {
    width: 100%;
    font-size: 0;
    background: #009f8b;
    padding: 5px 0;
    position: fixed; top: 0;
    z-index: 8888;
    transition: all 0.3s ease-in-out;
}

.cw-mobile .left {
    width: 50%;
    display: inline-block;
    vertical-align: middle
}

.cw-mobile .right {
    width: 50%;
    text-align: right;
    display: inline-block;
    vertical-align: middle
}


/*LOCATION BUTTON
--------------------------------------------------*/
.btn-location {
    font-size: 11px;
    font-weight: 600;
    color: #FFF !important;
    display: inline-block;
    z-index: 1000;
    cursor: pointer;
}

.btn-location i {
    font-size: 15px;
    vertical-align: middle;
    position: relative; left: -8px; top: 1px;
    transition: all 0.3s ease-in-out;
}

.btn-location:hover i {
    color: #000000
}

.btn-location span {
    vertical-align: middle;
    position: relative; left: 0px;
    transition: all 0.3s ease-in-out;
}

.btn-location:hover span {
    color: #e2e2e2
}


/*MENU BUTTON
--------------------------------------------------*/
.btn-menu {
    font-size: 14px;
    font-weight: 600;
    color: #FFF !important;
    display: inline-block;
    z-index: 1000;
    cursor: pointer;
}

.btn-menu i {
    font-size: 21px;
    vertical-align: middle;
    position: relative; right: 5px; top: 0px;
    transition: all 0.3s ease-in-out;
}

.btn-menu:hover i {
    color: #000000
}

.btn-menu span {
    vertical-align: middle;
    transition: all 0.3s ease-in-out;
}

.btn-menu:hover span {
    color: #e2e2e2
}


/*MOBILE NAVIGATION
--------------------------------------------------*/
/* Overlay style */
.overlay {
    width: 100%; height: 100%;
    position: fixed; left: 0; top: 0;
    background: rgba(0,0,0,0.8);
    z-index: 9999
}

.overlay .container {
    height: 100%;
}

/* Overlay closing cross */
.overlay .overlay-close {
    width: 30px; height: 30px;
    text-indent: 200%;
    color: transparent;
    background: url(img/cross.png) no-repeat center center;
    border: none;
    position: absolute; right: 20px; top: 20px;
    overflow: hidden;
    outline: none;
    z-index: 100;
}

/* Menu style */
.overlay nav {
    height: auto;
    text-align: center;
    position: relative; top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.overlay ul {
    height: 100%;
    font-size: 0;
    padding: 0;
    margin: 0 -15px;
}

.overlay ul li {
    list-style: none;
    padding: 15px 15px;
    display: block;
    vertical-align: top
}

.overlay ul li a {
    font-size: 36px;
    font-weight: 300;
    text-transform: uppercase;
    color: #FFF;
    background: none;
    display: inline-block;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.overlay ul li a:hover,
.overlay ul li a:focus {
    text-decoration: none;
    color: #009f8b;
    background: none
}

.overlay ul li.current-menu-item a,
.overlay ul li.current-menu-item a:hover {
    color: #009f8b;
    background: none
}


/* Effects */
.overlay-hugeinc {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.overlay-hugeinc nav {
    -webkit-perspective: 1200px;
    perspective: 1200px;
}

.overlay-hugeinc nav ul {
    opacity: 0.4;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
    -webkit-transform: translateY(25%) rotateX(-35deg);
    transform: translateY(25%) rotateX(-35deg);
}

/*Social Icons*/
.overlay ul li.social {
    padding: 15px 45px 0 45px;
}

.overlay ul li.social a:hover {
    text-shadow: none
}

.overlay ul li.social a i {
    font-size: 30px;
    color: #FFF;
    transition: all 0.3s ease-in-out;
}

.overlay ul li.social a i:hover {
    color: #009f8b;
    text-shadow: none
}


@media handheld, only screen and (max-width: 1200px) {
    body {
        font: 400 12px/1 'Open Sans', sans-serif;
    }


    /*HEADINGS (960)
    --------------------------------------------------*/
    h1 {
        font-size: 50px
    }

    h2 {
        font-size: 22px;
    }

    /*BAR (960)
    --------------------------------------------------*/
    .cw-bar {
        font-size: 13px;
        position: absolute;
        bottom: 20px;
    }

    .cw-bar h5 {
        font-size: 13px
    }

    .cw-bar .who {
        font-size: 17px
    }

    /*PAGE (960)
    --------------------------------------------------*/
    .cw-page p {
        font-size: 13px;
    }

    .cw-page div.big {
        font-size: 18px;
        line-height: 1.4;
    }

    /*SERVICES (960)
    --------------------------------------------------*/
    .cw-page .services h3 {
        font-size: 18px
    }

    /*CLIENTS (960)
    --------------------------------------------------*/
    .cw-clients .logos .item {
        text-align: center;
        padding: 15px 0 15px 30px;
        display: inline-block;
        vertical-align: middle;
    }

    .cw-clients .logos .item img {
        max-height: 40px;
        max-width: 100px;
    }
}


@media (min-width: 768px) and (max-width: 979px) {
    /*HEADINGS (Tablets)
    --------------------------------------------------*/
    h1 {
        font-size: 36px
    }

    h2 {
        font-size: 23px
    }

    h3 {
        font-size: 21px
    }

    h4 {
        font-size: 17px
    }

    h5 {
        font-size: 13px
    }

    h6 {
        font-size: 10px
    }


    /*HEADER (Tablets)
    --------------------------------------------------*/
    header {
        padding: 60px 0 5px 0
    }

    header .left {
        width: 100%;
        text-align: center;
    }


    /*EVENTS (Archive) (Mobile Landscape)
    --------------------------------------------------*/
    .cw-events-archive {
        margin: 0 -15px;
    }

    .cw-events-archive .item {
        padding: 0 15px;
    }


    /*GALLERY (Tablets)
    --------------------------------------------------*/
    .cw-page .gallery .item h4 {
        margin-top: 20px;
    }

    /*BAR (Tablets)
    --------------------------------------------------*/
    .cw-bar {
        padding: 10px 0;
        position: absolute;
        bottom: 10px;
    }

    .cw-bar h5 {
        font-size: 13px
    }

    .cw-bar .who {
        font-size: 17px
    }

    .cw-bar ul li {
        font-size: 12px !important;
    }


    /*TEASERS (Tablets)
    --------------------------------------------------*/
    .cw-teaser .events .item li {
        display: block;
    }

    .cw-teaser .events .item li.divider {
        display: none
    }


    /*CLIENTS (Tablets)
    --------------------------------------------------*/
    .cw-clients {
        text-align: center;
    }

    .cw-clients .left {
        width: 100%;
    }

    .cw-clients .logos {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .cw-clients .logos .item {
        padding: 15px;
    }
}

@media only screen and (max-width: 767px) {
    /*HEADINGS (Mobile Landscape)
    --------------------------------------------------*/
    h1 {
        font-size: 32px
    }

    h2 {
        font-size: 26px
    }

    h3 {
        font-size: 21px
    }

    h4 {
        font-size: 17px
    }

    h5 {
        font-size: 14px
    }

    h6 {
        font-size: 12px
    }


    /*HEADER (Mobile Landscape)
    --------------------------------------------------*/
    header {
        padding: 60px 0 5px 0
    }

    header .left {
        width: 100%;
        text-align: center;
    }


    /*PAGE (Mobile Landscape)
    --------------------------------------------------*/
    .cw-page {
        padding: 60px 0;
    }


    /*SERVICES  (Mobile Landscape)
    --------------------------------------------------*/
    .cw-page .services {
        margin: 0;
    }

    .cw-page .services li {
        width: 100%;
        padding: 0;
        margin: 10px 0;
    }


    /*EVENTS (Archive) (Mobile Landscape)
    --------------------------------------------------*/
    .cw-events-archive {
        margin: 0 -15px;
    }

    .cw-events-archive .item {
        width: 50%;
        padding: 0 15px;
    }


    /*BAR (Mobile Landscape)
    --------------------------------------------------*/
    .cw-bar {
        font-size: 13px;
        padding: 15px 0;
    }

    .visible-xs .cw-bar {
        position: static;
    }

    .cw-bar h5 {
        font-size: 13px
    }

    .cw-bar .who {
        font-size: 17px
    }

    /*TEASERS (Mobile Landscape)
    --------------------------------------------------*/
    .cw-teaser {
        padding: 30px 0 45px 0;
    }

    .cw-teaser h2 {
        margin-top: 15px
    }

    .cw-teaser .events {
        padding-left: 0
    }

    .cw-teaser .col-sm-3 {
        margin-bottom: 30px
    }

    /*CLIENTS (Mobile Landscape)
    --------------------------------------------------*/
    .cw-clients {
        text-align: center;
    }

    .cw-clients .left {
        width: 100%;
    }

    .cw-clients .logos {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }

    .cw-clients .logos .item {
        padding: 15px;
    }

    /*FOOTER (Mobile Landscape)
    --------------------------------------------------*/
    footer * {
        line-height: 1.5;
        text-align: center !important;
    }

    footer .col-sm-6 {
        margin: 10px 0 0 0
    }
}


@media only screen and (max-width: 480px) {
    /*TEASERS (Portrait)
    --------------------------------------------------*/
    .cw-teaser .events .item li {
        display: block;
    }

    .cw-teaser .events .item li.divider {
        display: none
    }


    /*PAGE COLUMNS (Mobile Portrait)
    --------------------------------------------------*/
    .cw-page-columns {
        margin: 0;
        display: block;
    }

    .cw-page-columns .item {
        padding: 0;
    }


    /*GALLERY (Mobile Portrait)
    --------------------------------------------------*/
    .cw-page .gallery {
        margin: 0 -10px;
    }

    .cw-page .gallery .item {
        width: 50%;
        padding: 10px;
    }


    /*CONTACT US (Mobile Portrait)
    --------------------------------------------------*/
    .cw-page .contact-info {
        margin: 0;
        display: block;
    }

    .cw-page .contact-info .item {
        padding: 0;
        margin-bottom: 30px;
    }
}