/*  
Theme Name: A-L
Version: 1
Author: MrMRobinson
Author URI: 
*/

@import "css/reset.css";
@import "css/forms.css";

/********************************************
	
	Typography
	
*********************************************/

p { margin: 1em 0; }
h1 { font-size: 25px; font-weight: normal; }
a.back { text-decoration: underline; }
#search h2, #comments h3, #commentform h3, .emptysearch, .error { font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; }

.back:link, .back:visited { color: #f60; }
.back:hover, .back:active, .back:focus { color: #3A525C; }


/********************************************
	
	Layout
	
*********************************************/

body {background: #f4f4f4;}
#wrapper { color: #7d7d7d; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 145%; margin: 0 auto; padding: 0 0em; max-width: 960px; background: #fff; }

#header { margin: 0 0 -1em 0; padding: 3em 0 0 0; position: relative;  padding-left:20px; }
#header .description { font-size: 13px; }
#header a { text-decoration: none; }
#header a:link, #header a:visited { color: #000; text-shadow: 0 1px 2px #fff; }
#header a:hover, #header a:active, #header a:focus { color: #d67580; }
#header h1 a {font-family: 'futura-pt', sans-serif; font-size: 1.8em; font-weight: 700; text-transform: uppercase;}
#home {
font-family: 'futura-pt', sans-serif;
font-size: 3.4em;
font-weight: 700;
text-transform: uppercase;
margin-top: 0px;
padding-top: 20px;
margin-bottom: 0px;
margin-left: 20px;
text-decoration: none;
}

#home {
}

.black {
color: #251c2c;
}

.red {
color: #d67580;
}

.hero {
margin-top:2em;
}

#byline {width: 75%;
text-align: center;
border-bottom-style: dotted;
border-bottom-color: #d67580;
margin-top: 2em;
margin-bottom: 3.75em;
margin-left: 12.5%;
margin-right: 12.5%;}

#byline2 {text-align:center; margin-top: 0px;
font-size: 1.7em;
font-weight: 200;
font-family: 'futura-pt';
color: #d67580;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0;
position: relative;
width: 800px;
text-align: center;
border-bottom-style: dotted;
border-bottom-color: #d67580;
}

#byline3 {
text-align:center; margin-top: 0px;
font-size: 2em;
font-weight: 200;
font-family: 'futura-pt';
color: #d67580;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0;
position: relative;
width: 800px;
text-align: center;
border-bottom-style: dotted;
border-bottom-color: #d67580;
margin-bottom: 95px;
margin-top: 55px;
} 

h1 {
font-family: 'futura-pt', sans-serif;
font-size: 3.55em;
font-weight: 600;
text-transform: uppercase;
text-align: center;
margin-top: 0px;
margin-bottom: 30px;
color: #251c2c;
}

article {
margin-top: 45px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
padding-left: 3px;
padding-right: 3px;
padding-top: 0;
position: relative;
width: 100%;
}

#header .description { margin: .5em 0 0 0 }

.menu {
list-style-type: none;
padding-right: 20px;
padding-top: 0px;
padding-bottom: 10px;
font-family: 'futura-pt', sans-serif;
font-size: 16px;
line-height: 22px; padding-left: 20px; margin-top: 1.2em;
}

.menu a {
text-decoration: none !important;
color: #251c2c;
}

.menu li {display:inline; font-size: 1.3em; margin-right: 1.2em;}

#sidebar .menu li a.active {color: #d67580;}

