/****** FILE: themes/dranuya/css/editor.css *****/
/**
 * This support file is used to style the WYSIWYG editor in the CMS
 */
@import "typography.css";
body.mceContentBody{font-size:16px;line-height: 1.2em;font-family: 'Libre Franklin', sans-serif;}
body.mceContentBody p{padding-bottom: 0px;font-family: 'Libre Franklin', sans-serif;}
body.mceContentBody h1, body.mceContentBody h2, body.mceContentBody h3, body.mceContentBody h4{font-family: 'Playfair Display', serif; line-height: 1.2em; }

/****** FILE: themes/dranuya/css/slicknav.css *****/
/*!
 * SlickNav Responsive Mobile Menu v1.0.3
 * (c) 2015 Josh Cope
 * licensed under MIT
 */
.slicknav_menu {
    display:none;
}

@media screen and (max-width: 890px) {
    .js #menu {
        display:none;
    }

    .js .slicknav_menu {
        display:block;
    }
}
.slicknav_btn {
    position: relative;
    display: block;
    vertical-align: middle;
    float: right;
    padding: 0.438em 0.625em 0.438em 0.625em;
    line-height: 1.125em;
    cursor: pointer; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: 0.188em; }

.slicknav_menu {
    *zoom: 1; }
.slicknav_menu .slicknav_menutxt {
    display: block;
    line-height: 1.188em;
    float: left; }
.slicknav_menu .slicknav_icon {
    float: left;
    margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text {
    margin: 0; }
.slicknav_menu .slicknav_icon-bar {
    display: block;
    width: 1.125em;
    height: 0.125em;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_menu:before {
    content: " ";
    display: table; }
.slicknav_menu:after {
    content: " ";
    display: table;
    clear: both; }

.slicknav_nav {
    clear: both; }
.slicknav_nav ul {
    display: block; }
.slicknav_nav li {
    display: block; margin-bottom:30px; }
.slicknav_nav .slicknav_arrow {
    margin: 0px 0 0 0.4em; }
.slicknav_nav .slicknav_arrow img{
    margin: -4px 0px 0px 0px; }
.slicknav_nav .slicknav_item {
    cursor: pointer; }
.slicknav_nav .slicknav_item a {
    display: inline; }
.slicknav_nav .slicknav_row {
    display: block; }
.slicknav_nav a {
    display: block; }
.slicknav_nav .slicknav_parent-link a {
    display: inline; }

.slicknav_brand {
    float: left; }

.slicknav_menu {
    font-size: 16px;
    box-sizing: border-box;

}
.slicknav_menu * {
    box-sizing: border-box; }
.slicknav_menu .slicknav_menutxt {
    display:none;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 3px #000; }
.slicknav_menu .slicknav_icon-bar {
    display:none;
    background-color: #fff; }

.slicknav_btn {
    margin: 30px 20px;
    text-decoration: none;
    background:url(../images/menu_icon.png) no-repeat; 
    width:38px; 
    height:25px;}

.slicknav_nav {
    color: #fff;
    margin: 0 0 0;
    padding: 0 20px;
    font-size: 0.875em;
    list-style: none;
    position:relative; }
.slicknav_nav ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
}

.slicknav_nav .slicknav_row {

}
.slicknav_nav .slicknav_row:hover {
}
.slicknav_nav a {
	text-decoration: none;
    font-size:22px; 
    color:#000;
    font-weight: 700; 
    text-transform:uppercase; 
     }
.slicknav_nav a:hover {
    color:#35236a;
}
.slicknav_nav li.active a.submenu, .slicknav_nav li.active > a {
    color:#35236a;
}
.slicknav_nav .slicknav_txtnode {
    margin-left: 15px; }
.slicknav_nav .slicknav_item a {
    padding: 0;
    margin: 0; }
.slicknav_nav .slicknav_parent-link a {
    padding: 0;
    margin: 0; }

.slicknav_brand {
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    padding: 7px 12px;
    height: 44px; }


/****** FILE: themes/dranuya/css/style.css *****/
@charset "utf-8";
/* CSS Document */
/* Site Colours start
drpurple {color:#662f8e;}
drpurpledark {color:#330072;}
drpurplegrey {color:#556e79;}
drpurplegreydark {color:#36444a;}
drpurplegreylight {color:#e6eaec;}
Site Colours  end */

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
:before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
body {
    margin:0;
    padding:0;
    font-family: 'Libre Franklin', sans-serif; font-weight:400;
}
:focus {
    outline:none;
}
ul, li, ol {
    list-style:none;
}
a {
    text-decoration:none;
    color:inherit;	
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
a:active, a:hover {
    outline: 0;
}
a img, img {
    border:none;
    vertical-align:middle;	
    max-width: 100%;
    height: auto;
}
h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
button {
    overflow: visible;
}
button, select {
    text-transform: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
input {
    line-height: normal;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    border:none;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
input[type="search"], input[type="text"], input[type="email"], input[type="password"], textarea {
    padding:0 10px;
    border:1px solid #ccc;
    -webkit-appearance: textfield;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
}
textarea {
    padding:10px;
    resize:none;
    overflow: auto;	
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
td, th {
    padding: 0;
}
input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
    -webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 2px rgba(0,0,0,0.2);
    box-shadow:0 0 2px rgba(0,0,0,0.2);
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.relative {
    position:relative;
}
.menu-icon {
    display:none;
    border:1px solid #ddd;	
    padding:9px 10px;
    background-color:transparent;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}
.menu-icon:hover { background-color:#ddd;}
.menu-icon span {
    display:block;
    background-color:#888;
    height:2px;
    width:22px;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
}
.menu-icon span + span { 
    margin-top:4px;
}
.clearfix {}
.clearfix:before, .clearfix:after {
    display:table;
    content:"";
}
.clearfix:after {
    clear:both;
}
.container {
    width:1221px;
    margin:0 auto;	
}
.container:before, .container:after {
    display:table;
    content:" ";
}
.container:after {
    clear:both;
}

body { padding-top:130px;}
#header { background:#fff; position:fixed; left:0; top:0; width:100%; z-index:99999999;
          -webkit-transition: all 0.6s ease-in-out;
          -moz-transition: all 0.6s ease-in-out;
          -o-transition: all 0.6s ease-in-out;
          transition: all 0.6s ease-in-out;}
#header .header {}
#header .header .logo { float:left; padding:25px 0 21px 37px;
                        -webkit-transition: all 0.6s ease-in-out;
                        -moz-transition: all 0.6s ease-in-out;
                        -o-transition: all 0.6s ease-in-out;
                        transition: all 0.6s ease-in-out;}
#header .header .logo img{max-width: 280px; -webkit-transition: all 0.6s ease-in-out;
                          -moz-transition: all 0.6s ease-in-out;
                          -o-transition: all 0.6s ease-in-out;
                          transition: all 0.6s ease-in-out;}
                          
#nav { float:right; padding:100px 30px 0 0;
       -webkit-transition: all 0.6s ease-in-out;
       -moz-transition: all 0.6s ease-in-out;
       -o-transition: all 0.6s ease-in-out;
       transition: all 0.6s ease-in-out;}
       

#header.fixed .header .logo { 
    padding:10px 0 10px 37px; 
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
#header.fixed .header .logo img{max-width: 100px; -webkit-transition: all 0.3s ease-in-out;
                          -moz-transition: all 0.3s ease-in-out;
                          -o-transition: all 0.3s ease-in-out;
                          transition: all 0.3s ease-in-out;}
#header.fixed #nav { padding:30px 20px 0 0;}

#nav ul {}
@media (min-width: 768px) {	
    #nav > ul > li { display:block;	float:left;	position:relative;}
    #nav > ul > li + li { margin-left:25px;}
    #nav > ul > li > a { display:block; font-size:15px; text-transform:uppercase; padding-bottom:25px; font-family: 'Libre Franklin', sans-serif; font-weight:700; position:relative;}
    #nav > ul > li > a.submenu {}
    #nav > ul > li > a.submenu:after { width:30px; height:8px; position:absolute; left:50%; margin-left:-15px; bottom:-8px; content:" "; z-index:9999;}
    #nav > ul > li:hover > a { color:#662f8e;}
    #nav > ul > li.section > a, #nav > ul > li.current > a { color:#662f8e;}


    /* Drop Down */
    #nav ul li ul { display:none; width:220px; position:absolute; left:-10px; top:100%; z-index:999; background:#fff; 
                    -webkit-transition: all 0.6s ease-in-out;
                    -moz-transition: all 0.6s ease-in-out;
                    -o-transition: all 0.6s ease-in-out;
                    transition: all 0.6s ease-in-out;                


    }
    #nav ul li ul:after { width:100%; height:11px; position:absolute; bottom:-11px; content:" ";}

    #nav ul li:hover > ul { display:block; }

    #nav ul li ul li { float:none; }
    #nav ul li ul li a { color:#000; display:block; padding:10px; font-size:15px; text-transform:uppercase; font-family: 'Libre Franklin', sans-serif; font-weight:700; }
    #nav ul li ul li a:hover { color:#739423;}
    #nav > ul > li > a ul > li.section > a, #nav > ul > li > ul > li.current > a { color:#739423;}
    #nav ul li ul li ul { left:100%; top:0;}
}
/* Drop Down */

#grid {}
.anchor { margin-top:-300px;position:relative;}
#grid .box { float:left; width:33.33%; padding-bottom:33.33%; position:relative;}
#grid .box a { display:block;  position:absolute; width:100%; left:0; top:0; height:100%;}

#grid .box_1 {}
#grid .box_1 { background:#662F8E; position:relative;}
#grid .box_1 a { padding:0 40px;  }
#grid .box_1 a:hover { background:#000;}
#grid .box_1 a .data { position:absolute; top:50%; 
                       -webkit-transform: translateY(-50%);
                       -ms-transform: translateY(-50%);
                       transform: translateY(-50%);
}
#grid .box_1 a h3 { font-size:20px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:400; text-transform:uppercase; display:block;}
#grid .box_1 a p { font-family: 'Libre Franklin', sans-serif;font-weight:300; font-size:36px; color:#fff; line-height:48px; padding:25px 0 25px; max-width:425px;}
#grid .box_1 a i { font-size:18px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:400; font-style:normal;}

#grid .box_2 {}
#grid .box_2 { background-repeat: no-repeat; background-position: center center; background-size:cover; position:relative; width:66.66%;}
#grid .box_2 a .hover { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); text-align:center; visibility:hidden; opacity:0;
                        -webkit-transition: all 0.6s ease-in-out;
                        -moz-transition: all 0.6s ease-in-out;
                        -o-transition: all 0.6s ease-in-out;
                        transition: all 0.6s ease-in-out;

}
#grid .box_2 a:hover .hover { visibility:visible; opacity:1;}
#grid .box_2 a .hover .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                              -ms-transform: translateY(-50%);
                              transform: translateY(-50%); width:100%; }
