/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:focus {
    outline: 0;
}

/* reset end * /

/* fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 16, 2011 */

@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('helveticaneue-lightcond-webfont.eot');
    src: url('helveticaneue-lightcond-webfont.eot?iefix') format('eot'),
         url('helveticaneue-lightcond-webfont.woff') format('woff'),
         url('helveticaneue-lightcond-webfont.ttf') format('truetype'),
         url('helveticaneue-lightcond-webfont.svg#webfontqSVbfnBF') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeueLTPro55Roman';
    src: url('helveticaneueltpro-roman-webfont.eot');
    src: url('helveticaneueltpro-roman-webfont.eot?iefix') format('eot'),
         url('helveticaneueltpro-roman-webfont.woff') format('woff'),
         url('helveticaneueltpro-roman-webfont.ttf') format('truetype'),
         url('helveticaneueltpro-roman-webfont.svg#webfontQmdrV9qG') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('helveticaneue_light-webfont.eot');
    src: url('helveticaneue_light-webfont.eot?iefix') format('eot'),
         url('helveticaneue_light-webfont.woff') format('woff'),
         url('helveticaneue_light-webfont.ttf') format('truetype'),
         url('helveticaneue_light-webfont.svg#webfontJo0vYGlf') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* fonts end */

body {
	background: #fffef3;
	font-size: 14px;
	line-height: 1.5;
	color:#bfbebd;
	font-family: 'HelveticaNeueRegular';
}

a {
    color:#f4a623;
    text-decoration: underline;
}
a:hover { text-decoration: none;}

/* common styles end */

/* Layout */

.b-wrapper {
    width: 80vw;
	min-width:900px;
    position:relative;
    margin: 0 auto;
}
.b-content {
	position: relative;
	padding-bottom: 100px;
}
.b-main {
	background:url(../images/line.png) repeat-x bottom left;
	padding: 20px 0 24px;
}
/* Layout end */

/* header styles */
.b-header {
	position: relative;
	background:url(../images/line.png) repeat-x bottom left;
	padding-bottom: 8px;
}
.b-logo {
	display: block;
	margin: 0 auto;
	width: 178px;
	padding: 28px 0 40px;
}
.b-logo a, .b-logo strong {
	display: block;
	width: 178px;
	height: 100px;
	text-decoration: none;
	text-indent: -9999px;
	background: url(../images/logo.png) no-repeat top left;
}
/* header styles end */

/* menu */
.b-menu {
    position: relative;
	display: block;
	text-align: center;
    margin-bottom: 5px;
}
.b-menu_item {
	color: #fdbe57;
    display: inline-block;
}
.b-menu_item a {
	text-decoration: none;
	color: #706f73;
	font-size: 12px;
    letter-spacing: 1px;
	font-family: 'HelveticaNeueLight';
	text-transform: uppercase;
	padding: 0 15px;
    border-right: 1px solid #fdbe57;
}

.b-menu_item:last-of-type a {
    border-right: none;
}

.b-menu_item.active a {
    color:#fdbe57;
}
.b-menu .b-menu_list {
	text-align: center;
	height: 39px;
	display:block;
	position:relative;
}
.b-menu .b-menu_list  .b-menu_list_item {
	display: inline-block;
	list-style: none;
	vertical-align: top;
	height: 39px;
}
.b-menu .b-menu_list li a {
	text-decoration: none;
	text-transform: uppercase;
	color:white;
	font-size: 12px;
	display: block;
	line-height: 42px;
	height:40px;
	padding: 0 15px;
	position:relative;
	font-family: 'AvenirLT65MediumBold';
}

/* slider */
/*setting gallery image container properties using CSS Grid*/
#gallery_image {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-gap: 20px;
}
article {
	font-family: 'HelveticaNeue';
	text-align: left;
	color: #bfbebd;
	font-size: 13px;
}

/*setting default image size so that it doesn't expand page*/
#gallery_image article img {
    max-width: 100%;
}

/*class-specific styles defined in portfolio.html*/
.port-2 {
    grid-column: span 2;
}

.port-3 {
    grid-column: span 3;
}

.port-4 {
    grid-column: span 4;
}

.port-5 {
    grid-column: span 5;
}

.port-6 {
    grid-column: span 6;
}

.port-7 {
    grid-column: span 7;
}

.port-8 {
    grid-column: span 8;
}

.port-9 {
    grid-column: span 9;
}

.port-10 {
    grid-column: span 10;
}

.port-11 {
	grid-column: span 11;
}

.port-12 {
	grid-column: span 12;
}

.port-13 {
    grid-column: span 13;
}

.port-14 {
    grid-column: span 14;
}

.port-15 {
    grid-column: span 15;
}

