/*
Theme Name: Watchtower Consultants
Author: subLoft
Author URI: http://www.subLoft.com/
*/

* {margin:0; padding:0; border:none;}
body {background-color:#ccc; font-family:"Montserrat","Helvetica Neue", Helvetica, Arial, sans-serif; color:#404040;}

#nav, h1, #main h2, #footer .wrapper li a {font-family:"Montserrat";}
#sidebar li a, #footer h2 {font-family:"Rokkitt";}

#header {height:120px; background-color:#2e4252;}
#header .wrapper {width:100%; max-width:800px; margin:0 auto;}
#nav {float:right; margin-top:74px; font-size:13px; font-weight:normal;}
#nav ul {list-style:none; margin:0; padding:0;}
#nav li {display:inline; margin-left:25px; text-transform:uppercase; letter-spacing:2px; position:relative;}
#nav li a {color:#ccc; text-decoration:none; font-weight:normal; display:inline-block; padding:5px 0;}
#nav li a:hover {color:#fff;}

#nav li.current_page_item > a, 
#nav li.current_page_ancestor > a, 
#nav li.current-menu-item > a, 
#nav li.current-menu-ancestor > a {
    color:#fff; 
    font-weight:bold;
}

body #nav .menu-item > .cufon-canvas
{display:none !important;}
/* Dropdown Submenu Styles */
#nav ul ul {
    position:absolute;
    top:23px;
    left:-15px;
    background:#2e4252;
    min-width:180px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:all 0.3s ease;
    z-index:1000;
    box-shadow:0 18px 20px -7px rgba(0,0,0,0.3);
}

#nav ul ul li {
    display:block;
    margin:0;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

#nav ul ul li:last-child {
    border-bottom:none;
}

#nav ul ul li a {
    display:block;
    padding:12px 15px;
    color:#ccc;
    font-size:12px;
    text-transform:none;
    letter-spacing:1px;
    transition:background-color 0.3s ease;
}

#nav ul ul li a:hover {
    color:#fff;
    font-weight: bold;
}

#nav li:hover > ul {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display:none;
    background:none;
    border:none;
    color:#ccc;
    font-size:18px;
    cursor:pointer;
    padding:10px;
    margin-top: 14px;
    float:right;
}

.mobile-menu-toggle:hover {
    color:#fff;
}

.mobile-menu-toggle span {
    display:block;
    width:25px;
    height:3px;
    background:#ccc;
    margin:5px 0;
    transition:0.3s;
}

.mobile-menu-toggle:hover span {
    background:#fff;
}

#banner {height:300px; background:#f3f3f3 url(img/banner.jpg) center no-repeat;}
#banner .wrapper {width:100%; max-width:800px; margin:0 auto;}
#banner h1 {padding:80px 0 40px 0; text-align:right; font-weight:normal; font-size:30px; line-height:40px; text-transform:uppercase; letter-spacing:2px; margin-left:3s00px;}

#logo {margin-top:45px; float:left; height:43px; width:320px; background:url(img/watchtower-consultants-logo.png); text-indent:-9999px;}
#logo a {display:block; height:43px; width:320px;}

#content {background:#f3f3f3 url(img/divider.jpg) top center no-repeat; padding:40px 0 20px 0;}
#content .wrapper {width:100%; max-width:800px; margin:0 auto;}
#content #main p, #content #main ul, #content #main ol {font-size:14px; line-height:21px; margin-bottom:21px;}
#content #main ul, #content #main ol {margin-left:13px;}
#content p:first-child {margin-top:10px;}
#content h2 {color:#2e4252; margin:0 0 20px 0; text-transform:uppercase; letter-spacing:2px; font-weight:normal; font-size:20px; line-height:27px;}
#content h3 {color:#2e4252; font-size:16px; margin-bottom:5px;}
#content #main a {color:#2e4252; text-decoration:underline;} 

.home #content {background:#f3f3f3 url(img/homepage.jpg) top center no-repeat; height:560px; padding:0;}
.home #content #main h1 {margin-left:240px; padding:80px 0 40px 0; font-weight:normal; text-align:right; font-size:30px; line-height:40px; text-transform:uppercase; letter-spacing:2px;}
.home #content #main p {margin-left:260px; text-align:right;}
.home #content #main p {font-size:16px; line-height:30px; color:#595959; font-weight:normal;} 

