@charset "utf-8";
/*css document*/

/*reset*/
*{margin:0; padding:0; outline:none; box-sizing:border-box;}
img,fieldset{border:0px; display:block;}
br.clear, div.clear{clear:both; font-size:0px;}
ul, ol{list-style:none;}
textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, button{-webkit-appearance:none; border-radius:0;}

header, nav, article, aside, section, footer{display:block; overflow:hidden;}
header, section, footer{width:100%; height:auto; position:relative;}

/*template*/
html{width:100%; height:100%; font-size:62.5%;}
body{width:100%; height:100%; background:#ffffff; font-family:'Open Sans', sans-serif; font-size:1.6rem; line-height:1.628571; color:#1d1d1b; overflow-x:hidden; overflow-y:scroll; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/*text*/
h1, h2, h3, h4, h5, h6{width:100%; height:auto; line-height:1.2; color:#28698e; font-family:'Archivo Black', sans-serif;}
h1{font-size:3.6rem; margin-bottom:48px;}
h2{font-size:2.4rem; margin-bottom:16px;}
h3{font-size:1.6rem; margin-bottom:8px;}
h1.center,h2.center,h3.center{text-align:center;}
h1.uppercase,h2.uppercase,h3.uppercase{text-transform:uppercase;}
a, a *{color:#28698E; text-decoration:none;}
p{margin-bottom:32px;}
p:last-of-type{margin-bottom:0px;}

/*forms*/
.form-grid{display:grid; grid-template-columns:200px auto; gap:8px; margin:0px auto;}
.form-grid.full{width:100%;}
.form-grid .wide{grid-column-end:span 2;}
.form-grid h2{margin-top:35px; margin-bottom:0px; font-size:2.4rem;}
.form-grid h3{margin-top:35px; margin-bottom:0px; font-size:2.0rem;}
.form-grid h2.nomargin,
.form-grid h3.nomargin{margin-top:0px !important;}
.form-grid div{padding:8px 0px;}
.form-grid div.row{border-bottom:1px dotted #eae9e9;}
.form-grid div.noborder{border-bottom:none !important;}
.form-grid div.nopadding{padding:0px;}
.form-grid div.label{color:#2a2620; font-size:1.4rem;}
.form-grid div.label.white{color:#ffffff; font-size:1.4rem;}
.form-grid div.row label{font-size:1.4rem;}
.form-grid div.row label.red{color:#e2001a;}
.form-grid div span{display:block; height:32px; line-height:32px; color:#a3a3a3; font-size:1.2rem;}

/*input*/
.form-grid div input[type="text"],
.form-grid div input[type="number"],
.form-grid div input[type="date"],
.form-grid div input[type="time"],
.form-grid div input[type="datetime-local"]{width:100%; height:24px; line-height:24px; padding:16px; font-family:'Open Sans', sans-serif; border-radius:8px; border:1px solid #eae9e9;}
.form-grid div select{width:100%; height:24px; line-height:24px; font-size:1.4rem; padding:16px; border-radius:8px; border:1px solid #eae9e9; font-family:'Open Sans', sans-serif; color:#555555;}
.form-grid div select{height:unset; line-height:unset; padding:8px 16px;}
.form-grid div select option{color:#555555;}
.form-grid div input[type="text"].red,
.form-grid div input[type="number"].red,
.form-grid div input[type="date"].red,
.form-grid div input[type="time"].red,
.form-grid div input[type="datetime-local"].red{border:1px solid #e2001a;}
.form-grid div select.red{border:1px solid #e3051b;}
.form-grid div input[type="text"]:focus,
.form-grid div input[type="number"]:focus,
.form-grid div input[type="date"]:focus,
.form-grid div input[type="time"]:focus,
.form-grid div input[type="datetime-local"]:focus{border:1px solid #2a2620;}
.form-grid div select:focus{border:1px solid #303030;}
.form-grid div textarea{width:100%; height:300px; line-height:24px; padding:16px; border-radius:8px; border:1px solid #eae9e9; font-family:'Open Sans', sans-serif;} 
.form-grid div textarea:focus{border:1px solid #303030;}

/*buttons*/
.form-grid div.submit{display:grid; grid-template-columns:1fr 1fr;}
.form-grid div.submit .button-left input[type=button],
.form-grid div.submit .button-left input[type=submit]{border:0px; font-family:'Archivo Black', sans-serif; color:#555555; background-color:#eae9e9; font-size:1.6rem; border-radius:8px; text-decoration:none; float:left; cursor:pointer;}
.form-grid div.submit .button-right input[type=button],
.form-grid div.submit .button-right input[type=submit]{border:0px; font-family:'Archivo Black', sans-serif; font-size:1.6rem; border-radius:8px; text-decoration:none; float:right; padding:8px 16px; cursor:pointer;}
.form-grid div.submit .button-right input[type=submit].grey{color:#f1f1f1; background-color:#444444;}
.form-grid div.submit .button-right input[type=submit].orange{color:#ffffff; background-color:#E5891D; }

/*main-container*/
main{width:100%; max-width:1920px; min-height:100vh; margin:0px auto; background:url('../images/pitch.webp'); background-repeat:no-repeat; background-position:center top;}
.container{max-width:1260px; margin:0px auto; padding:0px 24px; position:relative;}
section{padding:32px 0px;}
section.nopaddingbottom{padding-bottom:0px;}
section.grey{background:#f2f2f2;}
section.white{background:#ffffff;}

/*header*/
header{height:150px; background:#ffffff; overflow:visible; z-index: 1000;}
header .grid{display:grid; grid-template-columns:348px 1fr; grid-gap:32px;}
header .grid a.logo{height:182px; width:100%; background:#ffffff; margin-bottom:-32px;  box-shadow: 5px 10px 18px grey;}
header .grid a.logo img{width:300px; margin:64px 24px 32px 24px;}
header .grid nav ul{display:flex; float:right;}
header .grid nav ul{margin-top:90px;}
header .grid nav ul li a{padding-right:32px; color:#818D90; font-size:2.2rem; font-weight: bold;text-transform: uppercase;}
header .grid nav ul li a.on,
header .grid nav ul li a:hover{color:#28698E;}
header .grid .menu{display:none;}

/*sections*/
section.slider{height:800px; padding:0 0 32px 0;}
section.slider .image{height:100%; width:100%; position:relative;}
section.slider .image img{height:100%; width:100%; object-fit: cover;}
section.slider .clip-me{height:336px; width:100%; position:absolute; top:432px; z-index:900;background:rgba(40,105,142,0.79);}
section.slider .clip-me{clip-path: polygon(0 0, 100% 32%, 100% 100%, 0% 100%);}
section.slider .clip-me .title{font-size:3.0rem; color:white; text-transform:uppercase; font-family:'Archivo Black', sans-serif; margin-top:80px; margin-right:64px; text-align:right; transform: rotate(5deg)}
section.slider .clip-me .subtitle{font-size:10rem; color:white; text-transform:uppercase; font-family:'Archivo Black', sans-serif; line-height:1;}

section.intro{background:#ffffff;}
section.intro .grid{display:grid; grid-template-columns: 1fr 1fr; grid-gap:32px;}
section.intro .grid .image{height:414px; width:100%;}
section.intro .grid .image img{width:100%; height:100%; object-fit:cover;}

section.content{padding:128px 0px 48px 0px;}

section.portfolio article{text-align:center;}
section.portfolio .grid{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:2fr 0.5fr; grid-gap:32px;}
section.portfolio .grid .button{grid-column-start:4; height:50px; width:100%; margin:0px auto; text-align:center;  background-color:#E5891D; border:none; border-radius:4px; font-family:'Archivo Black', sans-serif;}
section.portfolio .grid .button a{color:white; text-align:center; text-decoration:none; display:inline-block; font-size:1.6rem; line-height:4.6rem;}
section.portfolio .grid .project{aspect-ratio:1/1; position:relative; border-radius:4px;}
section.portfolio .grid .project .overlay{aspect-ratio:1/1; background:rgba(40,105,142,0.5); display:inline-block; width:100%; position:relative; z-index:1000;}
section.portfolio .grid .project .overlay span{display:block; font-size:2.0rem; color:#ffffff; font-family:'Archivo Black', sans-serif; width:100%; text-align:center; line-height:30px; margin-top:calc(50% - 15px);}
section.portfolio .grid .project .image{aspect-ratio:1/1; position:absolute; top:0; left:0; bottom:0; right:0;}
section.portfolio .grid .project .image img{width:100%; height:100%; object-fit:cover; border-radius:4px;}
section.portfolio .grid.three{grid-template-columns:1fr 1fr 1fr; grid-template-rows:unset;}
section.portfolio .grid.three .project{aspect-ratio:unset; display:block; border-radius: 4px; overflow:hidden; perspective:1px;}
section.portfolio .grid.three .project .description{position:relative; background:#28698E; min-height:112px; font-size:1.6rem; padding:16px;}
section.portfolio .grid.three .project .description .name{font-weight:bold; font-size:2.0rem; color:#ffffff; text-align:center;}
section.portfolio .grid.three .project .description .overview{color:#ffffff; text-align:center;}
section.portfolio .grid.three .project .image img{border-radius:unset;}
section.portfolio .grid.three .project .image{width:100%; height:350px; position:relative; margin: 0px auto;}

section.carousel{padding:32px 0px 32px 0px; box-sizing:border-box; overflow:hidden;}
section.carousel .inner{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;}
section.carousel .inner::-webkit-scrollbar{width:10px; height:10px;}
section.carousel .inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.6); border-radius:10px;}
section.carousel .inner::-webkit-scrollbar-track{background:#28698E; border-radius:10px;}
section.carousel .inner > div{scroll-snap-align:start; flex-shrink:0; margin:0px 35px 35px 0px; transform-origin:center center; transform:scale(1); transition:transform 0.5s; position:relative; display:flex;}
section.carousel .inner > div a{width:100%; height:250px; display:block; color:#ffffff; text-decoration:none;}
section.carousel .inner > div a img{width:auto; height:250px; margin-bottom:25px; object-fit:cover; border-radius:10px;}
section.carousel .button{height:50px; width:250px; margin:32px auto; float:left; text-align:center;  background-color:#E5891D; border:none; border-radius:4px;  font-family:'Archivo Black', sans-serif;}
section.carousel .button a{color:white; text-align:center; height:50px; width:250px; text-decoration:none; display:inline-block; font-size:1.6rem; line-height:4.6rem;}

/*footer*/
footer{background:#28698E; overflow:visible;}
footer .grid-two{display:grid; grid-template-columns:1fr 1fr; grid-gap:32px;}
footer .grid-two .formtext h3{font-size:3.0rem; color:#ffffff; padding:32px 0px;}
footer .grid-two .formtext p{color:#ffffff; padding-bottom:32px;}
footer .grid-two .formtext div{color:#ffffff; padding-bottom:32px;}
footer .grid-two .form p{color:#ffffff; padding:32px 0px;}
footer .divider{height:32px; width:100%; background:#ffffff;}
footer .grid-four{display:grid; grid-template-columns: 1fr 1fr 0.5fr 348px; grid-gap:32px; height:201px; padding-top:32px;}
footer .grid-four .contact,
footer .grid-four .contact *{color:#ffffff;}
footer .grid-four .sociallinks{}
footer .grid-four .sociallinks ul{}
footer .grid-four .sociallinks ul li{float:left; margin-right:12px;}
footer .grid-four .sociallinks ul li a{width:32px; height:32px; display:block; text-align:center; border-radius:16px; background:#000000;}
footer .grid-four .sociallinks ul li a i{color:#ffffff; line-height:32px;}
footer .grid-four .logo{width:100%; height:233px; margin-top:-64px; background:#ffffff; box-shadow: 6px 7px 7px 2px #1c4b66;}
footer .grid-four .logo .image{width:100%;}
footer .grid-four .logo .image img{width:300px; margin:64px 24px 32px 24px;}

/*laptop*/
@media only screen and (max-width:1024px) 
{  
    header{height:120px;}
    header .grid{grid-template-columns:298px 1fr;}
    header .grid a.logo{height:152px;}
    header .grid a.logo img{width:250px; margin:43px 24px 32px 24px;}
    header .grid nav ul{margin-top:60px;}
    
    section.slider{height:640px;}
    section.slider .clip-me{height:286px; top:322px;}
    section.slider .clip-me .title{font-size:2.6rem; margin-top:90px;}
    section.slider .clip-me .subtitle{font-size:7.0rem;}
    
    section.portfolio .grid.three .project .description{font-size:1.4rem;}
    section.portfolio .grid.three .project .description .name{font-size:1.8rem;}

    footer .grid-four .sociallinks ul li{float:unset; margin-bottom:12px;}
}

/*tablet*/
@media only screen and (max-width:768px) 
{
    h1{font-size:3.2rem;}
    
    header{height:110px;}
    header .grid a.logo{height:142px;}
    header .grid a.logo img{width:250px; margin:33px 24px 32px 24px;}
    header .grid nav ul li a{font-size:1.5rem; padding-right:16px;}
    
    section.slider{height:420px;}
    section.slider .clip-me{height:210px; top:178px;}
    section.slider .clip-me .title{font-size:1.8rem; margin-top:56px;}
    section.slider .clip-me .subtitle{font-size:6.0rem;}
    
    section.portfolio .grid{grid-template-columns:1fr 1fr; grid-template-rows:2fr 2fr 0.5fr;}
    section.portfolio .grid .button{grid-column-start:2;}
    section.portfolio .grid .button a{font-size:1.4rem;}
    section.portfolio .grid.three{grid-template-columns:1fr 1fr; grid-template-rows:unset;}

    footer .grid-four{grid-template-columns:1fr 1fr; height:auto;}
    footer .grid-four .contact:nth-of-type(1){grid-area:1/1/1/1;}
    footer .grid-four .contact:nth-of-type(2){grid-area:2/1/2/1;}
    footer .grid-four .sociallinks{grid-area:3/1/3/1;}
    footer .grid-four .sociallinks ul li{float:left;}
    footer .grid-four .logo{grid-area:1/2/3/2;}
    
}

/*mobile l*/
@media only screen and (max-width:426px)
{
    h1{font-size:2.8rem; margin-bottom:32px;}
    
    header{height:96px;}
    header .grid{grid-template-columns:240px 1fr; grid-gap:16px;}
    header .grid a.logo{height:104px; margin-bottom:-16px;}
    header .grid a.logo img{width:216px; margin:24px 12px 12px 12px;}
    header .grid .menu{display:unset; display:block; text-align:right;}
    header .grid .menu a{height:72px;}
    header .grid .menu a i{font-size:2.2rem; line-height:72px;}
    header .grid nav{width:100%; height:auto; display:block; float:none; left:0; top:-800px; position:absolute; -webkit-transform:translateY(-140%); transform:translateY(-140%); -webkit-transition:-webkit-transform 0.5s, visibility 0s 0.5s; transition:transform 0.5s, visibility 0s 0.5s;}
    header .grid nav ul{width:100%; height:auto; display:block; position:relative; float:left; padding:24px; background:#ffffff;}
    header .grid nav ul li{width:100%; height:auto; min-height:48px; display:block; float:left; margin:0px; text-align:right;}
    header .grid nav ul li a{color:#333333; height:48px; line-height:48px; margin:unset;}    
    header .grid nav.open{width:100%; height:100vh; display:block; float:none; left:0px; top:36px; z-index:-1; position:absolute; margin:0px !important; -webkit-transform:translateY(0%); transform:translateY(0%); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s;}
        
    section{padding:16px 0px;}

    section.slider{height:320px;}
    section.slider .clip-me{height:128px; top:160px;}
    section.slider .clip-me .title{font-size:1.0rem; margin-top:31px; margin-right:0px;}
    section.slider .clip-me .subtitle{font-size:4.0rem;}
    
    section.intro .grid{grid-template-columns:1fr; grid-gap:32px;}
    section.intro .grid .image{height:auto;}
        
    section.portfolio .grid{grid-template-columns:1fr; grid-template-rows:unset;}
    section.portfolio .grid .button{grid-column-start:1;}
    section.portfolio .grid.three{grid-template-columns:1fr; grid-template-rows:unset;}
    
    footer .grid-two{grid-template-columns:1fr;}
    footer .grid-two .formtext h3{font-size:2.4rem; color:#ffffff; padding:16px 0px;}
    footer .divider{height:16px; width:100%; background:#ffffff;}
    footer .grid-four{grid-template-columns:1fr;}
    footer .grid-four .contact,
    footer .grid-four .sociallinks,
    footer .grid-four .logo{grid-area:unset;}
    footer .grid-four .logo{height:auto; margin-top:unset;}
    footer .grid-four .logo .image{padding:16px;}
    footer .grid-four .logo .image img{width:100%; object-fit:contain; margin:unset;}

}

/*mobile m*/
@media only screen and (max-width:376px)
{
    section.slider .clip-me .container{padding:0px;}
    section.slider .clip-me .title{font-size:1.2rem; margin-top:31px; margin-right:14px;}
    section.slider .clip-me .subtitle{font-size:4.0rem;}
  
}

/*mobile s*/
@media only screen and (max-width:320px)
{
    section.slider .clip-me .title{font-size:1.0rem; }
    section.slider .clip-me .subtitle{font-size:3.2rem;}
}