.port-20 {
    grid-column: span 20;
}

.port-21 {
	grid-column: span 8;
	grid-row: 2;
}

.port-22 {
    grid-column: span 12;
    grid-row: span 2;
}

.port-23 {
    grid-column: span 13;
    grid-row: span 2;
}

.port-24 {
    grid-column: span 20;
    grid-column-start: 5;
	grid-column-end: 16;
}

.port-25 {
    grid-column: span 6;
    grid-column-start: 2;
	grid-column-end: 8;
}

.port-26 {
    grid-column: span 14;
    grid-row: span 2;
}

.port-27 {
    grid-column: span 15;
    grid-row: span 2;
}

.port-28 {
    grid-column: span 7;
    grid-row: span 2;
}


.caption {
	margin-top: 1em;
	margin-bottom: 1em;
	display: block;
}


/*remove mobile images--made visible in media query below*/
#gallery_image .mobile {
    display: none;
}

.b-slider {
	overflow: hidden;
}
.b-image_container {
	position: relative;
	width: 100%;
	text-align: center;
}
.b-image_container {
	cursor: pointer;
    overflow: hidden;
    position: relative;
}

.bottom {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 20px;
}

.b-image_text {
	grid-column: span 1;
}
.b-image_nav {
	padding-top: 13px;
}
.b-image_paging, .b-subpages {
	display: block;
	float: right;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	border-left: 1px solid #fcbe56;
	padding-top: 13px;
}
.b-subpages  {
	width: 30px;
	padding-left:15px;
	padding-right: 15px;
	vertical-align: middle;
	padding-top: 13px;
	text-align: center;
}

.b-subpages table td {
	vertical-align: middle;
	height: 72px;
}
.b-subpages ul{
	width: 26px;
	text-align: center;
    padding-bottom: 0;
	position: relative;
}
.b-subpages li {
	font-family: 'HelveticaNeueLTPro55Roman';
	font-size: 14px;
	color: #706f73;
	cursor: pointer;
	line-height: 24px;
}
.b-subpages li:hover, .b-subpages li.current {
	color: #f4a623;
}
.b-image_paging {
	padding-left: 17px;
	width: 180px;
}
.b-image_paging li {
	display: block;
	float: left;
	width: 18px;
	height: 18px;
	border: 1px solid #b2b2b2;
	margin-left: 10px;
	margin-bottom: 10px;
	text-indent: -9999px;
	cursor: pointer;
}
.b-image_paging li:hover, .b-image_paging li.current {
	border:0;
	width: 20px;
	height: 20px;
	background: #fcbe56;
}
.b-image_text {
	padding-top: 20px;
	/*font-weight: bold;*/
	font-weight: normal;
	color:#b8b7b7;
	font-family: HelveticaNeueLTPro55Roman;
}
.b-image_text p {
	font-size:12px;
	line-height: 17px;
}
.b-image_text strong {
	color:#706f73;
}
.b-image_text a strong,.b-image_text a {
	color:#F4A623;
	text-decoration: none;
}


.work1 #gallery_first {
	width:064.1%;
	float:left;
	margin-right:1.8%;
}
.work1 #gallery_second {
	width:34.1%;
	float:right;
	margin-bottom: 1vw;
}
.work1 #gallery_third {
	width:34.1%;
	float:right;
}
/* slider end */

/* home page */
.b-projects_list,
.b-lprojects_list,
.b-aprojects_list,
.b-sprojects_list {
	display: block;
	overflow: hidden;
}
.b-projects_list .b-projects_list_item,
.b-lprojects_list .b-lprojects_list_item,
.b-aprojects_list .b-aprojects_list_item,
.b-sprojects_list .b-sprojects_list_item {
	display: block;
	float: left;
	min-width: 150px;
	min-height: 150px;
	width: 16.665%;
	height: auto;
	position: relative;
	background-color: #bbbaba;
}
.b-projects_list .b-projects_list_item a,
.b-lprojects_list .b-lprojects_list_item a,
.b-aprojects_list .b-aprojects_list_item a,
.b-sprojects_list .b-sprojects_list_item a {
	width: 100%;
	height: 100%;
	display: block;
	background-color: #F4A623;
}
.b-projects_list .b-projects_list_item a:hover img,
.b-lprojects_list .b-lprojects_list_item a:hover img,
.b-aprojects_list .b-aprojects_list_item a:hover img,
.b-sprojects_list .b-sprojects_list_item a:hover img {
	opacity: 0.3;
}
.b-projects_list .b-projects_list_item span,
.b-lprojects_list .b-lprojects_list_item span,
.b-aprojects_list .b-aprojects_list_item span,
.b-sprojects_list .b-sprojects_list_item span {
	display: none;
	position: absolute;
	z-index: 1;
	color: black;
	top:5px;
	left:5px;
}
.b-projects_list .b-projects_list_item img,
.b-lprojects_list .b-lprojects_list_item img,
.b-aprojects_list .b-aprojects_list_item img,
.b-sprojects_list .b-sprojects_list_item img {
	display:block;
	width: 100%;
	height: auto;
}