#grid .box_2 a .hover h3 { font-size:28px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:300; text-transform:uppercase; display:block; padding-bottom:35px;}
#grid .box_2 a .hover p { font-family: 'Libre Franklin', sans-serif;font-weight:400; font-size:36px; color:#fff; padding:0; max-width:678px; margin:0 auto;}

/* Box_3 is a HALF VERT SPLIT */
#grid .box_3 {}
#grid .box_3 .left { background:#330072; position:absolute; left:0; top:0; width:50%; height:100%;
                     -webkit-transition: all 0.6s ease-in-out;
                     -moz-transition: all 0.6s ease-in-out;
                     -o-transition: all 0.6s ease-in-out;
                     transition: all 0.6s ease-in-out;}
#grid .box_3 .left .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                           -ms-transform: translateY(-50%);
                           transform: translateY(-50%); padding:0 30px;}
#grid .box_3 .left .data h3 { font-size:20px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:900; text-transform:uppercase; display:block;
                                -webkit-transition: all 0.6s ease-in-out;
                                -moz-transition: all 0.6s ease-in-out;
                                -o-transition: all 0.6s ease-in-out;
                                transition: all 0.6s ease-in-out;}
#grid .box_3 .left .data p { font-family: 'Libre Franklin', sans-serif;font-weight:300; font-size:30px; color:#fff; padding:25px 0 35px; max-width:308px;}
#grid .box_3 .left .data i { font-size:18px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:900; font-style:normal;
                             -webkit-transition: all 0.6s ease-in-out;
                             -moz-transition: all 0.6s ease-in-out;
                             -o-transition: all 0.6s ease-in-out;
                             transition: all 0.6s ease-in-out;}
#grid .box_3 a:hover .left { background:#662F8E;}
#grid .box_3 a:hover .left .data h3 { color:#fff;}
#grid .box_3 a:hover .left .data i { color:#fff;}
#grid .box_3 .right { position:absolute; right:0; top:0; bottom:0; width:50%; background-repeat: no-repeat; background-position: center center; background-size:100% 100%;}

/* Box_4 is a FULL IMAGE */
#grid .box_4 {}
#grid .box_4 { background-repeat: no-repeat; background-position: center center; background-size:100% 100%; position:relative;}
#grid .box_4 a .hover { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); text-align:center; visibility:hidden; opacity:0;
                        -webkit-transition: all 0.6s ease-in-out;
                        -moz-transition: all 0.6s ease-in-out;
                        -o-transition: all 0.6s ease-in-out;
                        transition: all 0.6s ease-in-out;
}
#grid .box_4 a:hover .hover { visibility:visible; opacity:1;}
#grid .box_4 a .hover .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                              -ms-transform: translateY(-50%);
                              transform: translateY(-50%); width:100%; }
#grid .box_4 a .hover h3 { font-size:20px; color:#fff;font-family: 'Playfair Display', serif; font-weight:900; text-transform:uppercase; display:block; padding-bottom:35px;}
#grid .box_4 a .hover p { font-family: 'Libre Franklin', sans-serif;font-weight:300; font-size:30px; color:#fff; padding:0 20px; max-width:578px; margin:0 auto;}

