/* cmsms stylesheet: 1-RESET modified: 03/17/18 17:04:45 */
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;box-sizing: border-box}/* 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;}a {text-decoration:none; color:inherit;}html,
body {height: 100%;}
/* cmsms stylesheet: 2-MAIN modified: 08/09/25 19:46:33 */
/**
*{
Background: rgba(255,0,0,0.1);
}**/

* {
    -webkit-transition: .2s;
    transition: .2s;
}



.white{color:#ffffff;}
.offwhite{color:#fbfbfb;}
.lightgrey{color:#f3f3f3;}
.grey{color:#b0b0b0;}
.gold{color:#FAD73C;}
.blue{color:#283B4F;}
.darkblue{color:#1D1F27;}
.red{color:#c94e50;}

.white-bg{background-color:#ffffff;}
.offwhite-bg{background-color:#fbfbfb;}
.lightgrey-bg{background-color:#f3f3f3;}
.grey-bg{background-color:#b0b0b0;}
.gold-bg{background-color:#FAD73C;}
.blue-bg{background-color:#283B4F;}
.darkblue-bg{background-color:#1D1F27;}
.red-bg{background-color:#c94e50;}


/*** TYPOGRAPHY STYLES ***/

@font-face {
  font-family: 'GT Sectra Fine';
  src: url('https://www.joshuarousen.com/uploads/assets/GT-Sectra-Fine-Bold.eot');
  src: url('https://www.joshuarousen.com/uploads/assets/GT-Sectra-Fine-Bold.woff2') format('woff2'),
       url('https://www.joshuarousen.com/uploads/assets/GT-Sectra-Fine-Bold.woff') format('woff'),
       url('https://www.joshuarousen.com/uploads/assets/GT-Sectra-Fine-Bold.ttf')  format('truetype');
}

h1, h3, h4, p{
        margin-bottom:20px;
}

h1, h2, h3 h4{
        font-family: 'GT Sectra Fine', serif;
}

h1 {
        font-size:46px;
        color:#1D1F27;
        line-height:1.1;
}
h2 {
        font-size:26px;
        color:#c94e50;
        margin-bottom:10px;
}
h3 {
        font-size:22px;
        color:#1D1F27;
}

h4 {
        font-size:20px;
        color:#1D1F27;
}

p {
        font-size:18px;
        color:#1D1F27;
}

.first{
padding-top:20px;
font-size:18px;
font-weight:600;
border-top:2px solid #c94e50;
}

.underline{
display:inline-block;
border-bottom:2px solid #c94e50;
}

strong{
font-family: akagi-pro, sans-serif;
font-style: normal;
font-weight: 600;
}

a {
        color:#c94e50;
        text-decoration:none;
}

}

a:hover {
        color:#FAD73C;
        border-bottom:1px solid #c94e50;
}

.quote{
font-style:italic;
}

ul li{
font-size:16px;
color: #c94e50;
margin-left: 30px;
padding-left: 10px;
margin-bottom: 10px;
list-style-type: disc;
}

.align-right{
text-align:right;
}


/*** MAIN STYLES ***/

html, body {
font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:none;
-ms-overflow-style:scrollbar;
font-family: akagi-pro, sans-serif;
font-style: normal;
font-weight: 300;
font-size:18px;
height:100%;
width:100%;
color:#1D1F27;
line-height:1.6;
-webkit-transition: .3s;
transition: .3s;
max-width:3840px;
margin:0 auto;
}

.gradient{
background: #283B4F;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMjgzYjRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFkMWYyNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #283b4f 1%, #1d1f27 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#283b4f), color-stop(100%,#1d1f27)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #283b4f 1%,#1d1f27 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #283b4f 1%,#1d1f27 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #283b4f 1%,#1d1f27 100%); /* IE10+ */
background: linear-gradient(135deg,  #283b4f 1%,#1d1f27 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283b4f', endColorstr='#1d1f27',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

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

.hpad{
padding-left:20px;
padding-right:20px;
}

.vpad{
padding-top:20px;
padding-bottom:20px;
}

.hpad-s{
padding-left:10px;
padding-right:10px;
}

.vpad-s{
padding-top:10px;
padding-bottom:10px;
}

.valign{
vertical-align:middle;
align-items:center;
align-content:center;
}

.halign{
justify-content:center;
}

.space-around{
justify-content:space-around;
}

.space-between{
justify-content:space-between;
}

.flex-end{
align-content:flex-end;
justify-content: flex-end;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;

}

/**#clients{
margin-top:20px;
}**/

.column {
    flex: 1;
}

.col12, .col11, .col10, .col9, .col8, .col7, .col6, .col5, .col4, .col3, .col2, .col1{
width:100%;
}

img, video{
max-width:100%;
height:auto;
display:block;
}

.left{
float:left;
}

.right{
float:right;
}

#social{
position:fixed;
z-index:99999;
right:0;
}

#menu li,#menu h4 a{
list-style-type:none;
margin:0 15px;
color:#1D1F27;
}

#menu li a, #menu h4 a{
border-bottom:2px solid rgba(255,255,255,0.0);
}

#menu li a:hover, #menu h4 a:hover{
color:#283B4F;
border-bottom:2px solid #FAD73C;
}

content{
z-index:2;
}

/*** HOMEPAGE ***/

/**.item:first-of-type{
width:66.67%;
}**/

.item{
width:33.33%;
position:relative;
}

.portfolio-link{
position: absolute;
margin-left: 10%;
/**float: left;**/
z-index: 9999;
margin-bottom:-20px;
bottom: 0px;
left: 0;
}

/***.portfolio-link h2{
vertical-align:middle;
font-size:30px;
}

.item:first-of-type .portfolio-link h2{
font-size:40px;
}***/


.item-arrow{
display:table;
height:100%;
background-color:#c94e50;
}

.item-arrow p{
height:100%;
display: table-cell;
color:#ffffff;
text-align:center;
vertical-align:middle;
border-left:0px solid #c94e50;
}

/**.item img{
box-shadow:2px 2px 5px rgba(20, 20, 20, 0.8);
}**/

.item:hover a img{
background:#FAD73C;
opacity:.5;
/**box-shadow:3px 3px 8px rgba(80, 80, 80, 0.8);**/
}

.item:hover .item-arrow p, .featured a:hover .item-arrow p{
border-left:40px solid #1D1F27;
}

.item:hover .item-arrow, .featured a:hover .item-arrow{
background-color:#1D1F27;
}

.featured{
padding-top:90px;
padding-bottom:90px;
}

.featured a:hover img{
opacity:.5;
background:#FAD73C;
}

.featuredimage{
position:relative;
border: 2px solid #f3f3f3;
display:block;
}

.featuredimage:hover{
border: 2px solid #FAD73C;
}

.featured .portfolio-link{
position:absolute;
}

.featuredtitle{
font-size:48px;
color:#283B4F;
border-bottom:2px solid #FAD73C;
}

.featured:nth-child(even){
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse; 
}


.featured:nth-child(even) h2,.featured:nth-child(even) p{
padding-left:60px;
}



.featured:nth-child(even) a h2{
padding-left:0px;
}

.overview, .projecttype, .projectdate{
padding-right:60px;
}

.projecttype, .projectdate{
color:#283B4F;
}

.overview{
font-size:18px;
}

.testimonial p{
color:#ffffff;
}

.testimonial p:first-of-type:before{
content: open-quote;
font-size:80px;
float:left;
line-height:50%;
}


.testimonial p:first-of-type:after{
content: close-quote;
font-size:80px;
float:right;
}


.client{
  align-items: center;
  justify-content: center;
}

social a{
width:40px;
height:40px;
padding:0 10px;
background-size:cover;
background-repeat:no-repeat;
text-indent:-99999px;
}

#twitter{
background-image:url(https://www.joshuarousen.com/uploads/images/assets/social-tw.png);
}


#twitter:hover{
background-image:url(https://www.joshuarousen.com/uploads/images/assets/social-tw-over.png);
}


#linkedin{
background-image:url(https://www.joshuarousen.com/uploads/images/assets/social-ld.png);
}

#linkedin:hover{
background-image:url(https://www.joshuarousen.com/uploads/images/assets/social-ld-over.png);
}

#intro{
min-height: 80vh;
}

#intro h1{
font-size:96px;
margin-bottom:0;
}

#intro h1.name{
font-size:112px;
}


.diagonal{
content:'';
border: 1px solid #f3f3f3;
position: fixed;
width:100%;
left:0;
right:0;
transform: rotate(20deg);
overflow:hidden;
z-index:-99999;
}

.diagonal-blue{
content:'';
border: 1px solid #283B4F;
position: fixed;
width:100%;
left:0;
right:0;
transform: rotate(20deg);
overflow:hidden;
z-index:-99999;
}

#pull{
z-index:99999;
position:relative;
}

#main{
z-index:1;
padding-top:200px;
margin-top:-200px;
}

.divider{
border-bottom:2px solid #f3f3f3;
z-index:99999;
}

.divider h2{
font-size:26px;
}



/*** PORTFOLIO ***/

#project img{
height:auto;
/*padding:20px;*/
border:2px solid #f3f3f3;
margin:40px 0;
}

#project p{
width:100%;
}

#project img:first-of-type, #project .fullwidth{
padding:0;
margin-top:0;
}

#inside #menu{
position:fixed;
z-index:9999;
}

#menu h4{
margin:0;
}

#menu h4 a{
color:#c94e50;
}

#description{
padding-top:90px;
height:100%;
position:fixed;
}

#description h2, #description h3, #role{
border-bottom:2px solid #FAD73C;
color:#283B4F;
}

#role{
padding:10px 0;
}

#description ul li{
color:#283B4F;
font-size:18px;
}
#description ul{
border-bottom:2px solid #FAD73C;
}

#testimonials p{
color:#ffffff;
}

.portfolio-link .item-arrow p{
padding-left:20px;
}

/*** MOBILE ***/

@media screen and (max-width:1199px){
#intro h1, #intro h1.name{
font-size:82px;
}
#intro{
min-height:70vh
}
}

@media screen and (max-width:1079px){
#intro h1, #intro h1.name{
text-align:center;
font-size:48px;
}
.underline{
display:block;
}
.client{
width:50%;
}
#menu{
width:100%;
text-align: center;
align-content: center;
justify-content: center;
}
#menusplit{
display:none;
}
#description{
position:relative;
height:auto;
}
.featured:nth-child(2n) h2, .featured:nth-child(2n) p{
padding:0;
}
}