/*  
Theme Name: Theme 37
Description:  OUTLOOK (LANDING PAGE THEME)
Version: 1.0
Author: Queensberry
Author URL: http://www.queensberry.com

TABLE OF CONTENTS

01 - Global 
02 - General Layout
03 - Header
04 - Navigation
05 - Galleries
06 - Album
07 - Shopping Cart
08 - Widgets
09 - Blog CSS
10 - Contact form
11 - Footer
12 - Responsive CSS
*/

/* ///////////////////////////////////////////////////////////////////// 
//  01 - Global
/////////////////////////////////////////////////////////////////////*/

/*--------------------------------------
Font Styles 
---------------------------------------*/

p {
color: black;
font-family: 'Lato', sans-serif;
font-size: 1.1em;
line-height: 24px;
letter-spacing:1px;
font-weight:300;
}

a {
color:#CCB676;
text-decoration: none;
font-family: 'Lato', sans-serif;
}

a:hover {
color: #aaaaaa;
}

h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 1.5em;
text-transform:uppercase;
color:#555;
border-bottom: 0px solid #dddddd;
padding:0px;
clear:both;
padding-bottom: 27px;
margin-top:1em;
text-align: center;
letter-spacing:3px;
}

h1#mainPageHeader {
visibility:hidden;
height:0px;
padding:0px;
margin:0px;
}

h1#myqby_header {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 1.375em;
text-transform: uppercase;
margin-top: 3.125em;
padding-bottom: 10px;
color: #222222;
font-weight: 300;
letter-spacing: 0.12em;
text-align:center;
}

h1#galleryNavTitle {
margin-top: 2.125em;
padding-bottom: 5px;
}

.postHeader .subject h1 {
float:left;
text-align:left;
}

h2 {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 1.063em;
text-transform: uppercase;
margin-top: 3.125em;
padding-bottom: 0px;
color:#353535;
font-weight: 300;
letter-spacing: 0.15em;
line-height: 2.1;
}

h3 {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 1.063em;
margin-top: 3.125em;
padding-bottom: 0px;
color: #666666;
font-weight: bold;
}


h4 {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 0.938em;
text-transform: uppercase;
margin-top: 3.125em;
padding-bottom: 0px;
color: black;
font-weight: bold;
letter-spacing:0.12em;
}

#popup_title h4 {
font-weight:normal;
letter-spacing:0em;
font-size: 1.063em;
font-family: 'Lato', sans-serif;
}

h5 {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 0.875em;
text-transform: uppercase;
margin-top: 3.125em;
padding-bottom: 0px;
color: #555555;
font-weight: normal;
letter-spacing: 0.12em;
margin-bottom: 10px;
}

#row h5 {
letter-spacing: 0em;
}

h6 {
font-family: 'Lato', sans-serif;
clear:both;
font-size: 0.875em;
text-transform: uppercase;
margin-top: 3.125em;
padding-bottom: 0px;
color: #555555;
font-weight: normal;
margin-bottom: 10px;
letter-spacing: 0.12em;
}

blockquote {
margin: 20px 0 20px 30px;
padding: 0 30px 0 30px;	
font-style: italic;
font-family: 'Lato', sans-serif;
border-left: 5px solid #CCB676;
}

blockquote p {
font-style: italic;
font-family: 'Lato', sans-serif;
font-size: 1.1em;
}

/*--------------------------------------
Page Element Styles (lists, lines, etc)
---------------------------------------*/

ul {
padding-left: 15px;
}

li {
display: list-item;
}

.hr_aa {
background-color: #dddddd;
margin: 15px 0 25px 0 !important;
}

input[type="submit"]{
font-family: 'Lato', sans-serif;
}

/* ///////////////////////////////////////////////////////////////////// 
//  02 - General Layout
/////////////////////////////////////////////////////////////////////*/


/*--------------------------------------
Page Styles 
---------------------------------------*/

body {
font-family: 'Lato', sans-serif;
}

#pageWidth {
margin:auto;
margin-top: 0px;
padding:0;
width: 100%;
font-family: 'Lato', sans-serif;
font-size: 100%;
color: #333333;
line-height: 18px;
}