/* Box_3 is a HALF HORZ SPLIT-TEXT TOP */
#grid .box_5 {}
#grid .box_5 .top { background:#000; position:absolute; left:0; top:0; width:100%; height:50%;
                    -webkit-transition: all 0.6s ease-in-out;
                    -moz-transition: all 0.6s ease-in-out;
                    -o-transition: all 0.6s ease-in-out;
                    transition: all 0.6s ease-in-out;
}
#grid .box_5 a:hover .top { background:#344803;}
#grid .box_5 .top .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                          -ms-transform: translateY(-50%);
                          transform: translateY(-50%); padding:0 30px;}
#grid .box_5 .top .data h3 { font-size:20px; color:#b4d560;    font-family: 'Libre Franklin', sans-serif; font-weight:400; text-transform:uppercase; display:block;
                               -webkit-transition: all 0.6s ease-in-out;
                               -moz-transition: all 0.6s ease-in-out;
                               -o-transition: all 0.6s ease-in-out;
                               transition: all 0.6s ease-in-out;
}
#grid .box_5 a:hover .top .data h3 { color:#fff;}

#grid .box_5 .top .data p { font-family: 'Playfair Display', serif;font-weight:400; font-size:30px; color:#fff; padding:30px 0; max-width:100%;}
#grid .box_5 .top .data i { font-size:18px; color:#b4d560;    font-family: 'Libre Franklin', sans-serif; font-weight:400; font-style:normal;
                            -webkit-transition: all 0.6s ease-in-out;
                            -moz-transition: all 0.6s ease-in-out;
                            -o-transition: all 0.6s ease-in-out;
                            transition: all 0.6s ease-in-out;
}
#grid .box_5 a:hover .top .data i { color:#fff;}
#grid .box_5 .bot { position:absolute; left:0; bottom:0; height:50%; width:100%; background-repeat: no-repeat; background-position: center center; background-size:100% 100%;}

/* Box_3 is a HALF HORZ SPLIT-IMAGE TOP */
#grid .box_6 {}
#grid .box_6 .top { position:absolute; left:0; top:0; height:50%; width:100%; background-repeat: no-repeat; background-position: center center; background-size:100% 100%;}
#grid .box_6 .bot { background:#556e79; position:absolute; left:0; bottom:0; width:100%; height:50%;
                    -webkit-transition: all 0.6s ease-in-out;
                    -moz-transition: all 0.6s ease-in-out;
                    -o-transition: all 0.6s ease-in-out;
                    transition: all 0.6s ease-in-out;}
#grid .box_6 .bot .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                          -ms-transform: translateY(-50%);
                          transform: translateY(-50%); padding:0 30px;}
#grid .box_6 .bot .data h3 { font-size:20px; color:#fff;    font-family: 'Playfair Display', serif; font-weight:400; text-transform:uppercase; display:block;
                               -webkit-transition: all 0.6s ease-in-out;
                               -moz-transition: all 0.6s ease-in-out;
                               -o-transition: all 0.6s ease-in-out;
                               transition: all 0.6s ease-in-out;
}


#grid .box_6 .bot .data p { font-family: 'Libre Franklin', sans-serif;font-weight:300; font-size:30px; color:#fff; padding:30px 0; max-width:100%;}
#grid .box_6 .bot .data i { font-family: 'Playfair Display', serif;font-size:18px; color:#fff;   font-weight:900; font-style:normal;
                            -webkit-transition: all 0.6s ease-in-out;
                            -moz-transition: all 0.6s ease-in-out;
                            -o-transition: all 0.6s ease-in-out;
                            transition: all 0.6s ease-in-out;
}
#grid .box_6 a:hover .bot  { background:#36444a;}
#grid .box_6 a:hover .bot .data h3 { color:#fff;}
#grid .box_6 a:hover .bot .data i { color:#fff;}

#grid .box_7 {}
#grid .box_7 { background-repeat: no-repeat; background-position: center center; background-size:100% 100%; position:relative;}

#grid .box_8 {}
#grid .box_8 .left { background:#000; position:absolute; left:0; top:0; width:50%; height:100%;
                     -webkit-transition: all 0.6s ease-in-out;
                     -moz-transition: all 0.6s ease-in-out;
                     -o-transition: all 0.6s ease-in-out;
                     transition: all 0.6s ease-in-out;}
#grid .box_8 .left .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                           -ms-transform: translateY(-50%);
                           transform: translateY(-50%); padding:0 30px;}
#grid .box_8 .left .data h3 { font-size:20px; color:#b4d560;    font-family: 'Libre Franklin', sans-serif; font-weight:400; text-transform:uppercase; display:block;
                                -webkit-transition: all 0.6s ease-in-out;
                                -moz-transition: all 0.6s ease-in-out;
                                -o-transition: all 0.6s ease-in-out;
                                transition: all 0.6s ease-in-out;}
#grid .box_8 .left .data p { font-family: 'Playfair Display', serif;font-weight:400; font-size:30px; color:#fff; padding:25px 0 35px; max-width:308px;}
#grid .box_8 .left .data i { font-size:18px; color:#b4d560;    font-family: 'Libre Franklin', sans-serif; font-weight:400; font-style:normal;
                             -webkit-transition: all 0.6s ease-in-out;
                             -moz-transition: all 0.6s ease-in-out;
                             -o-transition: all 0.6s ease-in-out;
                             transition: all 0.6s ease-in-out;}
#grid .box_8 .right { position:absolute; right:0; top:0; bottom:0; width:50%; background-repeat: no-repeat; background-position: center center; background-size:100% 100%;}

#grid .box_8 a:hover .left  { background:#344803;}
#grid .box_8 a:hover .left .data h3 { color:#fff;}
#grid .box_8 a:hover .left .data i { color:#fff;}


/* Square Image FULL IMAGE for gallery */
#grid .gallery { float:left; width:33.333333%; padding-bottom:30%; position:relative;}
#grid .gallery a { display:block;  position:absolute; width:100%; left:0; top:0; height:100%;}
#grid .imagesquare {}
#grid .imagesquare { background-repeat: no-repeat; background-position: center center; background-size:cover; position:relative;}
/* #grid .imagesquare a .hover { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); text-align:center; visibility:hidden; opacity:0;
                        -webkit-transition: all 0.6s ease-in-out;
                        -moz-transition: all 0.6s ease-in-out;
                        -o-transition: all 0.6s ease-in-out;
                        transition: all 0.6s ease-in-out;
}
#grid .imagesquare a:hover .hover { visibility:visible; opacity:1;}
#grid .imagesquare a .hover .data { position:absolute; top:50%; -webkit-transform: translateY(-50%);
                              -ms-transform: translateY(-50%);
                              transform: translateY(-50%); width:100%; } */
#grid .imagesquare a .hover h3 { font-size:20px; color:#fff;font-family: 'Playfair Display', serif; font-weight:900; text-transform:uppercase; display:block; padding-bottom:35px;}
#grid .imagesquare a .hover p { font-family: 'Libre Franklin', sans-serif;font-weight:300; font-size:30px; color:#fff; padding:0 20px; max-width:578px; margin:0 auto;}
/* Square Image FULL IMAGE for gallery */