.post { margin: 2em 0; padding: .5em 0; position: relative;}
.post img.attachment-post-thumbnail { float: left; margin: 0 2em 2em 0; padding: 0; }
.post img, .post object, .post embed { display: block; margin: 0 auto 0.8em auto; }
.post img { max-width: 100%; height: auto; }
.post .number-of-comments a:link, .post .number-of-comments a:visited { color: #CCC }
.post .number-of-comments a:hover, .post .number-of-comments a:active, .post .number-of-comments a:focus { color: #CCC }
.post .vvqbox { margin: 2em auto; }
.post .date { color: #ccc; font-size: 12px; position: absolute; top: 0; right: 0; }

.post h2 a { text-decoration: none; }
.post h2 a:link, .post h2 a:visited { color: #878787; }
.post h2 a:hover, .post h2 a:active, .post h2 a:focus { color: #3A525C; }
.post h2 { font-size: 22px; line-height: 120%; font-weight: normal; }
.post h3 { color: #ccc; margin: 0 0 1em 0; font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: normal; line-height: 120%; }
.post h4 { color: #CCC; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 120%; margin: 2em 0 1em 0; }
.post h5 { color: #CCC;  font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 120%;  margin: 2em 0 1em 0; }
.post blockquote cite { font-style: normal; }
.post .number-of-comments a { text-decoration: underline; font-size: 13px; }
#comments { font-size: 13px; }

.post .number-of-comments { position: absolute; right: 1em; }
.post blockquote { color: #fff; background: #878787; margin: 2em; padding: .1em 1.5em; position: relative; }
.post blockquote cite { display: block; text-align: right; }

.entry {margin-left:4%; margin-right:3%;}
.entry a:link, .comment a:link { color: #CCC }
.entry a:visited, .comment a:visited { color: #CCC }
.entry a:hover, .entry a:active, .entry a:focus, .comment a:hover, .comment a:active, .comment a:focus { color: #3A525C; }
.entry .more-link { font-size: 12px; }

.entry ul { list-style: none inside; padding: 0 1em; }
.entry ol { list-style: decimal outside; padding: 0 2.5em; }
.entry ul li { background: url(img/bullet.gif) 0 7px no-repeat; margin: 1em 0; padding: 0 0 0 15px; }
.entry ol li { margin: 1em 0 }
.entry p {font-size: 17px;
font-family: "futura-pt", arial, helvetica;
line-height: 1.4em;}

#commentform { background: #fff; margin: 2.3em 0 4.6em 0; padding: 0; }
#commentform a:link, #commentform a:visited { color: #3A525C; }
#commentform a:hover, #commentform a:active, #commentform a:focus { color: #CCC; }
.comment { padding: 1.8em 1.6em; position: relative; overflow: hidden; border: 1px solid #f0f0f0; }
.comment .date { bottom: 1em; position: absolute; right: 1em; }
#comments h3 { margin: 0 0 2em 0; font-size: 18px; }
#commentform h3 { margin: 0 0 25px 0; }
#commentform p { font-size: 13px }
.comment cite { font-style: normal; }
.comment cite a { text-decoration: underline; }
#comments h3, #commentform h3 { color: #CCC }
.highlighted { border: 1px solid #f0f0f0;  }
.highlighted a:link, .highlighted a:visited { color: #09C }
.comment cite { color: #CCC }
.comment .moderation { color: #FFF }

.pagination { color: #CCC margin: -2.6em 0 4.6em 0; }
.pagination div { float: left; margin: 0 2em 0 0; }
.pagination a { text-decoration: underline;}
.pagination a:link, .pagination a:visited { color: #CCC; }
.pagination a:hover, .pagination a:active, .pagination a:focus { color: #999; }


#sb-1 { float: left; width: 45%; }
#sb-2 { float: right; width: 45%; }

#sidebar { font-size: 13px; color: #828282; padding: 0 0 0 0; margin: 0em 0 0 0; display:inline-block; }
#sidebar a { text-decoration: none; }
#sidebar a:link, #sidebar a:visited { color: #7d7d7d; }
#sidebar a:hover, #sidebar a:active, #sidebar a:focus { color: #ccc; }
#sidebar #sb-2 a:link, #sidebar #sb-2 a:visited { color: #7d7d7d; }
#sidebar #sb-2 a:hover, #sidebar #sb-2 a:active, #sidebar #sb-2 a:focus { color: #7d7d7d; }
#sidebar .email { background: url(../img/ico-mail.gif) 0 4px no-repeat; padding: 0 0 0 1.8em; }
#sidebar #rss li { background: url(../img/ico-rss.jpg) left center no-repeat; padding: 0; margin: .5em 0; }


#footer { color: #828282; padding: 1em 0; font-size: 10px; min-height:4em; }
#footer p { margin: 0; }

#footer a { text-decoration: none; }
#footer a:link, #footer a:visited { color: #7d7d7d; font-weight: 400; }
#footer a:hover, #footer a:active, #footer a:focus { color: #7d7d7d; }

#footer ul li a {color: #7d7d7d; font-size: 15px; font-family: 'futura-pt'; }
#footer ul li {display: inline-block;
margin-right: 1em;}
#footer ul {margin-left:4%; margin-bottom:2em; float:left; width:auto;}
.footer-widget { margin-bottom: 1.5em;  }
.copy {color: #7d7d7d; font-size: 14px; font-family: 'futura-pt'; float:right; margin-right:3%;}

.home-left {width: 38%; margin-right: 5%; margin-left: 2%; float: left; margin-top: 13%; text-align: center;}
.home-left span { font-size:3em; font-family: 'futura-pt'; font-weight:400; }
.home-right {width: 52%; display: inline-block;}

/********************************************
	
	Slideshow - Portfolio
	
*********************************************/

#slides {margin-bottom:90px;}
.slidesjs-navigation {color: #d67580; font-size:2.2em;}
.slidesjs-container {margin-top:1em; margin-bottom:2em;}
.slidesjs-previous {margin-left:80px;}

#coming-soon {margin-top: 3em; margin-bottom: 5em; text-align: center;}
#coming-soon p {font-size:1em;}

.photo-nav {
width: 100%;margin: 0 auto; padding-left: 3px; padding-right: 3px;
}

.photo-nav ul {width: 800px; margin-top: 0px;
font-weight: 400;
font-family: 'futura-pt';
color: #d67580;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
position: relative;
text-align: center;
border-bottom-style: dotted;
border-bottom-color: #d67580;}

.photo-nav ul li {width: auto; display: inline; margin-right: 1em; font-size: 1.1em; line-height: 2em;}
.photo-nav ul .current {color:#251c2c;}
.photo-nav ul li a {color: #d67580; }
.photo-nav ul li a.current {color: #251c2c; }

/********************************************
	
	Thumbnails - Portfolio
	
*********************************************/


.cbp-rfgrid {
    margin: 35px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 92%;
margin: 0 auto; margin-top:3em;
}
 
.cbp-rfgrid li {
    position: relative;
    display:inline-block;
    overflow: hidden;
    width: 16.6666667%; /* Fallback */
    width: -webkit-calc(100% / 4);
    width: calc(100% / 4); padding: 0; margin-bottom: 2em;
}

.cbp-rfgrid li.double {width: calc(100% / 2); padding: 0; margin-bottom: 2em;}
.cbp-rfgrid li.double2 {width: calc(99% / 2); padding: 0; margin-bottom: 2em;}
 
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
    display: block;
    width: 100%;
    cursor: pointer; border:none!important;
}
 
.cbp-rfgrid li a img {
    max-width: 90%; margin: 0 auto;
}

.cbp-rfgrid li.double a img {
    max-width: 95%; }

.cbp-rfgrid li.double2 a img {
    max-width: 95%; }

 
/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    background: rgba(71,163,218,0.2);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}
 
.cbp-rfgrid li a:hover div {
    opacity: 1;
}
 
.cbp-rfgrid li a div h3 {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4em;
    letter-spacing: 2px;
    padding: 0 10px;
}
 
/* Example for media query: change number of items per row */
 
@media screen and (max-width: 1190px) {
    .cbp-rfgrid li {
        width: 20%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}
 
@media screen and (max-width: 945px) {
    .cbp-rfgrid li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}
 
@media screen and (max-width: 660px) {
    .cbp-rfgrid li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}

 
@media screen and (max-width: 400px) {
    .cbp-rfgrid li {
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }
.cbp-rfgrid li {width: calc(100% / 1);}
.cbp-rfgrid li.double {width: calc(100% / 1);}
.cbp-rfgrid li.double2 {width: calc(100% / 1);}

}
 
@media screen and (max-width: 300px) {
    .cbp-rfgrid li {
        width: 100%;
    }
}


/********************************************
	
	Form Styles
	
*********************************************/

.input-text, textarea { background: #f0f0f0; border: none; font-size: 13px; padding: .3em; }
label { font-size: 1em; margin: 0 .5em; }
#search-form label { position: absolute; top: -99999px; }
p.input-submit { text-align: right }
#commentform input { width: 43% }
#commentform textarea { font-size: 1em; font-family: Helvetica, Arial, sans-serif; width: 560px; }
#commentform #submit-comment { width: auto; font-size: 14px; border: 0; padding: 5px; background: #3A525C; color: #fff; }
#search-form #submit { padding: 1px 13px; margin: 0 0 0 5px; }
#search h2, .emptysearch, .error { color: #CCC; }



.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

@media (max-width: 900px) {

.hero {width: 100%;}
article {
margin-top: 30px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 25px;
padding-top: 0;
position: relative;
width: 90%; 
}

h1 {
font-family: 'futura-pt', sans-serif;
font-size: 2.4em;
text-align: center;
color: #251c2c;
}

#byline2 {
margin-top: 0px;
font-size: 1.7em;
font-weight: 200;
font-family: 'futura-pt';
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
padding-left: 0px;
padding-right: 0px;
padding-top: 0;
position: relative;
width: 100%;
text-align: center;
}

}

/* Smartphones landscape */
@media (max-width: 480px) {
	
	#wrapper { width: 380px; padding: 0em; }
	#wrapper .post img { width:  100%; height: auto;}
	
	.post .date { right: auto; left: 0; }
	
	 #commentform textarea  { width: 380px; }
	 
	 #sb-1 { width: 42%; }
	 #sb-2 { width: 42%; }

#header a:link {padding:0; margin:0; line-height:.9em;}
.menu {float: left;
width: 100%;
margin-top: 2em; padding-left:0em;}	
.menu li {display: inline-block; font-size:1.2em; line-height:1.7em;
margin-right: 1.5em;}
#home-banner {margin-top: 1em;
margin-bottom: 2em;}

#byline {width:100%; margin-left:0; margin-right:0;}	
#byline2 {width:100%; margin-left:0; margin-right:0; padding-bottom:50px;}	
#byline3 {width:100%; margin-left:0; margin-right:0;}

.slidesjs-previous {margin-left:15px;}
#slides {margin-bottom:60px;}
h1 {margin-bottom:10px; line-height:1.2em;}
.photo-nav ul {width: 90%; font-size: .9em;}
.photo-nav {}
}

/* Smartphones horizontile */
@media (max-width: 320px) {
	
	#wrapper { width: 280px; padding: 0 0.5em; }
	#wrapper .post img { width:  100%; height: auto;}
	
	 #commentform textarea  { width: 260px; }
	
}