#pgContent {
padding-left: 1.250em;
padding-right: 1.250em;
width: 90%;
margin: auto;
max-width:1021px;
}

.mainPageContent {
min-height:500px;
}

#mainPageWrapper {
min-height:670px;
}

#inner_mainPageContent {
}

.photographer-custom-page {
width:100%;
}

.nopadding {
    padding: 0px !important;
}

.padding2 {
    padding: 2px !important;
}

.padding5 {
    padding: 5px !important;
}

.padding10 {
    padding: 10px !important;
}

/* ///////////////////////////////////////////////////////////////////// 
//  03 - Header
/////////////////////////////////////////////////////////////////////*/

#pgLogo {
text-align: center;
padding: 10px;
}

#pgCompany {
font-family: 'Lato', sans-serif;
font-size:1.500em;
text-transform:uppercase;
padding-top:20px;
margin-bottom:20px;
line-height: 30px;
text-align:center;
margin-left:auto;
margin-right:auto;
width:100%;
letter-spacing:2px;
font-weight:300;
}

#isPageHeader {
margin-top:45px;
}

/* ///////////////////////////////////////////////////////////////////// 
//  04 - Navigation
/////////////////////////////////////////////////////////////////////*/


#pgNavigation {
display:block;
clear:both;
margin: -20px 10px 10px 10px;
text-align: center;
width: 98%;
}

#pgNavigation li {
width: auto;
display: inline-block;
padding-right: 20px;
padding-left: 20px;
}

#pgNavigation li a{
color: #333333;
text-decoration: none;
}

#pgNavigation li a:hover{
color: #aaaaaa;
text-decoration: none;
}

#nav-pg ul li {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.9em;
color: #333333;
font-weight:300;
letter-spacing: 1px;
}

#nav-pg ul {
display: inline-block;
margin-top:20px;
margin-bottom: 4px;
}

li.item29.current a {
color: #151517;
}

/* ///////////////////////////////////////////////////////////////////// 
//  05 - Galleries
/////////////////////////////////////////////////////////////////////*/

/*--------------------------------------
Event Page Styles 
---------------------------------------*/

#galleriesList_2 {
margin:auto;
width:96%;
}

.galleryImage .imagePublic {
height: 226px;
}

#pgGallery {
height: 212px;
width: 314px;
background-color: #eeeeee;
position: relative;
margin:2px;
overflow:visible;
}

#pgGallery .wraptocenterGallery {
height: 212px;
width: 314px;
position: relative;
overflow: hidden;
}

#galleryTitle {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #000000;
height: auto;
width: 316px;
padding: 6px 10px 6px 10px;
font-size: 0.85em;
margin: 10px 0;
letter-spacing: 2px;
overflow: visible !important;
font-weight:300;
z-index: 1;
}

#galleryParent {
width: 322px;
height:260px;
display: inline-block;
float:none !important;
vertical-align:top;
}

#allGalleries {
text-align: center;
}

.pgGalleryImg {
height:100%;
}

.pgGalleryImgV , .albumImageV{
    position: absolute;
    margin: auto;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    width: 100%;
    height: auto;
}

.pgGalleryImgH, .albumImageH{
    position: absolute;
    margin: auto;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    width: auto;
    height: 100%;
}

#imgCat {
    font-size:0.750em;
    width: 100%;
    text-align: center;
}

#imgCat li {
    float: none !important;
    display: inline-block
}

.paging_container {
font-size:0.750em;
margin-top:10px;
}

.galleryImage .imagePublic {
height: 226px;
}


.gal_list_pagination {
margin-left:0px !important;
margin-top: 4px;
font-family: 'Lato', sans-serif;
font-style: italic;
}

.pagination li.hover a {
background-color: #353535;
}

.pagination li.active a {
background-color: #353535;
}

#collabInfo {
font-size:0.750em;
}

/* ///////////////////////////////////////////////////////////////////// 
//  06 - Album
/////////////////////////////////////////////////////////////////////*/

/*--------------------------------------
Album Page Styles 
---------------------------------------*/