#footer { background:url(../images/footer-pattern.jpg) repeat-x center top; background-size: cover;  padding:0; }
#footer .footer_top { min-height:200px; padding:25px 0 40px; }
#footer .footer_top .f_detail { padding:40px 0 15px 0;}
#footer .footer_top .f_detail .f_logo { float:left; line-height:54px;width: 230px;}
#footer .footer_top .f_detail .f_logo img { float:left;width: 176px;}
#footer .footer_top .f_detail .f_logo p { float:left; font-size:14px; color:#fff;  font-family: 'Libre Franklin', sans-serif; font-weight:400;}
#footer .footer_top .f_detail .f_col { float:right; line-height:1.1em;max-width: 300px;padding-top:90px;margin-right:20px;}
#footer .footer_top .f_detail .f_col p { float:left; font-size:14px; color:#fff;  font-family: 'Libre Franklin', sans-serif; font-weight:400;line-height: 24px;}
#footer .footer_top .f_detail .f_col h4 { float:left; font-size:18px; color:#fff;font-weight:900;}
#footer .footer_top .f_detail .f_col a { color:#fff;}
#footer .footer_top .f_detail .f_col a:hover { color:#fff;}

#footer { background:url(../images/footer-pattern.jpg) repeat-x center top; background-size: cover;  padding:0; }
#footer .footer_bottom { background-color: #fff; min-height:100px; padding:15px 0 20px; }
#footer .footer_bottom .f_col { text-align: center; padding:40px 0 15px 0;width: 100%;}
#footer .footer_bottom .f_col a { padding:0px 35px;}


#footer .footer_bot { text-align:center; background:#000; padding:15px 0;}
#footer .footer_bot ul {}
#footer .footer_bot ul li { display:inline-block; line-height:80px; margin:0 35px;}
#footer .footer_bot ul li a {}

#banner { min-height: 298px; padding:100px 0px; margin-bottom:-1px; background: transparent; text-align:center; position:relative;}
#banner.big { min-height: 467px;} 
#banner #bannerText { position:fixed; z-index: -99;max-width:1200px;}
#banner #bannerText h1 { font-size:40px; color:#fff; font-family: 'Playfair Display', serif;font-weight:400; font-style:italic;line-height:44px; }
#banner #bannerText p { max-width:600px; margin:0 auto; text-align:center; font-size:22px; line-height:24px; color:#fff; margin-top:25px; display:block;}


#contact { padding:0px 0;}
#contact .text .half { float:left; width:50%; padding:0 35px; font-size:18px; color:#000;}
#contact .text .half p { font-weight: 400;}
#white p, #white h1, #white h2, #white h3, #white h4, #white h5 { color:#fff;}
#contact .container{ background:url(../images/contact-overlay.png) top center repeat-y;padding:120px 0;min-height: 800px;}


#caption { }
#caption.grey { background-color:#ebeae3;}
#caption.business  { background:#ebeae3; margin-top:-1px;}
#caption h1 { position:absolute; left:0; top:-76px; width:406px; height:77px; line-height:77px; padding:0 40px; font-size:20px; color:#fff; text-transform:uppercase; background:rgba(102,47,142,0.4);}
#caption h1.grey { background:rgba(235,234,227,0.35);}
#caption .text { padding:75px 20px;}
#caption .text .half { float:left; width:50%; padding:0 35px; font-size:18px; color:#535353;}
#caption .text .center_align { text-align:center; max-width:960px; margin:0 auto; font-size:22px; color:#29221e;}
#caption .cols {}
#caption .cols .col { width:33.33%; float:left;}
#caption .cols .col .image {}
#caption .cols .col .image img { width:100%; height:auto;}
#caption .cols .col .image_detail { padding:20px 30px 65px;}
#caption .cols .col .image_detail h4 { font-size:21px; color:#0096c7; text-transform:uppercase; padding-bottom:15px; font-family: 'Libre Franklin', sans-serif; font-weight:700;} 
#caption .cols .col .image_detail h4 a:hover{ color:#004760;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#caption .cols .col .image_detail p { font-size:18px; color:#4c4c4c; font-family: 'Playfair Display', serif;font-weight:400;}

#boxes { background:#ebeae3;}
#boxes .box { width:33.33%; float:left;}
#boxes .box a { display:block; position:relative;}
#boxes .box a img { width:100%; height:auto;}

#boxes .box a .abt { position:absolute; left:0; bottom:35%; text-align:center;z-index:999; width:100%;}
#boxes .box a .abt p { }
#boxes .box a .abt p span { background:rgba(0,0,0,0.5);font-size:24px; color:#fff; display:block; text-transform:uppercase; padding-top:10px;padding-bottom:15px; margin-bottom:-20px;
                            -webkit-transition: all 0.6s ease-in-out;
                            -moz-transition: all 0.6s ease-in-out;
                            -o-transition: all 0.6s ease-in-out;
                            transition: all 0.6s ease-in-out;
} 
#boxes .box a .abt p i { width:80%; text-align: center;margin:0 auto; color:#fff; display:block; font-size:18px; line-height:24px; font-family: 'Playfair Display', serif;font-weight:400; font-style:normal; visibility:hidden; opacity:0; min-height:80px;
                         -webkit-transition: all 0.6s ease-in-out;
                         -moz-transition: all 0.6s ease-in-out;
                         -o-transition: all 0.6s ease-in-out;
                         transition: all 0.6s ease-in-out;
}
#boxes .box a:hover .abt p span { margin:0;}
#boxes .box a:hover .abt p i { visibility:visible; opacity:1;}
#boxes .box a:after { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.5); content:" "; z-index:99; visibility:hidden; opacity:0;
                      -webkit-transition: all 0.6s ease-in-out;
                      -moz-transition: all 0.6s ease-in-out;
                      -o-transition: all 0.6s ease-in-out;
                      transition: all 0.6s ease-in-out}
#boxes .box a:hover:after { visibility:visible; opacity:1;}
#boxes .box .member { position:absolute; left:0; bottom:0;  width:100%; z-index:999; padding:0px 45px 35px 45px; visibility:hidden; opacity:0;
                      -webkit-transition: all 0.6s ease-in-out;
                      -moz-transition: all 0.6s ease-in-out;
                      -o-transition: all 0.6s ease-in-out;
                      transition: all 0.6s ease-in-out;}
#boxes .box a:hover .member { visibility:visible; opacity:1;}
#boxes .box .member h5 { font-family: 'Playfair Display', serif;font-weight:400; font-size:30px; color:#fff;}
#boxes .box .member h6 { font-size:18px; color:#fff;}
#boxes .box .member p { font-size:16px; color:#fff; line-height:22px; padding:25px 0;}
#boxes .box .member span { display:block; font-size:18px; color:#0496c6;}
#boxes .box .member i { display:block; font-style:normal; font-size:18px; color:#0496c6;}