/* about */
.b-text_about {
	padding: 30px 0 37px;
}
.b-text_about p {
	font-size: 22px;
	line-height: 44px;
    margin-bottom: .5em;
	/*font-family: HelveticaNeueLTPro55Roman;*/
	font-family: HelveticaNeueLTPro55Roman;
	text-align: left;
}
/* about end */

/* contacts */
.b-text_contact p {
	font-size: 28px;
	line-height: 50px;
	/*font-family: HelveticaNeueLTPro55Roman;*/
	font-family: HelveticaNeueLTPro55Roman;
	text-align: center;
}

.b-text_contact {
    padding: 100px 0;
}

.b-left, .b-right {
	display: inline-block;
	width: 325px;
	padding: 9px 23px 0;
	vertical-align: top;
	font-family: 'HelveticaNeueLTPro55Roman';
	color:#bbbaba;
	font-size: 13px;
}

.b-left {
	line-height: 19px;
}

.b-form dt {
	margin-bottom: 4px;
}

.b-form dd {
	margin-bottom: 15px;
}

.b-f-text, .b-f-textarea {
	border-width: 1px;
	border-style: solid;
	border-color: #8e8e8e #cecece #e4e4e4;
	width: 178px;
	padding: 2px;
	height: 13px;
	line-height: 16px;
	font-size: 13px;
	font-family: 'HelveticaNeueLTPro55Roman';
}

.b-f-textarea {
	height: 85px;
    width: 318px;
}

.b-f-btn {
	background: none repeat scroll 0 0 #FAB300;
    border-color: #CCCCCC #787878 #787878 #CCCCCC;
    border-style: solid;
    border-width: 1px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    padding: 1px;
}

.b-form .b-f-last {
	margin-bottom: 0;
}
/* contacts end */

/*remove mobile images--made visible in media query below*/
#gallery_image .mobile {
    display: none;
}

.b-mobilenav, .b-mobilenav * {
    display: none;
}

nav input[type='checkbox'], nav label {
    display: none;
}

a.bottom-nav {
    display: none;
}

