/*
Theme Name: Brandido
Theme URI: https://www.brandido.ph
Author: Reiner Evangelista
Author URI: http://www.creativeweblogic.com
Description: 2019 web design layout.
Version: 1.0
*/

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

body {
    width: 100%;
    font: 100 16px "Georgia",sans-serif;
    color: #ffffff;
    background: #000000;
}

* {
	  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

a {
    text-decoration: none;
    color: #fec730;
    transition: all 0.3s ease-in-out;
}

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

a, a:hover, a:active, a:visited, a:focus {
    text-decoration: none;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2.8em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

h1 { font-weight: 800; color: #fec730; margin-bottom: 5px; }
h2,h3,h4,h5,h6 { font-weight: 400; color: #fec730; margin-bottom: 5px; }

h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong { color: #fec730 }

h1 small,h2 small,h3 small,h4 small,h5 small,h6 small { font-size: 0.5em; color: #e2e2e2; display: block; }

h2 i,h3 i,h4 i,h5 i,h6 i { font-size: 0.75em; }

p {
    font-size: 1em;
    line-height: 1.6;
    color: #e2e2e2;
    margin-bottom: 20px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

img {
    max-width: 100%; height: auto;
}

.cw-btn-lg {
    height: 50px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    background: #fec730;
    padding: 0 40px 0 20px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-lg:hover {
    color: #ffffff;
    background: #006ba6;
}

.cw-btn-lg:before {
    content: url(img/arrow.svg);
    width: 19px; height: 16px;
    margin-right: 20px;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-lg:hover:before {
    margin-left: 8px;
    margin-right: 12px;
}

.cw-btn-md {
    height: 38px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #000000;
    background: #fec730;
    padding: 0 25px;
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-md:hover {
    color: #000000;
    background: #fed857;
}

.cw-btn-md:before {
    content: url(img/arrow.svg);
    width: 19px; height: 16px;
    margin-right: 20px;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-md:hover:before {
    margin-left: 8px;
    margin-right: 12px;
}

.cw-btn-more {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-more:before {
    content: url(img/arrow.svg);
    width: 19px; height: 16px;
    margin-right: 20px;
    transition: all 0.3s ease-in-out !important;
}

.cw-btn-more:hover:before {
    margin-left: 8px;
    margin-right: 12px;
}


/*HEADER
--------------------------------------------------*/
header {
    padding: 30px 0;
}

header .flex {
    margin: 0 -30px;
    display: flex;
}

header .flex .left {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    animation-delay: 0s;
    animation-duration: 5s;
}

header .flex .right {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex-grow: 1;

    animation-delay: 0.5s;
    animation-duration: 2s;
}

header .flex .right .wrapper {
    position: relative; top: -6%;
}

header .flex .right p {
    font-size: 1.1em;
}


header .flex .right p:last-child {
    margin: 0;
}

header .flex .right strong {
    color: #fec730;
}

/*Home*/
.home header {
    width: 100%;
    padding: 30px;
	overflow: hidden;
}

/* .home header {
    height: 100vh;
}
*/
.home header .flex {
    padding: 100px 0;
}

.home header .flex .left,
.home header .flex .right {
    width: 50%;
}


/*NAVIGATION
--------------------------------------------------*/
header .navi ul {
    padding: 0;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
}

header .navi ul li {
    list-style: none;
    margin-left: 40px;
}

header .navi ul li a {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
}

header .navi ul li a:hover {
    color: #fed857;
}

header .navi ul li.current-menu-item a {
    color: #fed857;
}


/*INTRODUCTION
--------------------------------------------------*/
.cw-introduction {
    background-image: linear-gradient(to bottom,#1a1a1a,#000000);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    padding: 100px 0;
}

.cw-introduction h3 strong {
    font-weight: 400;
}

.cw-introduction .heading {
    margin-bottom: 60px;
}

.cw-introduction .heading p {
    font-size: 1.2em;
    line-height: 1.6;
}

.cw-introduction .services .item {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cw-introduction .services .item a:hover {
    color: #fec730;
}

.cw-introduction .services .item .image {
    width: 20%;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
	animation-delay: 0s;
    animation-duration: 2s;
}

.cw-introduction .services .item .content {
    width: 80%;
    padding: 4% 0 4% 5%;
	animation-delay: 0.5s;
    animation-duration: 2s;
}

.cw-introduction .services .item.reverse {
    flex-direction: row-reverse;
}

.cw-introduction .services .item.reverse .content {
    padding: 4% 5% 4% 0
}


/*SERVICES
--------------------------------------------------*/
.cw-services {
    background-image: linear-gradient(to bottom,#1a1a1a,#000000);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    padding: 100px 0;
}

.cw-services h3 strong {
    font-weight: 400;
}

.cw-services .heading {
    margin-bottom: 60px;
}

.cw-services .heading p {
    font-size: 1.2em;
    line-height: 1.6;
}

.cw-services ul.highlight {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.cw-services .flex .item {
    width: 33.33%;
    padding: 0 30px;
}

.cw-services ul {
    padding: 0 0 0 15px;
    margin: 0;
}

.cw-services ul li {
    font-size: 0.9em;
    margin: 5px 0;
}

.cw-services .flex {
    margin: 0 -30px;
    display: flex;
    flex-wrap: wrap;
}


/*PAGE
--------------------------------------------------*/
.cw-page {
    background-image: linear-gradient(to bottom,#1a1a1a,#000000);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    padding: 100px 0;
}

.cw-page h3 strong {
    font-weight: 400;
}

.cw-page .heading {
    margin-bottom: 60px;
}

.cw-page .heading p {
    font-size: 1.2em;
    line-height: 1.6;
}


/*PAST EVENTS
--------------------------------------------------*/
.cw-past-events {
    background-image: linear-gradient(to bottom,#1a1a1a,#000000);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    padding: 100px 0;
}

.cw-past-events h3 {
    color: #fec730;
    margin-bottom: 5px;
}

.cw-past-events .event {
    margin-top: 50px;
}

.cw-past-events .event .owl-carousel {
    margin: 0 -10px;
}

.cw-past-events .event .owl-carousel .item {
    padding: 0 10px;
}


/*CONTACT
--------------------------------------------------*/
.cw-contact {
    display: flex;
}

.cw-contact h3 {
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 60px;
}

.cw-contact h5 {
    font-weight: 600;
    margin-bottom: 5px;
}

.cw-contact strong {
    font-weight: 600;
}

.cw-contact .left {
    width: 50%;
    padding: 0 120px 0 0;
	animation-delay: 0s;
    animation-duration: 2s;
}

.cw-contact .right {
    width: 50%;
	animation-delay: 0.5s;
    animation-duration: 2s;
}

.cw-contact ul.info {
    padding: 0;
    margin: 0;
}

.cw-contact ul.info li {
    font-size: 14px;
    list-style: none;
    padding-left: 30px;
    padding-bottom: 20px;
}

.cw-contact ul.info li.address {
    background: url("img/address.svg") left top no-repeat;
    background-size: 25px 25px;
}

.cw-contact ul.info li.phone {
    background: url("img/phone.svg") left top no-repeat;
    background-size: 25px 25px;
}

.cw-contact ul.info li.mobile {
    background: url("img/mobile.svg") -2px -4px no-repeat;
    background-size: 30px 30px;
}

.cw-contact ul.info li.email {
    background: url("img/email.svg") 4px -1px no-repeat;
    background-size: 18px 18px;
}

.cw-contact ul.info li.facebook {
    background: url("img/icon-facebook.png") 7px top no-repeat;
    background-size: 10px 18px;
}


/*CLIENTS
--------------------------------------------------*/
.cw-clients {
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to bottom,#1a1a1a,#000000);
    background-repeat: no-repeat;
    background-size: 100% 50%;
    padding: 100px 0;
}

.cw-clients .logos {
    width: 100%;
    overflow: hidden;
}

.cw-clients .owl-wrapper {
    display: flex !important;
    align-items: center;
}

.cw-clients .logos .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cw-clients .logos .owl-item img {
    width: auto; height: auto;
    transform: scale(.75);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.cw-clients .logos .owl-item .small img {
    width: auto; height: auto;
    transform: scale(.5);
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/*FOOTER
--------------------------------------------------*/
footer {
    font-size: 13px;
    text-align: center;
    padding: 100px 0;
}

footer .separator {
    width: 1px; height: 15px;
    background: #e2e2e2;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
}


/*FORM
--------------------------------------------------*/
.cw-form {
    width: 100%;
    padding: 30px 0 0 0;
}

.cw-form label {
    font-family: "Open Sans", sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 2px;
}

.cw-form hr {
    border-color: #ffffff;
    opacity: 0.25;
}

.cw-form .form-group {
    margin-bottom: 45px;
}

.cw-form .form-control {
    width: 100%;
    font-size: 0.7em;
    color: #ffffff;
    background: none;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid #808080;
    border-radius: 0;
    box-shadow: none !important;
}

.cw-form .form-control:focus {
    border-color: #56a0d5;
}

.cw-form textarea {
    height: 65px;
}

.cw-form select {
    color: #999999;
}

.cw-form select option {
    color: #555555;
}

.cw-form .captcha {
    margin: 0 0 10px 0;
}

.cw-form span.required {
    font-family: "Times New Roman";
    font-size: 14px;
    line-height: 1;
    color: #c31e2c;
}

.cw-form .buttons .btn {
    margin: 0;
}

.cw-form .note {
    color: #808080;
    margin-left: 15px;
}

span.wpcf7-not-valid-tip {
    font-size: 11px;
    margin-top: 5px;
}

.cw-form .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*HAMBURGER
--------------------------------------------------*/
.btn-mobile {
    height: 100%;
    padding: 10px 0 10px 10px;
    margin-left: 20px;
    border-left: 1px solid #e2e2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 3s;
}

.btn-mobile i {
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    margin-right: 10px;
    position: relative; top: 0px;
    transition: all 0.3s ease-in-out
}

.btn-mobile:hover i {
    color: #fec730;
}

.cw-mobile-nav {
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    position: fixed; left: 0; top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.cw-mobile-nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.cw-mobile-nav ul li {
    text-align: center;
    color: #ffffff;
    list-style: none;
    padding: 10px 0;
}

.cw-mobile-nav ul li a {
    font-size: 2em;
    color: #ffffff;
}

.cw-mobile-nav ul li a:hover,
.cw-mobile-nav ul li.current-menu-item a {
    color: #fec730;
}

.cw-mobile-nav .navigation {
    margin-bottom: 30px;
}

.cw-mobile-nav .social a {
    margin: 0 5px;
}


.cw-mobile-nav .btn-close {
    font-size: 1.5em;
    color: #ffffff;
    position: fixed; right: 15px; top: 25px;
    cursor: pointer;
    transition: all 0.3s ease-in-out
}

.cw-mobile-nav .btn-close:hover {
    color: #fec730;
}


/*404
--------------------------------------------------*/
.cw-404 {
    text-align: center;
    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;
}


/*ANIMATION
--------------------------------------------------*/
/* .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    opacity: 0;
} */


@media handheld, only screen and (max-width: 1200px) {
    body {
        font-size: 15px
    }

    h1 { font-size: 2.5em; }
    h2 { font-size: 2.5em; }
	
	
	/*HEADER (960)
    --------------------------------------------------*/  
    header .navi ul {
        margin: 0 0 2px 0;
    }
	
	header .navi ul li {
		margin-left: 25px;
	}
	
	header .navi ul li.social {
    	margin-left: 20px;
	}
}


@media (min-width: 768px) and (max-width: 979px) {
    body {
        font-size: 14px
    }

    h1 { font-size: 2.2em; }
    h2 { font-size: 2.2em; }

    .cw-btn-lg {
        height: 40px;
        font-size: 13px;
        padding: 0 25px 0 15px;
    }

    /*HEADER (Tablets)
    --------------------------------------------------*/
    header {
        padding-top: 40px;
    }

    header .logo img {
        margin-bottom: 3px;
    }
    
    header .banner h1 {
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 767px) {
    body {
        font-size: 13px
    }

    h1 { font-size: 2.2em; }
    h2 { font-size: 2.2em; }

    .cw-btn-lg {
        height: 40px;
        font-size: 13px;
        padding: 0 25px 0 15px;
    }


    /*HEADER (Mobile Landscape)
    --------------------------------------------------*/
    header {
        height: auto;
        padding-top: 30px;
    }

    header .flex {
        flex-wrap: wrap;
    }

    header .flex .left {
        width: 100%;
        align-items: center;
        justify-content: center;
        margin-bottom: 45px;
    }

    header .flex .right {
        align-items: center;
    }

    .home header .flex {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .home header .flex .left {
        width: 100%;
        padding: 0 30px 30px 30px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home header .flex .left img {
        max-width: 200px;
    }
    
    .home header .flex .right {
        width: 100%;
        text-align: center;
        padding: 30px;
    }


    /*NAVIGATION (Mobile Landscape)
    --------------------------------------------------*/
    header .navi ul {
        flex-direction: column;
        align-items: center;
    }

    header .navi ul li {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }

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

    .cw-introduction .container {
        padding: 0;
    }

    .cw-introduction .heading {
        padding: 0 15px;
    }

    .cw-introduction .who {
        margin: 0 -0 40px 0;
        flex-direction: column;
    }

    .cw-introduction .who .left,
    .cw-introduction .who .right {
        width: 100%;
        text-align: left;
    }

    .cw-introduction .services .item {
        padding: 15px;
    }

    .cw-introduction .services .item .content {
        padding: 4% !important
    }


    /*SERVICES (Mobile Landscape)
    --------------------------------------------------*/
    .cw-services .col-sm-4,
    .cw-services .col-sm-6 {
        margin-bottom: 60px;
    }


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

    /*CONTACT (Mobile Landscape)
    --------------------------------------------------*/
    .cw-contact {
        text-align: center;
        flex-wrap: wrap;
    }

    .cw-contact .left {
        width: 100%;
        padding: 0;
    }

    .cw-contact .right {
        width: 100%;
    }

    .cw-contact ul.info li {
        background-position: center top !important;
        padding: 30px 0 0 0;
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 480px) {
    body {
        font-size: 13px
    }

    .cw-introduction .services .item .image {
        width: 100%;
        padding: 0 15px;
    }
    
    .cw-introduction .services .item .image img {
        max-width: 150px;
    }

    .cw-introduction .services .item .content {
        width: 100%;
    }
}