#identity { background:#ebeae3;}
#identity .identity { background:#fff; padding:25px 0 85px;}
#identity .identity .image { float:left; width:50%; text-align:center; padding:100px 70px;}
#identity .identity .image_detail { float:left; width:50%; max-width:515px;}
#identity .identity .image_detail h4 { font-size:28px; color:#080908; font-family: 'Playfair Display', serif;font-weight:400; padding-bottom:15px;}
#identity .identity .image_detail ul {}
#identity .identity .image_detail ul li { font-size:16px; color:#535353; line-height:24px;}
#identity .identity .image_detail ul li + li { padding-top:15px;}
#identity .identity .image_detail ul li span { font-size:24px; color:#535353; font-family: 'Libre Franklin', sans-serif; font-weight:700; font-style:italic;}

#business { background:#000; padding:40px 0;}
#business .box { float:left; width:33.33%; padding:0 30px 55px 30px;}
#business .box h5 { font-size:21px; color:#0096c7; font-family: 'Libre Franklin', sans-serif; font-weight:700; text-transform:uppercase; padding-bottom:35px;}
#business .box h5 a:hover{ color:#fff;-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#business .box p { font-family: 'Playfair Display', serif;font-weight:400; font-size:18px; color:#fff; max-width:355px;}

 

/* PAGE PANELS */
#ImagePanel1 { }
#ImagePanel1 .image { float:left; width:33.33%;}
#ImagePanel1 .image img{ width:100%;}
#ImagePanel1 .image_detail { float:left; width:66.66%; padding:50px 60px;}
#ImagePanel1 .image_detail h1 { color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-size:48px;}
#ImagePanel1 .image_detail p.designation { font-size:18px; color:#020202; font-family: 'Libre Franklin', sans-serif; font-weight:400; padding:10px 0;}
#ImagePanel1 .image_detail p.mail { font-size:18px; color:#0496c6; font-family: 'Libre Franklin', sans-serif; font-weight:400; padding-bottom:15px;} 
#ImagePanel1 .image_detail p.mail a:hover { color:#52b299;}
#ImagePanel1 .image_detail p.slug { font-size:22px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-style:italic; max-width:620px; text-align:center; padding:20px; line-height:36px; background:url(../images/slug-left.png) no-repeat left top, url(../images/slug-right.png) no-repeat right bottom;}
#ImagePanel2 { }
#ImagePanel2 .data { float:right; width:66.66%; padding:0 60px; }
#ImagePanel2 .data p { max-width:620px; font-size:17px; color:#3e3c31; font-family: 'Libre Franklin', sans-serif; font-weight:300; text-align:justify;  }


#ImagePanel3 { }
#ImagePanel3 .image { float:right; width:33.33%;}
#ImagePanel3 .image_detail { float:left; width:66.66%; padding:40px 45px 0;}
#ImagePanel3 .image_detail h2 { color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-size:40px;}
#ImagePanel3 .image_detail p.designation { font-size:18px; color:#020202; font-family: 'Libre Franklin', sans-serif; font-weight:300; padding:10px 0;}
#ImagePanel3 .image_detail p.slug { font-size:22px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-style:italic; padding:10px 0; line-height:36px;}
#ImagePanel3 .image_detail p.data { font-size:17px; color:#3e3c31;} 
#ImagePanel3 .image_detail p.data a { color:#0496c6;}
#ImagePanel3 .image_detail p.data a:hover { color:#52b299;} 