#allAlbums {
margin-top:25px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

#main .wrap {
width: 100%;
margin: 0 auto;
padding: 0 0 0 0;
}

#pgAlbum {
height: 226px;
width:305px;
background-color: #eeeeee;
overflow: visible;
position: relative;
}

#pgAlbum .wraptocenter {
    position: relative;
    overflow: hidden;
}

#albumsParent {
width:322px;
margin-bottom: 15px;
height: 260px;
display: inline-block;
float:none !important;
overflow: visible;
vertical-align:top;
}

#albumTitle {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
color: #000000;
height: auto;
width:auto;
padding: 6px 10px 6px 10px;
font-size: 0.85em;
margin: 10px 0;
letter-spacing: 2px;
overflow: visible !important;
font-weight:300;
z-index: 1;
}

/* ///////////////////////////////////////////////////////////////////// 
//  07 - Shopping Cart
/////////////////////////////////////////////////////////////////////*/

.cart-hr {
border-top:1px solid #dddddd;
height:5px;
}

.buyFooter p {
font-size: 1em;
}

/* ///////////////////////////////////////////////////////////////////// 
//  08 - Widgets
/////////////////////////////////////////////////////////////////////*/ 


/*--------------------------------------
Connect Widgets
---------------------------------------*/

.pg_connectFull_type {
text-align:center;
}
.pg_connectFull_type .social_icons {
display:inline-block;
float:none;
}
#header_connectFull {
text-transform: uppercase;
margin-bottom: 10px;
padding-top: 40px;
font-family: Georgia, Times New Roman, serif;
font-style:italic;
}

.sharename {
text-transform: uppercase;
font-style:italic;
font-family: Georgia, Times New Roman, serif;
color: #333333;
}

.sharealbum {
margin: 0 0 130px 0 !important;
}

#pgconnectsm_sh {
visibility:hidden;
}

#pg_connectSmall-l {
font-style:italic;
font-size: 0.688em;
font-family: Georgia, Times New Roman, serif;
padding: 1px 0 15px 0;
text-transform: capitalize;
}

.pgconnectsm_cat-l a {
color: #333333;
}


/* ///////////////////////////////////////////////////////////////////// 
//  11 - Footer
/////////////////////////////////////////////////////////////////////*/

#isPageFooter {
margin-top: 35px;
margin-bottom: 0;
clear: both;
width:97%;
margin-left:auto;
margin-right:auto;
}

#pgFooter {
border-top: 1px solid #e5e5e5;
margin-right: 10px;
margin-left:10px;
padding-top:20px;
padding-bottom:20px;
}

#poweredby {
float: right !important;
margin-top: 10px !important;
}

#copyright-footer p {
font-size:10px;
text-align:center;
letter-spacing:1px;
margin-top:10px;
margin-bottom:15px;
}

.socialmedia-footer {
text-align:center;
}

/* ///////////////////////////////////////////////////////////////////// 
//  11 - RESPONSIVE CSS
/////////////////////////////////////////////////////////////////////*/

/*  HandHeld - Ipad in Portrait or screen smaller that 980px CSS */




@media only screen 
and (max-device-width : 1024px)  { 
/*--------------------------------------
General
---------------------------------------*/

#pgContent {
width: 98%;
}

/*--------------------------------------
Blog
---------------------------------------*/    

.blogMain {
width:100% !important;
}

.useraboutme {
width:95% !important;
padding-top: 10px;
}

.blogMainWrapper {
width:100% !important;
}

.blogSidePannel {
display:none;
}

    #replyform {
    width: 95% !important;
    }

#galleryParent, #albumsParent {

}


#pgGallery, #pgAlbum {
height: 205px;
width: 306px;
}

#galleryTitle, #albumTitle {
width: 306px;
font-size: 1em;
}


}

@media only screen and (max-width: 884px) {

/*--------------------------------------
Blog
---------------------------------------*/    

    .blogMain {
       width:100% !important;
    }

.blogMainWrapper {
width:100% !important;
}

    .blogSidePannel {
       display:none;
    }

#replyform {
width: 95% !important;
}

