/*   
Theme Name: USI Theme
Theme URI: http://www.eyesoreinc.com
Description: This is a WordPress Theme template 
Author: Nan Dee
Author URI: http://www.eyesoreinc.com
Version: 1
*/

@charset "UTF-8";



@font-face {font-family: "cy-b";
  src: url("css/fonts/cy-b.eot"); /* IE9*/
  src: url("css/fonts/cy-b.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("css/fonts/cy-b.woff2") format("woff2"), /* chrome、firefox */
  url("css/fonts/cy-b.woff") format("woff"), /* chrome、firefox */
  url("css/fonts/cy-b.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("css/fonts/cy-b.svg#cy-b") format("svg"); /* iOS 4.1- */
}

/*------------------------------------*\
    $MAIN
\*------------------------------------*/
html{
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 2.3em;
}

h1 {
    font-size: 35px;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    letter-spacing: 2px;
}
p {
    margin-bottom: 0;
    text-align: justify;
    font-size: 19px;
}
ul { font-size: 20px; }
h2.blue {
    font-size: 28px;
    color: #40587f;
    margin-bottom: 0;
    text-align: justify;
    line-height: 32px; 
}
.green {
    color: #21691f;
}
.tagline {
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}
.relative {
    position: relative;
}

/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.top-holder {
    background: #40587f;
    padding-top: 40px;
}
.home .top-holder {
    position: relative;
    min-height: 1188px;
}
.header{
    position: relative;
    background: url(images/menu-bg-gradient.png) repeat-x top left;
    min-height: 188px;
}
.lines-on-right {
    position: absolute;
    top: 95px;
    right: 0;
    width: 57%;
    height: 48px;
    background: url(images/lines-on-right.png) repeat-x top left;
}
.logo{
    margin-top: 20px;
    background:url(images/usi-logo-vertical.png);
}
.logo, .logo img {
    width: 365px;
    height: 123px;
}
.login-row {
    position: absolute;
    right: 0;
    top: 30px;
}
.login-row ul, .footer-info ul {
    float: right;
    margin-bottom: 0;
    list-style: none;
}
.login-row ul {
    margin-top: 30px;
}
.login-row ul li, .footer-info ul li {
    display: block;
    float: left;
    margin-left: 10px;
}
.login-row a.login {
    display: block;
    padding: 5px 10px 2px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    font-style: italic;
    font-size: 21px;
    line-height: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    background: #8c8c8c;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;    
}
.login-row a.login:hover {
    text-decoration: none;
}


.small-blue-background { 
    background: url(images/small-blue-background.jpg) repeat-x #fff; 
} 
/*------------------------------------*\
$MAIN MENU
\*------------------------------------*/
.menu-main-menu-container {
    margin-top: 95px;
}
.mainmenu, .mainmenu ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
}
.mainmenu {
clear: both;
float: right;
margin: 10px auto 0;
}

.mainmenu>li {
border: 0;
display: block;
float: left;
margin: 0;
position: relative;
z-index: 5;
}

ul.mainmenu li a {
color: #ffffff;
display: block;
font-size: 21px;
line-height: 21px;
margin: 0;
padding: 4px 25px;
position: relative;
text-decoration: none;
letter-spacing: 2px;
text-transform: uppercase;
font-family:"cy-b"!important;
font-weight: bold;

/*text-shadow: 0 1px 1px #545454;*/
}

ul.mainmenu>li>a {
    padding-right: 0;
}

ul.mainmenu li:hover > a, ul.mainmenu li.current-menu-item:hover a, ul.mainmenu li.current_page_parent:hover a {
    color: #636466; /*grey*/
}
ul.mainmenu li.current-menu-item a, ul.mainmenu li.current_page_parent a {
    
    color: #ffffff; /*white*/
}

/* @group Menu elements */
ul.mainmenu ul {
    display: none;
    float: left;
    position: absolute;
    z-index: 10;
    width: 210px;    
}

ul.mainmenu ul li {
    position: relative;
    padding: 0 10px;
    background-color: black;
    border-bottom: 1px solid #fcc135;
}
ul.mainmenu ul li:hover > a {
    color: #636466; /*grey*/
}


ul.mainmenu li:hover > ul {
    display: block;
}

ul.mainmenu ul ul {
    left: 100%;
    top: 0%;
    
}

ul.sub-menu {
    padding-bottom:10px;
    margin-top:0px;
}

/*.sub-menu li{
    background:none;
    width: 100%;
    
}*/

.sub-menu {
    text-align:left;
    font-size: 0.7em;

}
ul.sub-menu li a,
ul.sub-menu li a:link, 
ul.sub-menu li a:visited/*, 
.children a:link, 
.children a:visited*/ {
    display:block;
    line-height: 18px;
    margin:0;
    padding: 10px 17px 10px 10px;
    color: #ffffff;
    /*text-transform: capitalize;*/
    text-decoration: none;
    text-shadow: none;
    font-size: 1.05em;
    
}
ul.sub-menu li a:hover {
    color: #636466; /*grey*/
}

ul.sub-menu li a:active, ul.mainmenu li.current_page_parent ul.sub-menu li.current-menu-item > a, ul.mainmenu li.current-post-ancestor ul.sub-menu li.current-menu-item > a, ul.sub-menu li.current_page_item a /*, 
.children a:hover, 
.children a:active*/ {
    color: #3ab3d7; /*blue*/
}

/*------------------------------------*\
    $HOMEPAGE
\*------------------------------------*/
.home-content {
    position: absolute;
    bottom: 0;
    width: 100%
}
.home-content-box {
    background: #000;
    padding: 10px;
    color: #fff;
}
.home-content-images p:first-child, .home-content-images p:last-child {
    display: none;
}

.home-content-info {
    padding: 0 15px;
}
.home-content-box h1 {
    font-family: 'EB Garamond', serif;
    margin-top: 10px;
    margin-bottom: 10px;
    font-style: 35px;
    font-weight: normal;
}
.home-content-images .content-column img.alignnone {
    margin-bottom: 0;
}
.home .green.tagline {
    margin-bottom: 40px;
}
.home-callouts {
    background: url(images/homecallouts-bg.png) repeat-y top center;
}
.home-callout {
    padding: 0 10px;
}
.home-callout h2 {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}


.home-content-info p {
    font-size: 20px; 
}
.callout-content p { 
    font-family: 'EB Garamond', serif;
    font-size: 20px; 
} 
/*------------------------------------*\
    $CONTENT
\*------------------------------------*/
.page-content {
    padding: 40px 0;
}
/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer{
    color: #fff;
    background: #000;
    font-size: 13px;
    padding: 20px 0;
}
.footer .footer-info, .footer .footer-logo {
    /* float: right; */
}
/*.footer .footer-info {
    width: 300px;

}*/
.footer .footer-info p { 
    text-align: right !important; 
    font-size: 13px !important;  
} 
.footer-logo {
    width: 193px;
}



/*------------------------------------*\
    $TYPE
\*------------------------------------*/
a{
    color:#4a8ec2;
}
mark{
    border-bottom:2px solid;
}
pre{
    padding:10px;
}
pre code,
pre mark{
    background:none;
}





/*------------------------------------*\
    $MISC
\*------------------------------------*/
::selection     { background-color:#4a8ec2; color:#fff; }
::-moz-selection{ background-color:#4a8ec2; color:#fff; }
hr{
    padding:0;
    border:none;
    height:1px;
    background-color:#ccc;
}

/*------------------------------------*\
    $GROUP ALIGNMENT AND IMAGE CLASSES
\*------------------------------------*/

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.footer-info { 
    line-height: 20px; 
} 

.wrapper-1221 { 
    width: 1221px; 
    margin: 0 auto; 
}   
.wrapper-1221 .left-side { 
    display: inline-block; 
    padding-right: 22px;  
    margin-left: 14px; 
    vertical-align: top; 
    border-right: 3px solid #af9062; 
} 
.wrapper-1221 .right-side { 
    display: inline-block; 
    margin-left: 22px; 
    margin-right: 14px; 
    vertical-align: top; 
} 
.wrapper-1221 .lrgr { 
    width: 100%; 
    max-width: 942px; 
}
.wrapper-1221 .smlr { 
    max-width: 199px; 
    width: 100%; 
} 
.wrapper-1221 .full-width { 
    width: 100%; 
    max-width: 1193px; 
    margin: 0 auto; 
}   
#sidebar h2 { 
    color: #21691f; 
    letter-spacing: 5px; 
} 
.widget_nav_menu ul { 
    list-style: none; 
    margin-left: 40px; 
} 
.widget_nav_menu ul li { 
    line-height: 25px; 
} 
.widget_nav_menu ul li a { 
    color: #000; 
    font-size: 14px; 
}   

h2.green  { 
    color: #21691f; 
    letter-spacing: 7px; 
} 
.portfolio-single-box {
    background: #40587f; 
    padding: 8px 8px 15px; 
    max-width: 245px; 
    width: 100%; 
    margin: 20px 25px; 
    display: inline-block; 
}
.portfolio-single-box a *,
.portfolio-single-box a:hover *, 
.portfolio-single-box a:link *, 
.portfolio-single-box a:visited * {
    color: #fff;
    text-decoration: none; 
}
.portfolio-single-box a:hover {
    text-decoration: none; 
}
.portfolio-single-box h2 {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.portfolio-single-box h2 { 
    font-size: 18px; 
    color: #fff; 
    letter-spacing: 5px; 
} 
.portfolio-single-box .entry {
    color: #fff;
    font-size: 13px;
    line-height: 23px;
}
.portfolio-single-box .thumbnail-img {
    text-align: center;
}

.vertical-image {
    float: left;
}

.single-portfolio-text {
    float: right;
    width: 380px;
}
.single-portfolio-text p {
    font-size: 19px;
    line-height: 30px;
}
.horizontal-image img { 
    max-width: 976px; 
    width: 100%; 
    height: auto; 
} 
.single-portfolio-text.image-above { 
    width: 100%; 
    float: none; 
} 
.navigation { text-align: center; } 
.overlay { 
    background: rgba(0,0,0,.4); 
    position: fixed; 
    top:0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index:999;
} 
.login-screen {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 600px;
    margin-top: -300px;
    margin-left: -250px;
    background: white; 
    text-align: center;
    z-index: 1000; 
}
.login-screen .login-panel .inner-wrap { 
    position: relative; 
    padding: 20px; 
} 
.login-screen .login-panel .inner-wrap .closebtn { 
    position: absolute; 
    top:-25px; 
    right:-25px;
} 
.dropbox-login input { 
    padding: 5px; 
    margin-bottom: 10px; 
} 

.portfolio-single-box .thumbnail-img img {
    height: 145px;
    width: 245px;
}

ul.mainmenu li.current_page_parent:hover .sub-menu a {
    color: #fff;
}
ul.mainmenu li.current_page_parent:hover .sub-menu li:hover a {
    color: #636466;
}

.wrap825 { width: 825px; margin: 0 auto; } 
.one-fourth-leader { /* Clear Cache asdf3223*/
    float: left; 
    position: relative; 
    height: 254px;
    width: 195px; 
    margin: 3px; 
} 
.one-fourth-leader img { width: 195px; height: 254px; } 
.one-fourth-leader .text {
    bottom: 0;
    right: 0;
    left: 0;
    width: 175px;
    background: url(images/trans-grey-px.png) repeat; 
    height: 75px;
    position: absolute;
    color: #fff;
    line-height: 23px;
    text-align: center;
    padding-top: 5px;
    padding: 5px 10px 0px;
}




#sidebar .current-portfolio-ancestor a, 
#sidebar .current-menu-parent a, 
#sidebar .current-portfolio-parent a,
#sidebar .current-menu-item a {
	font-weight: bold; 
}

@media screen and (max-width: 1250px) { 
    .home-callouts {
        background: none;
    }

    /* #AF9062 */
    .home-callouts .grid-4 {
        width: 31%;
        margin: 0px .8% !important;
        border-left: 5px solid #af9062; 
    }
    .home-callouts .grid-4:first-child { 
        border-left: 0; 
    } 
    .wrapper-1221 .lrgr { 
        max-width: 59%;
    } 
    .wrapper-1221 .smlr {
        max-width: 28%;
    }
} 
@media screen and (max-width: 1240px) { 
    .wrapper-1221 { 
        max-width: 1221px; 
        width: 90%; 
        padding: 0 20px; 
    } 
    h2.blue { 
        margin-bottom: 10px; 
    } 
} 
@media screen and (max-width: 1175px) { 
    .content-column.one_third img {
        max-width: 98%;
    }
} 
@media screen and (max-width: 890px) { 
    .wrap825 {
        width: 620px !important;
    } 
} 
@media screen and (max-width: 860px) { 
    html { 
        line-height: 1.8em; 
    } 
    ul.mainmenu li a { 
        font-size: 17px; 
    } 
    p { 
        margin-bottom: 10px; 
    } 
}   

@media screen and (max-width: 750px) { 
    ul.mainmenu li a { font-size: 15px; }   
} 
@media screen and (max-width: 740px) { 
    .wrapper-1221 .lrgr { 
        max-width: 56%; 
    } 
} 
@media screen and (max-width: 720px) { 
    .login-row ul {
        margin-top: 6px;
        float: none;
        overflow: auto;
        text-align: center;
    }
    .login-row ul li, .footer-info ul li {
        float: none;
        display: inline-block;
    }

    .login-row {
        position: absolute;
        right: 0;
        top: -130px;
        margin: 0 auto;
    }
    .home-callouts .grid-4 { 
        width: 80%; 
        margin: 0 auto !important;  
        float: none; 
        border-left: 0; 
        text-align: center; 
        padding: 30px; 
        border-top: 5px solid #af9062; 
    } 
    .home-callouts .grid-4:first-child { 
        border-top: 0; 
    } 
    .home .top-holder { 
        min-height: 820px; 
    }   
    .home-content-info p {
        font-size: 18px;
    }
    html { line-height: 1.6em; }
    .home-content-box { 
        padding: 10px 10px 20px;
    } 
    .tagline { 
        font-size: 20px; 
    } 
    .responsive-table {
        width: 100%;
        margin: 0;
        overflow: scroll;
    }


} 
@media screen and (max-width: 690px) { 
    .wrapper-1221 .left-side { border-right: 0; } 
    .wrapper-1221 .lrgr, .wrapper-1221 .smlr { max-width: 80%; margin: 0 auto;  }
    .wrapper-1221 .right-side { 
        display: block; 
    } 
    .portfolio-single-box { 
        margin: 20px auto;
        display: block;
    } 
    .wrapper-1221 .smlr { 
        text-align: center; 
        display: block; 
    } 
    .wrapper-1221 .widget_nav_menu ul { 
        margin-left: 0; 
    } 
    h2.green {
        text-align: center;
        margin-top: 60px;
    }
} 
@media screen and (max-width: 680px) { 
    .wrap825 {
        width: 405px !important;
    }
} 
@media screen and (max-width: 600px) { 
    .home-content { 
        position: static; 
    }  
    .content-column.one_third {
        width: 31%;
        float: left;
        clear: none;
        margin: 0 1% 20px;
    }
} 
@media screen and (max-width: 540px) { 
    .login-screen { 
        width: 330px; 
        height: 450px; 
        margin-left: -165px; 
    } 
} 
@media screen and (max-width: 535px) { 
    .footer .footer-info, .footer .footer-logo { 
        float: none; 
    } 
    .footer .footer-info {
        width: 80%; 
        margin: 0 auto 15px; 
    }
    .footer .footer-info p { 
        text-align: center !important; 
    } 
    .login-row ul, .footer-info ul {
        float: none;
        margin-bottom: 0;
        list-style: none;
        margin: 0 auto;
        text-align: center;
        vertical-align: middle;
    }
    .footer-logo { 
        width: 80%; 
        margin: 0 auto; 
        text-align: center; 
    } 
} 

@media screen and (max-width: 490px) { 
    .logo { 
        background: none; 
    } 
    .logo img { 
        position: static; 
        left: 0; 
    } 
    .logo, .logo img {
        max-width: 100%;
        height: auto;
    }
    .lines-on-right {
        display:none; 
    }
} 
@media screen and (max-width: 450px) { 
    .wrap825 {
        width: 200px !important;
    }
}