/* Panel BG Colours */
.White { background:#fff;}
.lightGrey { background:#e6eaec;}
.lightPurple { background:#dcd4e2;}
.patternWhite { background: url(../images/patternWhite.gif) repeat left top;}
.patternGrey { background: url(../images/patternGrey.gif) repeat left top;}


/****** FILE: themes/dranuya/css/form.css *****/
/* Custom FORMS Styles */

/* HEADERS */
.typography form h1,
.typography form h2,
.typography form h3,
.typography form h4,
.typography form h5,
.typography form h6 {font-size:28px; font-weight: 700;text-transform: uppercase; margin-bottom: 30px;}
.typography form { border:0px;}
.typography form .inpt_bx { background:#fff; border-radius:0px; padding:0 25px; height:48px; font-size:14px; color:#bec2c4; font-family: 'Libre Franklin', sans-serif; text-transform:uppercase; margin-bottom:20px;}
.typography form .half { float:left;  } 
.typography form .half + .half { float:right; } 
.typography form .full { width:100%; } 
.typography form .sbt { font-size:16px; color:#005333; font-family: 'titillium_bdbold'; padding:0 75px; border:2px solid #fff; line-height:48px; background:none;}
.typography form .sbt:hover { background:#fff; color:#575455;}
/* FORMS  */


.typography fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
.typography form label, .typography form left {
    padding-bottom: 15px;
    font-size: 18px;
    clear: both;
}
.userform left {
    margin-bottom: 10px;

}
.typography form label.right {
        font-size: 12px;
        color: #888;
    }
.typography form .bad label, .typography form .required label{
        display: none;
    }
    
.typography form input.text,
.typography form .textajaxuniquetext,   
.typography form select {width: 100%; background:#fff; border-radius:0px; padding:0 25px; height:48px; font-size:18px; color:#666666; font-family: 'Libre Franklin', sans-serif; margin-bottom:20px;}
.typography form input.text,
.typography form .textajaxuniquetext,   
.typography form select {width: 100%; background:#fff; border-radius:0px; padding:0 25px; height:48px; color:#666666; font-family: 'Libre Franklin', sans-serif; }
.typography .ie7 form select { width: 400px; } 

.typography form .textarea {width:100%; border-radius:0px; font-size:18px; color:#000; font-family: 'Libre Franklin', sans-serif; margin-bottom:5px;}
.typography form textarea {padding:15px 10px 15px 25px;}
.typography form .half { float:left; width:48%; } 
.typography form .half + .half { float:right; } 

.typography form input.text:focus,
.typography form textarea:focus,
.typography form .textajaxuniquetext:focus,
.typography form select:focus {
    outline:none;
}
.typography form input[disabled], form textarea[disabled] {
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}
.typography textarea {
    resize: vertical; /* forces text area to be resized vertically only */
    padding:10px 25px;
}


/* Radio and Checkbox */
.typography .field .checkbox, .typography .field .radio {
    float: left;  
    margin-right: 6px; 
    margin-top: 3px;
    padding: 0 20px 0 0;
    vertical-align: middle;
}
    .typography .checkbox label.right,
    .typography .radio label.right {
        float: left;
        vertical-align: middle;
    }


/* Messages */
.typography form .error, form .required {
        border-color: #cf0000;
        color: #b80000;
		font-size: 14px;
    }

.typography .column2 form .userformsgroup {
    margin-bottom:30px;
}
/* ACTIONS */
.typography .Actions {
    margin: 15px 0;
}
    .typography a.btn, .typography button, .typography input[type="submit"], .typography .Actions .action {
        max-width:291px;display:block; border:2px solid #fff; text-transform: uppercase; background:#662f8e; line-height:61px; text-align:center; padding: 0px 50px; color:#fff; font-weight:400;
    }
    .typography a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover {
        background:#000; color:#fff; border:2px solid #fff;
    }
    .typography a.btn {
        line-height: 18px;
        margin-bottom: 10px;
    }
    .typography a.btn:after {                     /* creates arrow in button */
        content: '\2192';
        padding-left: 10px;
    }
    .typography .ie7 input.action {
        width: 0;                     /* IE table-cell margin fix */
        overflow: visible;
    }
    .typography input.action[class] {             /* IE ignores [class] */
        width: auto;                  /* cancel margin fix for other browsers */
    }

    .typography .ie7 .Actions .action {
        float: left;
    }
    .typography .Actions:after {
        color: #B94A48;
        display: inline-block;
        font-weight: normal;
        margin-top: 9px;
    }
    .typography #MemberLoginForm_LoginForm .Actions:after {
        display: none;
    }


/* AREA SPECIFIC */
    /* LOGIN and FORGOT PASSWORD */
    .typography #Remember {
        min-height: 20px;
    }
    .typography #ForgotPassword {
        clear: left;
    }
    .typography #MemberLoginForm_LostPasswordForm .Actions:after {
        display: none;
    }

    /* Search / Login */
    .typography .header form .middleColumn {
        /* float: none;
        width: 100% !important; */
    }




/* USER DEFINED USER FORM MODULE STYLES
----------------------------------------------- */

/*Generic and mixed*/
.typography .FormHeading {
    clear: both;
    padding-top: 15px;
}
.typography form .date .middleColumn input {
    /*background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;*/
    width: 114px;
}
.typography .Actions input.resetformaction,
.typography .Actions input.action-minor {                  /* Clear button */
    float: left;
    background-color: #888;
}
.typography .Actions input.resetformaction:hover,
.typography .Actions input.action-minor:hover {            /* Clear button */
    background-color: #aaa;
}

/* Labels */
.typography .checkbox label.right {
    font-size: 13px;                            /* reset to default */
    color: #333;                                /* reset to default */
}
.typography form .requiredField label.left:after { /* pseudo element adds an asterisk to a required fields label */
    color: #B94A48;
    content: "*";
    font-size: 14px;
    font-weight: normal;
    padding-left: 3px;
}

/* Radio / Checkbox */
.typography form .checkboxset ul,
.typography form .optionset ul {
    margin: 0;
}
    .typography form .checkboxset li,
    .typography form .optionset li {
        margin-bottom: 5px;
        list-style-type:none;
    }
    .typography form div.checkbox:after { /* clearfix */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .typography form .checkbox .checkbox { clear: both; }

/* Messages */
.typography span.message {
    margin: 10px 0;
    display: block;
    max-width: 390px;
    clear: left;
}

.typography form input.holder-required {        /* This class needs to be changed - is used for both input and div */
    border: 0px solid #cf0000; 
}

/* Error messages */
.typography input:invalid,
.typography textarea:invalid {

}

.typography input:invalid::-webkit-input-placeholder:after {
   content: ' *';
}

.typography input:invalid:-moz-placeholder:after { /* Firefox 18- */
   content: ' *'; 
}

.typography input:invalid::-moz-placeholder:after {  /* Firefox 19+ */
   content: ' *';
}

.typography input:invalid:-ms-input-placeholder:after {  
   content: ' *';
}
.typography .no-boxshadow input:invalid,
.typography .no-boxshadow textarea:invalid {
    background-color: #f0dddd
}



/****** FILE: themes/dranuya/css/typography.css *****/
/* typography */

/* ------------------ Site Colours start------------------ 
drpurple {color:#662f8e;}
drpurpledark {color:#330072;}
drgrey {color:#556e79;}
drgreydark {color:#36444a;}
drgreylight {color:#e6eaec;}
------------------ Site Colours  end ------------------ */

/* ------------------ Google Fonts------------------
font-family: 'Libre Franklin', sans-serif;
------------------ Site Colours  end ------------------ */
.typography .anchor { margin-top:-300px;position:relative;}
.typographycontainer { padding:70px 55px;}
.typography { /* padding:70px 45px;*/}
.typography p { font-size:20px; color:#22201a; font-family: 'Libre Franklin', sans-serif; font-weight:300; line-height:36px; padding-bottom:30px; }
.typography p a { color:#662f8e;}
.typography p a:hover { color:#000;}
.typography #white p a { color:#b4d560;}
.typography #white p a:hover { color:#662f8e;}
.typography img[align=left] { margin-right:25px; }
.typography img[align=right] { margin-left:25px; }
.typography h1 { font-size:48px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography h2 { font-size:40px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography h3 { font-size:32px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography h4 { font-size:26px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography h5 { font-size:20px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography h6 { font-size:14px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:700; padding-bottom:30px;}
.typography table { border-bottom:2px solid #ebeae3;}
.typography table tr {}
.typography table tr:nth-child(2n) { background:#9fb5ba;}
.typography table tr th { background:#330072; padding:15px 18px; color:#fff; font-size:18px; text-align:left; text-transform:uppercase; font-weight:400;     font-family: 'Libre Franklin', sans-serif; font-weight:400;vertical-align: top;}
.typography table tr td { font-size:16px; color:#3e3c31; padding:15px 18px;vertical-align: top;}
.typography ul, 
.typography ol,
.typography dl { margin: 0 0 30px 45px;font-weight:300;  }
.typography ul li { list-style-type: disc;line-height:30px;  }
.typography ol li { list-style-type: decimal;line-height:30px;  }
.typography ol li ol li { margin-bottom: 0px; font-size:18px;}
.typography li { margin-bottom: 10px; font-size:18px;}
.typography p.pullout { font-size:22px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-style:italic; padding:10px 0; line-height:32px;}
.typography p.captiontext { font-size:18px; color:#020202; font-family: 'Libre Franklin', sans-serif; font-weight:300; padding:10px 0;}
#breadcrumb { margin: 30px 15px 15px 40px; }
#breadcrumb p, #breadcrumb p span{ font-family: 'Libre Franklin', sans-serif; font-weight:400;text-transform:uppercase;font-size:16px;}

.typographycontainer p.pullout { font-size:22px; color:#3e3c31; font-family: 'Playfair Display', serif;font-weight:400; font-style:italic; margin:30px 0px;padding:0px 45px; line-height:32px;}

/****** FILE: themes/dranuya/css/responsive.css *****/
@charset "utf-8";
/* CSS Document */

@media (min-width: 991px) and (max-width: 1280px) {
}
@media (max-width: 1600px) {	
    #grid .box_1 a p { font-size:30px; padding:25px 20px 40px 0;line-height:32px; }
    #grid .box_3 .left .data p { font-size:25px;}
    #grid .box_5 .top .data p { font-size:25px; padding:15px 0;}
    #grid .box_6 .bot .data p { font-size:25px; padding:15px 0;}
    #grid .box_8 .left .data p { font-size:25px; padding:15px 0;}
    #grid .box_2 a .hover p { font-size:25px;}
    #grid .box_4 a .hover p { font-size:25px; max-width:90%;}
	#banner #bannerText { max-width:1000px;}
	#banner #bannerText h1 { font-size:38px;}
	#header .header .logo img{max-width: 220px;}
	#nav { padding:80px 30px 0 0;}
}
@media (max-width: 1350px) {	
    .container { width:970px; }
    #grid .box_1 a p { font-size:22px; padding-bottom:40px; padding-right:40px;}
    #grid .box_3 .left .data p { font-size:22px;}
    #grid .box_5 .top .data p { font-size:22px; padding:15px 0; }
    #grid .box_6 .bot .data p { font-size:22px; padding:15px 0;}
    #grid .box_8 .left .data p { font-size:22px; padding:15px 0;}
    #grid .box_2 a .hover p { font-size:22px;}
    #grid .box_4 a .hover p { font-size:22px; max-width:90%;}
	#ImagePanel1 .image_detail { padding-top:30px;}
	#ImagePanel1 .image_detail h1 { font-size:38px;}
	#ImagePanel1 .image_detail p.slug { font-size:19px;line-height:26px;}
	#ImagePanel1 .image_detail p.designation { padding:5px 0;}
	#ImagePanel3 .image_detail { padding-top:20px;}
	#footer .footer_top .f_detail .f_col { float:left; line-height:1.1em;max-width: 230px;padding-top:90px;margin-right:10px;}
}
@media (max-width: 1100px) {	
    #header .header .logo { max-width:25%;}
    #header .header .logo img { width:165px;}
	#nav { padding:60px 30px 0 0;}
}
@media (max-width: 1024px) {	
    #header .header .logo { padding:30px 20px }
    #grid .box_1 a p { font-size:20px; padding-bottom:20px; padding-right:40px;line-height:22px;}
    #grid .box_1 a { padding:0 !important;}
    #grid .box_3 .left .data p { font-size:18px;}
    #grid .box_5 .top .data p { font-size:18px; padding:15px 0; }
    #grid .box_6 .bot .data p { font-size:18px; padding:15px 0;}
    #grid .box_8 .left .data p { font-size:18px; padding:15px 0;}
    #grid .box_2 a .hover p { font-size:18px;}
    #grid .box_4 a .hover p { font-size:18px; max-width:90%;}
    #grid .data { padding:0 20px !important;}
    #banner #bannerText { max-width:900px;}
	#banner #bannerText h1 { font-size:32px;}
}
@media (max-width: 992px) {	
    .container { width:750px; }
    #grid .box_1 a p { font-size:28px; padding-bottom:20px; padding-right:40px;line-height:30px;}
    #grid .box { width:50% !important;}
    #grid .gallery { width:50% !important; padding-bottom:40%; }
    #header.fixed .header .logo { float:left; padding:10px 0 10px 37px; width:100px;}
    #header.fixed #nav { padding:40px 30px 0 0;}
    body { padding-top:85px;}
    #header .header .logo { float:left; padding:10px 0 10px 37px; max-width:16%;}
    #header #nav { padding:40px 30px 0 0;}	
    #header .header .logo { padding:10px 0 10px 20px;} 

    #header.fixed #nav { padding:40px 30px 0 0;}	
    #header.fixed .header .logo { padding:10px 0 10px 20px;} 
	#nav { float:right; padding:90px 0px 0 0;}
    #nav > ul > li + li { margin-left:15px;}
    #nav ul li a { font-size:14px;}
    #nav ul li ul li a { font-size:13px;}
    #footer .footer_top .f_link .f_blocks .block h3 { font-size:14px;}
    #boxes .box .member { padding:10px 10px 0;}
    #boxes .box .member p { padding:15px 0;}
    #business .box h5 { font-size:16px;}
    #business .box p { font-size:16px; padding-right:20px;}
	#ImagePanel1 .image_detail p.slug { margin-bottom:20px;padding:20px 10px; line-height:26px;font-size:16px;}
	#ImagePanel1 .image_detail p.mail { padding-bottom:10px;}
	#ImagePanel1 .image_detail { padding:50px 20px;}
	#ImagePanel3 .image_detail { padding-bottom:20px;}
	#ImagePanel3 .image_detail { padding-left:0; padding-right:20px;}
	.typography { padding:0px 0 20px 0;}
	.typography table { width:100% !important;}
	
	.hide-mob {display:none;}

}
@media (max-width: 768px) {
#footer .footer_top .f_detail .f_logo { float:left; line-height:20px;max-width: 130px;padding:10px;}
	#footer .footer_top .f_detail .f_logo img{ max-width: 100px;}
	#footer .footer_top .f_detail .f_col { max-width: 190px;padding-top:30px;min-height:200px;}
	#footer .footer_top .f_detail .f_col p { font-size:13px;line-height:1.6em;}
	#footer .footer_top .f_detail .f_col h4 { font-size:14px;}
	#contact .text .half {width:100%;}
	#contact .container{ background:url(../images/contact-overlay.png) top right repeat-y;padding:40px 0;min-height: 200px;}
	#white p, #white h1, #white h2, #white h3, #white h4, #white h5 { color:#000;}	
}
@media (max-width: 890px) {
    .container { width:100%; padding:0 0px; }
    body { padding:0 0 0 0;}	
    #header { position:static !important;height:100px;}
	
    #header .header .logo { position:absolute; left:20px; top:10px; padding:0 !important; width:22%;}
    #grid .box_1 a p { font-size:20px; padding-bottom:20px; padding-right:40px;line-height:22px;}
    #nav {  padding:0 0 !important; float:none;}
    #nav ul { position:absolute; left:0; top:85px; padding: 40px;background:#fff; width:100%; z-index:9999; }
    #nav ul li ul { }
    #nav ul li ul::after { display:none;}
    /*	#nav ul { text-align:left;}
            #nav ul li { width:100%; margin:0 0 10px 0!important; }
            #nav ul li a.drop { background-image:url(../images/plus.png); background-repeat:no-repeat; background-position:right center;}
            #nav ul li a.open { background-image:url(../images/minus.png); background-repeat:no-repeat; background-position:right center;}
            #nav ul li a { padding:0 20px 0 0px; display:inline-block;}*/




    #header.fixed #nav { padding:40px 30px 0 0;}	

    /* Drop Down */
    #nav ul li ul { position:relative; top:0; width:100%; padding: 25px 30px 0; display:none;
                    -webkit-transition: all 0s ease-in-out;
                    -moz-transition: all 0s ease-in-out;
                    -o-transition: all 0s ease-in-out;
                    transition: all 0s ease-in-out;
    }
    #nav ul li ul li a:hover { padding:0;}
    #nav ul li ul li { margin-bottom:15px;}
    #nav ul li ul li a { padding:0;}
    #nav ul li ul li ul { left:0; top:0;}
    /* Drop Down */

    /*#grid .box_1 a span { font-size:16px;}
    #grid .box_1 a p { font-size:14px; line-height:normal;}
    #grid .box_1 a i { font-size:16px;}
    #grid .box_2 a .hover p { font-size:14px;}
    #grid .box_1 a p { padding:15px 0;}
    #grid .box_2 a .hover span, #grid .box_4 a .hover span { padding-bottom:15px; font-size:16px;}
    #grid .box_2 a .hover p, #grid .box_4 a .hover p { font-size:14px;}
    #grid .box_3 .left .data p { font-size:14px; padding:15px 0;}
    #grid .box_3 .left .data span { font-size:16px;}
    #grid .box_3 .left .data i { font-size:16px;}
    #grid .box_5 .top .data p { font-size:14px; padding:5px 0;}
    #grid .box_5 .top .data span { font-size:16px;}
    #grid .box_5 .top .data i { font-size:16px;}
    #grid .box_6 .bot .data p { font-size:14px; padding:5px 0;}
    #grid .box_6 .bot .data span { font-size:16px;}
    #grid .box_6 .bot .data i { font-size:16px;}
    #grid .box_8 .left .data p { font-size:14px; padding:5px 0;}
    #grid .box_8 .left .data span { font-size:16px;}
    #grid .box_8 .left .data i { font-size:16px;}*/
	

    #footer .footer_top .f_link .f_blocks .block { width:47%; min-height:200px;}
    #banner #bannerText { max-width:690px;}
	#banner #bannerText h1 { font-size:32px;}
	#banner .text p { font-size:5vw;}
    #banner .text span { font-size:4vw;}
    #identity .identity .image { float:none; width:100%; padding:20px 20px;}
    #identity .identity .image_detail { float:none; width:100%; padding:0 20px;}
    #boxes .box { width:50%;}
    #boxes .box .member { padding:40px 40px 0;}
    #business .box { width:50%;}
	#ImagePanel2 .data { float:none; width:100%; padding:25px;}	
	#ImagePanel2 .data p { width:100%;}
}
@media (max-width: 640px) {
	#footer .footer_top .f_detail .f_logo { max-width: 100%;padding:30px;}
	#footer .footer_top .f_detail .f_logo img{ max-width: 176px;}
	#footer .footer_top .f_detail .f_col { max-width: 260px;padding-top:30px;}
    /*#grid .box_1 a span { font-size:12px;}
    #grid .box_1 a p { font-size:10px; line-height:normal;}
    #grid .box_1 a i { font-size:12px;}
    #grid .box_2 a .hover p { font-size:10px;}
    #grid .box_1 a p { padding:5px 0;}
    #grid .box_2 a .hover span, #grid .box_4 a .hover span { padding-bottom:5px; font-size:12px;}
    #grid .box_2 a .hover p, #grid .box_4 a .hover p { font-size:10px;}
    #grid .box_3 .left .data p { font-size:10px; padding:0 0;}
    #grid .box_3 .left .data span { font-size:12px;}
    #grid .box_3 .left .data i { font-size:12px;}
    #grid .box_5 .top .data p { font-size:10px; padding:0 0;}
    #grid .box_5 .top .data span { font-size:12px;}
    #grid .box_5 .top .data i { font-size:12px;}
    #grid .box_6 .bot .data p { font-size:10px; padding:0 0;}
    #grid .box_6 .bot .data span { font-size:12px;}
    #grid .box_6 .bot .data i { font-size:12px;}
    #grid .box_8 .left .data p { font-size:10px; padding:5px 0;}
    #grid .box_8 .left .data span { font-size:12px;}
    #grid .box_8 .left .data i { font-size:12px;}*/
    #boxes .box { width:100%;}
    #caption .text .half { padding:0; width:100%; margin-bottom:20px;}
    #caption .cols .col { width:100%;}
    #banner #bannerText h1 { font-size:6vw;line-height:1em;}
    #banner #bannerText p { font-size:4vw;}

}
@media (max-width: 600px) {
    #grid .box_1 a p { font-size:18px; padding-bottom:20px; padding-right:20px;line-height:20px;}
    #footer .footer_bot ul li { margin:0 -2px; width:50%;}
	#ImagePanel1 .image { float:none; width:100%;}
	#ImagePanel1 .image img { width:100%;}
	#ImagePanel1 .image_detail { float:none; width:100%; padding:30px 30px 20px 30px;}
	
	#ImagePanel3 .image { float:none; width:100%;}
	#ImagePanel3 .image img { width:100%;}
	#ImagePanel3 .image_detail { float:none; width:100%; padding:20px 30px 20px 30px;}
	.typography img[align="left"], .typography img[align="right"] { margin:0; display:block; width:100%; margin-bottom:20px;}
	.typography table tr th, .typography table tr td { padding:5px;}
	.typography table tr th { font-size:14px;}
	.typography table tr td { font-size:12px;}
	#ProfilePanel1 .container, #ImagePanel1 .container, #ImagePanel2 .container, #ImagePanel3 .container, .typography   { padding-left:0; padding-right:0;}
	.typography p { padding-left:10px; padding-right:10px;}
	.typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 { padding-left:10px; padding-right:10px;}
	.typography { padding:0px;}
	#white p, #white h1, #white h2, #white h3, #white h5{ color:#000;}
	
}
@media (min-width: 480px) and (max-width: 568px) {
    #grid .box_1 a p{
        font-size:16px;
        padding-top: 5px;
        padding-bottom: 5px;
        line-height:18px;
    }
    #grid .box_3 .left .data span{
        font-size: 18px;
    }
    #grid .box_3 .left .data p{
        padding: 10px 0;
        font-size: 15px;
    }
    #grid .box_5 .top .data p,
    #grid .box_6 .bot .data p{
        padding: 5px 0;
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    #grid .box { width:100% !important;}
    #grid .gallery { width:100% !important; padding-bottom:80%;}
    #grid .box p { max-width:100% !important;}
    #footer .footer_top .f_link .f_blocks  { margin:0;}
    #footer .footer_top .f_link .f_blocks .block { width:100%; min-height:0; margin-left:0; margin-bottom:20px;}
    #footer .footer_top .f_detail .f_logo { float:none; margin-bottom:20px; line-height:50px;}
    #footer .footer_top .f_detail .f_logo img { width:60px;}

    #footer .footer_top .f_detail .social { float:none;}
    #caption h3 { width:100%; padding-left:20px;}
    #business .box { width:100%; }
}
@media (max-width: 360px) {
}
@media (max-width: 320px) {
    #grid .box_1 a p{
        line-height: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #grid .box_3 .left .data span{
        font-size: 18px;
    }
    #grid .box_3 .left .data p{
        padding: 10px 0;
        font-size: 15px;
    }
    #grid .box_5 .top .data p,
    #grid .box_6 .bot .data p{
        padding: 5px 0;
        font-size: 16px;
    }
}
@media (max-width: 280px) {
    #grid .box_1 a p{
        line-height: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #grid .box_3 .left .data span{
        font-size: 100%;
    }
    #grid .box_3 .left .data p{
        padding: 10px 0;
        font-size: 100%;
    }
    #grid .box_5 .top .data p,
    #grid .box_6 .bot .data p{
        padding: 5px 0;
        font-size: 100%;
    }
}