body{
width: 100vw!important;
overflow-x: hidden!important;
}
.sofp_slider{
width: 100%;
height: 450px;
position:relative;
overflow: hidden;
}
.sofp_slider_inner{
width:100%;
position:relative;
height: 100%;
overflow: hidden;
}
.sofp_project_body {
width: 100%;
height: 100%;
position: relative;
padding: 10px;
border-radius: 6px;
overflow: hidden!important;
cursor: pointer!important;
}
.sofp_project_fade,
.sofp_project_image {
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
left: 15px;
top: 15px;
background-size: cover;
background-position:center;
border-radius: 6px!important;
overflow:hidden!important;
}
.sofp_project_fade {
background-color: rgba(255, 255, 255, 0);
transition: all 500ms cubic-bezier(1.000, 0.005, 0.655, 1.000); transition-timing-function: cubic-bezier(1.000, 0.005, 0.655, 1.000); }
.sofp_project_fade:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.sofp_project_meta {
position: absolute;
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
display: flex;
flex-direction: column; padding: 10px;
gap: 10px;
align-items: flex-start;
}
.sofp_project_title {
padding: 8px 0px 1px 3px;
border-bottom: 1px solid white;
border-top: 1px solid white;
color: white;
font-family: var(--font);
font-size: 17px;
text-transform: uppercase;
}
.sofp_project_subtitle {
color: white;
font-family: var(--font);
font-size: 14px;
}
.slick-list, .draggable,
.slick-list, .slick-slider, .slick-track {
height: 100%!important;
position:absolute;
left: 0px;
top: 0px;
width: 100%;
}
.sofp_slider_faders{
position:absolute;
left: 0px;
top: 0px;
width: 200px;
height: 100%;
background-color: red;
z-index: 999999999!important;
background: linear-gradient(-90deg, rgba(13,28,61,0) 43%, rgba(13,28,61,1) 100%);
pointer-events: none;
transition: all 500ms cubic-bezier(1.000, 0.005, 0.655, 1.000); transition-timing-function: cubic-bezier(1.000, 0.005, 0.655, 1.000); }
.sofp_fader_r{
right: 0px;
left: unset;
transform: rotate(180deg);
}
.sofp_slider:hover > .sofp_slider_faders{
width: 100px;
}
.sofp_projectslider_ft {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.sofp_ft_inner {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
max-width: 1080px;
}
.sofp_header_slider {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
.sofp_projectenslider_header {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
div.et_pb_code_inner{
width: 100%;
height: 100%;
}
.sofp_header_slider.slick-initialized.slick-slider {
height: 100%;
position: absolute;
}
.sofp_header_inner {
width: 90%;
max-width: 1340px;
margin-bottom: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
div#sofp_titles_slider {
position: relative;
width: 300px;
height: 120px!important;
position: relative;
}
.sof_title > h5 {
font-size: 26px;
border-top: 2px solid white;
padding: 6px;
color: white;
font-family: var(--font);
font-weight: 500;
border-bottom: 2px solid white;
padding: 13px 24px 6px 0px;
float: left;
}
.sof_title > h4 {
font-size: 15px;
font-family: var(--font);
margin-top: 9px;
font-size: 18px;
color: white;
font-weight: 300;
width: 100%;
float: none;
display: flex;
margin-top: 21px;
padding-top: 13px;
}
.sof_title {
display: flex;
flex-direction: column;
}
.sofplist_title {
color: white;
font-size: 25px;
font-weight: 600;
font-family: var(--font);
}
.sofplist_project_item {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 30px;
min-height: 400px;
margin-bottom: 50px;
}
.sofplist_project_content {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
align-items: flex-start;
justify-content: center;
gap: 10px;
}
.sofplist_title {
color: white;
font-size: 25px;
font-weight: 600;
font-family: var(--font);
}
.sofplist_project_cover {
width: 100%;
min-height: 400px;
background-size: cover;
background-position: center;
border-radius: 6px;    
}
.sof_lightbox{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.sof_lightbox_body{
position: relative;
max-width: 90%;
max-height: 90%;
}
.sof_lightbox_close{
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2052.3%20(67297)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Ejollycons-%5Bcategory%5D%2Ficons%2Fsvg%2Ficon-ui-1-close%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icons---export%22%20transform%3D%22translate(-124.000000%2C%20-58.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22row-1%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon---2%22%20transform%3D%22translate(64.000000%2C%200.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23ec622c%22%20d%3D%22M12%2C13.4142136%20L4.70710678%2C20.7071068%20C4.31658249%2C21.0976311%203.68341751%2C21.0976311%203.29289322%2C20.7071068%20C2.90236893%2C20.3165825%202.90236893%2C19.6834175%203.29289322%2C19.2928932%20L10.5857864%2C12%20L3.29289322%2C4.70710678%20C2.90236893%2C4.31658249%202.90236893%2C3.68341751%203.29289322%2C3.29289322%20C3.68341751%2C2.90236893%204.31658249%2C2.90236893%204.70710678%2C3.29289322%20L12%2C10.5857864%20L19.2928932%2C3.29289322%20C19.6834175%2C2.90236893%2020.3165825%2C2.90236893%2020.7071068%2C3.29289322%20C21.0976311%2C3.68341751%2021.0976311%2C4.31658249%2020.7071068%2C4.70710678%20L13.4142136%2C12%20L20.7071068%2C19.2928932%20C21.0976311%2C19.6834175%2021.0976311%2C20.3165825%2020.7071068%2C20.7071068%20C20.3165825%2C21.0976311%2019.6834175%2C21.0976311%2019.2928932%2C20.7071068%20L12%2C13.4142136%20Z%22%20id%3D%22close%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22slices%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');;
background-size: cover;
cursor: pointer;
}
.sof_lightbox img{
width: 100%;
height: 100%;
object-fit: contain;
}
a.sof_menu_item_active {
color: Var(--secondary) !important;
font-weight: bold !important;
}
div.et_pb_text_inner > h1,
div.et_pb_text_inner > h2,
div.et_pb_text_inner > h3 {
font-weight: 700 !important;
}
li.sof_menu_item.sof_menu_item_poi > a.sof_menu_item_active {
color: white !important;
} 
div.sof_corepoint{
cursor: pointer!important;
}
@media only screen and (max-width: 600px){
.sofp_slider_faders{
display: none!important;
}
.sofp_ft_inner {
width: 100%;
flex-direction: column-reverse;
max-width: 1080px;
gap: 20px;
}
.sofplist_project_item{
grid-template-columns: 1fr;
grid-gap: 0px;
margin-bottom: 50px;
display: flex;
flex-direction: column-reverse;
}
body{
width: 100vw!important;
overflow-x: hidden!important;
}
.sofp_slider{
width: 100%;
height: 450px;
position:relative;
overflow: hidden;
}
.sofp_slider_inner{
width:100%;
position:relative;
height: 100%;
overflow: hidden;
}
.sofp_project_body {
width: 100%;
height: 100%;
position: relative;
padding: 10px;
border-radius: 6px;
overflow: hidden!important;
cursor: pointer!important;
}
.sofp_project_fade,
.sofp_project_image {
width: calc(100% - 30px);
height: calc(100% - 30px);
position: absolute;
left: 15px;
top: 15px;
background-size: cover;
background-position:center;
border-radius: 6px!important;
overflow:hidden!important;
}
.sofp_project_fade {
background-color: rgba(255, 255, 255, 0);
transition: all 500ms cubic-bezier(1.000, 0.005, 0.655, 1.000); transition-timing-function: cubic-bezier(1.000, 0.005, 0.655, 1.000); }
.sofp_project_fade:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.sofp_project_meta {
position: absolute;
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
display: flex;
flex-direction: column; padding: 10px;
gap: 10px;
align-items: flex-start;
}
.sofp_project_title {
padding: 8px 0px 1px 3px;
border-bottom: 1px solid white;
border-top: 1px solid white;
color: white;
font-family: var(--font);
font-size: 17px;
text-transform: uppercase;
}
.sofp_project_subtitle {
color: white;
font-family: var(--font);
font-size: 14px;
}
.slick-list, .draggable,
.slick-list, .slick-slider, .slick-track {
height: 100%!important;
position:absolute;
left: 0px;
top: 0px;
width: 100%;
}
.sofp_slider_faders{
position:absolute;
left: 0px;
top: 0px;
width: 200px;
height: 100%;
background-color: red;
z-index: 999999999!important;
background: linear-gradient(-90deg, rgba(13,28,61,0) 43%, rgba(13,28,61,1) 100%);
pointer-events: none;
transition: all 500ms cubic-bezier(1.000, 0.005, 0.655, 1.000); transition-timing-function: cubic-bezier(1.000, 0.005, 0.655, 1.000); }
.sofp_fader_r{
right: 0px;
left: unset;
transform: rotate(180deg);
}
.sofp_slider:hover > .sofp_slider_faders{
width: 100px;
}
.sofp_projectslider_ft {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.sofp_ft_inner {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
max-width: 1080px;
}
.sofp_header_slider {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
.sofp_projectenslider_header {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
div.et_pb_code_inner{
width: 100%;
height: 100%;
}
.sofp_header_slider.slick-initialized.slick-slider {
height: 100%;
position: absolute;
}
.sofp_header_inner {
width: 90%;
max-width: 1340px;
margin-bottom: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
div#sofp_titles_slider {
position: relative;
width: 300px;
height: 120px!important;
position: relative;
}
.sof_title > h5 {
font-size: 26px;
border-top: 2px solid white;
padding: 6px;
color: white;
font-family: var(--font);
font-weight: 500;
border-bottom: 2px solid white;
padding: 13px 24px 6px 0px;
float: left;
}
.sof_title > h4 {
font-size: 15px;
font-family: var(--font);
margin-top: 9px;
font-size: 18px;
color: white;
font-weight: 300;
width: 100%;
float: none;
display: flex;
margin-top: 21px;
padding-top: 13px;
}
.sof_title {
display: flex;
flex-direction: column;
}
.sofplist_title {
color: white;
font-size: 25px;
font-weight: 600;
font-family: var(--font);
}
.sofplist_project_item {
display: grid;
grid-template-columns: 2fr 3fr;
grid-gap: 30px;
min-height: 400px;
margin-bottom: 50px;
}
.sofplist_project_content {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
align-items: flex-start;
justify-content: center;
gap: 10px;
}
.sofplist_title {
color: white;
font-size: 25px;
font-weight: 600;
font-family: var(--font);
}
.sofplist_project_cover {
width: 100%;
min-height: 400px;
background-size: cover;
background-position: center;
border-radius: 6px;    
}
.sof_lightbox{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.sof_lightbox_body{
position: relative;
max-width: 90%;
max-height: 90%;
}
.sof_lightbox_close{
position: absolute;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2052.3%20(67297)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Ejollycons-%5Bcategory%5D%2Ficons%2Fsvg%2Ficon-ui-1-close%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icons---export%22%20transform%3D%22translate(-124.000000%2C%20-58.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22row-1%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon---2%22%20transform%3D%22translate(64.000000%2C%200.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23ec622c%22%20d%3D%22M12%2C13.4142136%20L4.70710678%2C20.7071068%20C4.31658249%2C21.0976311%203.68341751%2C21.0976311%203.29289322%2C20.7071068%20C2.90236893%2C20.3165825%202.90236893%2C19.6834175%203.29289322%2C19.2928932%20L10.5857864%2C12%20L3.29289322%2C4.70710678%20C2.90236893%2C4.31658249%202.90236893%2C3.68341751%203.29289322%2C3.29289322%20C3.68341751%2C2.90236893%204.31658249%2C2.90236893%204.70710678%2C3.29289322%20L12%2C10.5857864%20L19.2928932%2C3.29289322%20C19.6834175%2C2.90236893%2020.3165825%2C2.90236893%2020.7071068%2C3.29289322%20C21.0976311%2C3.68341751%2021.0976311%2C4.31658249%2020.7071068%2C4.70710678%20L13.4142136%2C12%20L20.7071068%2C19.2928932%20C21.0976311%2C19.6834175%2021.0976311%2C20.3165825%2020.7071068%2C20.7071068%20C20.3165825%2C21.0976311%2019.6834175%2C21.0976311%2019.2928932%2C20.7071068%20L12%2C13.4142136%20Z%22%20id%3D%22close%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22slices%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');;
background-size: cover;
cursor: pointer;
}
.sof_lightbox img{
width: 100%;
height: 100%;
object-fit: contain;
}
a.sof_menu_item_active {
color: Var(--secondary) !important;
font-weight: bold !important;
}
div.et_pb_text_inner > h1,
div.et_pb_text_inner > h2,
div.et_pb_text_inner > h3 {
font-weight: 700 !important;
}
li.sof_menu_item.sof_menu_item_poi > a.sof_menu_item_active {
color: white !important;
} 
div.sof_corepoint{
cursor: pointer!important;
}
@media only screen and (max-width: 600px){
.sofp_slider_faders{
display: none!important;
}
.sofp_ft_inner {
width: 100%;
flex-direction: column-reverse;
max-width: 1080px;
gap: 20px;
}
.sofplist_project_item{
display: flex;
flex-direction: column-reverse!important;
}
div.sofplist_project_cover{
min-height: 250px;
}
}
}