#main {float:right; width:560px; z-index:2;}

#sidebar {float:left; width:140px; margin-top:-5px;}
#sidebar ul {margin-top:10px;}
#sidebar li, .contact #sidebar li.current_page_item {list-style-type:none; display:none;}
#sidebar li.current_page_ancestor, #sidebar li.current_page_ancestor li, #sidebar li.current_page_item, #sidebar li.current_page_item li {display:inherit;}
#sidebar li a {color:#333; text-decoration:none; font-size:27px; text-transform:lowercase; font-style:normal;}
#sidebar li a:hover {color:#2e4252; font-weight:bold;}
#sidebar ul li {margin-bottom:10px;}
#sidebar ul li a {font-size:17px; line-height:16px; font-style:italic; font-weight:300;}
.methodology #sidebar ul li a, .about #sidebar ul li a {font-size:21px;}
#sidebar li.current_page_item a {color:#2e4252;}
#sidebar ul li.current_page_item a {font-weight:bold;}

#footer {height:80px; background-color:#2e4252;}
#footer .wrapper {width:100%; max-width:800px; margin:0 auto;}
#footer .wrapper h2 {float:left; height:80px; line-height:75px; font-style:italic; color:#fff; text-shadow:1px 1px #000; text-transform:none;}
#footer .wrapper li {float:right; height:18px; line-height:18px; margin-top:31px; font-style:normal; text-transform:uppercase; color:#fff; letter-spacing:2px; list-style-type:none;}
#footer .wrapper li a {display:block; color:#ccc; background:url(img/plus.png) right 0 no-repeat; padding-right:25px; font-size:13px; text-decoration:none;}
#footer .wrapper li a:hover {color:#fff; background:url(img/plus.png) right -18px no-repeat;}

#copyright .wrapper {font-size: 11px; width:100%; max-width:800px; margin:20px auto; color:#595959;}

.clear {clear:both; height:0; line-height:0; font-size:0; overflow:hidden;}

#methodology {width:580px; margin-left:-5px;}
#content #main #methodology ul {height:110px; margin:0 0 20px 0;}
#methodology ul li {list-style-type:none; display:inline; width:110px; height:110px; margin:0; padding:0; background-image:none;}
#methodology ul li a {background-image:url(img/methodology.png); float:left; width:110px; height:110px; text-indent:-9999px; margin-right:5px;}
#methodology ul li.discover a, #methodology ul.active li.discover a {background-position:0px 0px;}
#methodology ul li.discover a:hover {background-position:0px -110px;}
#methodology ul li.discover a.active {background-position:0px -220px;}
#methodology ul li.design a, #methodology ul.active li.design a {background-position:-115px 0px;}
#methodology ul li.design a:hover {background-position:-115px -110px;}
#methodology ul li.design a.active {background-position:-115px -220px;}
#methodology ul li.develop a, #methodology ul.active li.develop a {background-position:-230px 0px;}
#methodology ul li.develop a:hover {background-position:-230px -110px;}
#methodology ul li.develop a.active {background-position:-230px -220px;}
#methodology ul li.deploy a, #methodology ul.active li.deploy a {background-position:-345px 0px;}
#methodology ul li.deploy a:hover {background-position:-345px -110px;}
#methodology ul li.deploy a.active {background-position:-345px -220px;}
#methodology ul li.assess a, #methodology ul.active li.assess a {background-position:-460px 0px;}
#methodology ul li.assess a:hover {background-position:-460px -110px;}
#methodology ul li.assess a.active {background-position:-460px -220px;}