.blogWrapper p {
font-size: 1.2em;
}

.useraboutme {
width:95% !important;
padding-top: 10px;
}
}

@media only screen 
and (max-device-width : 480px) {

/*--------------------------------------
General
---------------------------------------*/

#pgContent {
width: 100%;
margin-left:auto;
margin-right:auto;
padding-left:0px;
padding-right:0px;
}

/*--------------------------------------
Blog
---------------------------------------*/    

    .blogMain {
       width:100% !important;
    }

.blogMainWrapper {
width:100% !important;
}

.blogWrapper p {
font-size: 1.2em;
}

    .blogSidePannel {
       display:none;
    }

#commentContainer {
width: 93% !important;
}

#replyform {
width: 95% !important;
}

#replyform .buttonYel1 {
margin-right: 30px !important;
}

#replyform input {
width: 100% !important;
}

.useraboutme {
width:95% !important;
padding-top: 10px;
}

/*--------------------------------------
Gallery Thumbnails
---------------------------------------*/    

#pgGallery {
height: 196px;
width: 100%;
background-color: #eeeeee;
}

#pgGallery .wraptocenterGallery {
height: 196px;
width: 300px;
}

#galleryTitle {
    width:100%;
}

.galleryTitle2 {
font-family: 'Lato', sans-serif;
background-color: #ffffff;
opacity: 0.6;
text-transform: uppercase;
color: #000000;
height: 196px;
width: 100%;
padding: 98px 5px 0 5px;
font-weight:400;
position: relative;
top: -195px;
font-size: 1em;
z-index: 1;
text-align: center;
display:none;
letter-spacing: 0.2em;
filter: alpha(opacity=50);/* for IE5-7*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* for IE8*/
}

#galleryParent {
width: 300px;
height: 225px;
margin-bottom:2px;
}

#allGalleries {
text-align: center;
margin-left:auto;
margin-right:auto;
}

/*--------------------------------------
Album Thumbnails
---------------------------------------*/ 

#albumsParent {
    width: 235px;
    height:180px;
}

.albumsParentC {
    width: 235px;
    height:180px;
}

#pgAlbum{
    width: 225px;
    height:150px;
    margin:0px;
}

#albumTitle {
    width: 100%;
}

.pgAlbumImg {
    height: 150px !important;
    width:auto !important;
}

.wraptocenterAlbum {
    width: 235px !important;
    height:150px !important;
}

}

/*--------------------------------------
Responsive navigation
---------------------------------------*/
@media (max-width: 768px) {
    #isPageHeader {

    }
    #pgLogo {
    }
    #pgNavigation, #nav-pg {
        padding-right: 0;
        margin:0;
        width:100%;
    }
    #nav-toggle {
        background-image: url("//workspace-cdn.s3.amazonaws.com/images/settings_navigation_icons/dropdown_menu.png");
        display: block !important;
        float: left;
        width: 100%;
        height: 45px;
        background-position: calc(100% - 22px) 22px;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        background-color: white;
    }
    #pgNavigation ul {
        display:block;
        max-height: 0px;
        overflow: hidden;
        transition: max-height 300ms ease 0s;
        list-style: none outside none;
        padding: 0;
        position: static;
        z-index: 100;
        margin-top: 0;
    }

    #nav-pg {
        padding-left: 5px !important;
        padding-right: 10px !important;
    }

    #pgNavigation li {
        margin-left:0px !important;
        margin-right:0px !important;
        padding-left: 0px !important;
    }
    
    #pgLogo.open {
        position: static;
        width: 100%;
        /*background-color:white;*/
        z-index:101;
    }
    
    #pgNavigation ul.open {
        position: static;
        max-height: 1000px; 
        /*background-color: white;*/
    }
    #pgNavigation ul li { display: block; list-style: none; text-align: left; width: 100%; padding-right: 0; }
    #pgNavigation ul li a { display: block; padding: 15px 10px; border:none; text-decoration: none; }
    #pgNavigation ul.open li a { border-top: 1px solid #ccc;}
    #pgNavigation ul li a:hover { }
}