/*Media Queries*/
/*Mobile*/
@media only screen and (max-width: 822px) {
    nav {
        display: flex;
        flex-flow: row;
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%;
    }
    
    .caption {
        margin: 0;

    }

    .b-text_about p {
        font-size: 16px;
        line-height: 30px;
    }

    .b-text_contact p {
        font-size: 18px;
        line-height: 32px;
    }

    .port-29 img {
        display: none;

    }
   
    .b-content.about{
        background:url(../images/line.png) repeat-x bottom left;
        padding-bottom: 0;
        margin-bottom: 50px;
    }

    .b-content.contact{
        background:url(../images/line.png) repeat-x bottom left;
        padding-bottom: 0;
        margin-bottom: 50px;
    }

    .bar1, .bar2, .bar3 {
      width: 25px;
      height: 2px;
      background-color: #A0A0A0;
      margin: 5px 0;
      transition: 0.4s;
    }
    
    .bar1 {
        margin-top: 0;
    }

    label.change .bar1 {
      transform: translate(0, 7px) rotate(-45deg);
    }

    label.change .bar2 {
        opacity: 0;
    }

    label.change .bar3 {
      transform: translate(0, -7px) rotate(45deg);
    }
    
    nav label {
        display: inline-block;
        width: 25px;
        font-size: 20px;
        text-align: right;
        display: block;
        line-height: 1.6em;
        cursor: pointer;
    }
    
    .b-menu {
        width: auto;
        display: block;
    }
    
    .b-menu_item {
        text-align: left;
        display: block;
        width: 100%;
        transition: 0.4s;
    }
    
    .b-menu_item a {
        padding: 0;
        font-size: 16px;
        border-right: none;
        width: 100%;
    }
    
    input[type='checkbox']:not(:checked)+ul .b-menu_item a {
        display: none;
        opacity: 0;
        transition: 0.4s;
        
    }
    
    input[type='checkbox']:not(:checked)+ul .b-menu_item.active a {
        display: block;
        opacity: 1;
        height: 2em;
    }
    
    input[type='checkbox']:not(:checked)+ul .b-menu_item.active {
        height: 2em;
    }
    
    input[type='checkbox']:checked+ul .b-menu_item {
        height: 2em;
        display: block;
    }
    
    .b-mobilenav {
        border-bottom: 1px solid #fdbe57;
    }
    
    .b-mobilenav,
    .b-mobilenav * {
        width: 100%;
        display: block;
        overflow: hidden;
    }
    .b-mobilenav ul {
        float: none;
        text-align: right;
        line-height: 1em;
        display: block;
        padding-left: 0;
        padding-bottom: 5px;
        margin-bottom: 0;
        padding-top: 5px;
        border: none;
        width: 100%;
    }
    
    .bottom {
        grid-template-columns: 2fr;
    }
    
    .b-image_paging {
        width: 100%;
        text-align: center;
    }
    
    .b-image_paging .pages {
        display: inline-block;
        margin: 0 auto;
        height: auto;
        text-align: center;
    }
    
    
    .b-image_paging li,
    .b-mobilenav li {
        display: none;
        border: none;
        width: auto;
        height: auto;
        text-indent: 0;
        font-family: 'HelveticaNeueRegular';
    }
    
    .b-image_paging li:hover, .b-image_paging li.current {
        display: none;
        width: auto; 
        height: auto;
        background: none;
    }
    
    .b-main {
        background: none;
    }
    
    .home .b-main {
        background: url(../images/line.png) repeat-x bottom left;

    }

    #image_text {
        background: url(../images/line.png) repeat-x bottom left;
        padding-bottom: 15px;
    }
    
    .b-image_nav, .b-image_paging {
        padding-top: 0;
        padding-left:0;
        float: none;
        padding-bottom: 0;
        margin-bottom: 0;
        border-left: none;
    }
    
    .b-image_paging li {
        margin-bottom: 0;
        margin-left: 0;
        float: none;
    }
    
    .b-image_paging li.next,
    .b-mobilenav li.next,
    .b-image_paging li.prev,
    .b-mobilenav li.prev,
    .b-image_paging li.current,
    .b-mobilenav li.current {  
        display: inline-block;
        color: rgba(100,100,100,0);
        cursor: pointer;
        font-size: 0;
    }
    
    .b-image_paging li.next::before,
    .b-mobilenav li.next::before,
    .b-image_paging li.prev::before,
    .b-mobilenav li.prev::before,
    .b-image_paging li.current::before,
    .b-mobilenav li.current::before {
        visibility: visible;
        color: #A0A0A0;
        font-size: 16px;
        font-family: 'HelveticaNeueLight';
        text-transform: uppercase;
    }
    
    .b-image_paging li.next:hover:before,
    .b-mobilenav li.next:hover:before,
    .b-image_paging li.prev:hover:before,
    .b-mobilenav li.prev:hover:before {
        color: #fdbe57;
    }
    
    .b-image_paging li.next::before,
    .b-mobilenav li.next::before {
        content: "Next";
    }
    .b-image_paging li.prev::before,
    .b-mobilenav li.prev::before {
        content: "Back";
    }
    
    .b-image_paging li.current::before,
    .b-mobilenav li.current::before {
        content: "\2022";
        margin: 0 10px;
        font-size: 8px;
        line-height: 23px;
    }
    
    .b-image_paging li.current:nth-child(1)::before,
    .b-mobilenav li.current:nth-child(1)::before,
    .b-mobilenav li.current:last-of-type::before,
    .b-image_paging li.current:last-of-type::before{
        content: "";
        margin: 0;
    }
    
    a.bottom-nav {
        color: rgb(160, 160, 160);
        display: inline-block;
        text-transform: uppercase;
        text-decoration: none;
        font-family: 'HelveticaNeueLight';
        font-size: 16px;
    }
    
    a.bottom-nav:hover {
        color: #fdbe57;
    }
    
    a.bottom-nav:after {
        content: "\2022";
        margin: 0 10px;
        font-size: 8px;
        line-height: 23px;
    }

  .b-wrapper {
      width: 80%;
  }
  
  .b-projects_list .b-projects_list_item {
      width: 150px;
      height: 150px;
  }
  
  .b-p {
      background-size: 300px 2700px;
      
  }
}


@media screen and (max-width: 1150px){
	.b-wrapper {
		max-width: 750px;
		min-width: 450px;
	}
    .b-projects_list .b-projects_list_item {
        width: 33%;
        height: auto;
    }
}
@media screen and (max-width: 700px){
	.b-wrapper {
		max-width: 500px;
		min-width: 300px;
	}
    .b-projects_list .b-projects_list_item {
        width: 50%;
        height: auto;
    }
	#gallery_image {
		grid-template-columns: 1fr;
		grid-column-gap: 0;
	}
	#gallery_image article { 
		grid-column: span 1;
	}
	#gallery_image .mobile {
        display: block;
		grid-column: span 1;
    }
	#gallery_image .not-mobile {
		display: none;
	}
}