/* Mobile Navigation Styles */
@media screen and (max-width: 981px) {

    #header {
        height:80px; 
    }

    #header .wrapper {
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }
    
    #logo {
        margin-top: 20px;
        width: 270px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    .mobile-menu-toggle {
        display:block;
    }
    
    #nav {
        display:none;
        position:absolute;
        top:125px;
        left:0;
        right:0;
        background:#2e4252;
        margin:0;
        padding:0;
        z-index:999;
        box-shadow:0 5px 15px rgba(0,0,0,0.3);
    }
    
    #nav.mobile-open {
        display:block;
    }
    
    #nav ul {
        flex-direction:column;
    }
    
    #nav li {
        display:block;
        margin:0;
        border-bottom:1px solid rgba(255,255,255,0.1);
    }
    
    #nav li:last-child {
        border-bottom:none;
    }
    
    #nav li a {
        display:block;
        padding:15px 20px;
        color:#ccc;
        border:none;
    }
    
    #nav li a:hover {
        background:#1a2832;
        color:#fff;
    }
    
    /* Mobile Submenu Styles */
    #nav ul ul {
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        background:#1a2832;
        box-shadow:none;
        min-width:auto;
    }
    
    #nav ul ul li a {
        padding-left:20px;
        font-size:11px;
    }
    
    /* Content Area Responsive Styles */
    #banner .wrapper,
    #content .wrapper,
    #footer .wrapper,
    #copyright .wrapper {
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }
    
    #banner {
        height:200px;
        background-size:cover;
        background-position:center;
    }
    
    #banner h1 {
        padding:40px 0 20px 0;
        margin-left:0;
        font-size:24px;
        line-height:30px;
    }
    
    #content {
        padding:20px 0;
    }
    
    /* Main Content and Sidebar Layout */
    #main {
        float:none;
        width:100%;
        margin-bottom:30px;
    }
    
    #sidebar {
        float:none;
        width:100%;
        margin-top:0;
        padding-top:0px;
        border-top:none;
    }
    
    #sidebar li a {
        font-size:20px;
    }
    
    #sidebar ul li a {
        font-size:16px;
    }
    
    /* Footer Responsive */
    #footer {
        height:auto;
        padding:20px 0;
    }
    
    #footer .wrapper h2 {
        float:none;
        height:auto;
        line-height:normal;
        text-align:center;
        margin-bottom:15px;
    }
    
    #footer .wrapper li {
        float:none;
        margin:10px 0;
        text-align:center;
        height:auto;
        line-height:normal;
    }

    #content .wrapper {
        display: flex;
        flex-flow: column;
        flex-direction: column-reverse;
    }
    
    /* Home Page Specific */
    .home #content {
        height:auto;
        padding:40px 0 0;
    }
    
    .home #content #main h1 {
        margin-left:0;
        text-align:center;
        padding:20px 0;
        font-size:22px;
        line-height:28px;
    }
    
    .home #content #main p {
        margin-left:0;
        text-align:center;
        font-size:14px;
        line-height:24px;
    }

    .home #main{
        background-color: #ffffff9c;
        padding: 20px;
        width: 90%;
        margin-top: 260px;
    }
    .home #content {
        background: #f3f3f3 url(img/homepage.jpg) 20% 0 no-repeat;
        background-size: cover;
    }
    
    /* Methodology Section */
    #methodology {
        width:100%;
        margin-left:0;
    }
    
    #content #main #methodology ul {
        height:auto;
        text-align:center;
    }
    
    #methodology ul li {
        display:inline-block;
        margin-bottom:10px;
    }
    
    #methodology ul li a {
        margin:0 auto;
        display:block;
        width:110px;
        height:110px;
    }
}

@media screen and (max-width: 480px) {
    #header .wrapper {
        padding:0 15px;
    }
    
    #logo {
        margin-top: 20px;
        width: 220px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    /* Content Area Adjustments */
    #banner .wrapper,
    #content .wrapper,
    #footer .wrapper,
    #copyright .wrapper {
        padding:0 15px;
    }
    
    #banner {
        height:150px;
    }
    
    #banner h1 {
        font-size:18px;
        line-height:24px;
        padding:30px 0 15px 0;
    }
    
    #content h2 {
        font-size:18px;
        line-height:24px;
    }
    
    #content #main p,
    #content #main ul,
    #content #main ol {
        font-size:14px;
        line-height:21px;
    }
    
    #sidebar li a {
        font-size:18px;
    }
    
    #sidebar ul li a {
        font-size:14px;
    }
    
    .home #content #main h1 {
        font-size:20px;
        line-height:26px;
    }
    
    .home #content #main p {
        font-size:14px;
        line-height:21px;
    }
}