@font-face {
    font-family: Bebas_Neue;
    src: url(../Fonts/Bebas_Neue/BebasNeue-Regular.ttf);
}

.parallax {will-change: transform;}


html, body {
    overflow-x:hidden
}
/*########################*/
/*# HERO PANEL           #*/
/*########################*/
.herocontainer                      {z-index:20;overflow:hidden; width:100%; height:105vh; display:flex; flex-direction:column; justify-content:center; align-items:center; background-image:url(../Images/Herobg.png); background-attachment: fixed; background-size: auto; background-position: right top; background-repeat: no-repeat; position:relative; background-size:cover}
.herocontainer nav ul               {display: flex; justify-content:space-evenly; list-style-type: none;}                    
.heropanel                          {position:relative;box-sizing: border-box; padding:30px; margin-left:auto; margin-right:auto; width:700px; min-height:400px; color: white; z-index:-2}
.heropanel h1                       {font-family:Bebas_Neue;}
.herolinks                          {transform: translateY(50px); transition: 0.5s ease-out; opacity: 0;margin-top:100px; width:400px; height:30px; margin-left:auto; margin-right:auto; color:#3B413C; display: flex; justify-content:space-around; border:0px red solid}
.herolinks ul                       {display: flex; justify-content:space-between; list-style-type: none; border:1px red solid}
.herocontainer .grain               {position: absolute; inset: 0; opacity: 0.14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; background-attachment: fixed; background-size: auto;}
.herocontainer .vignette            {position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(32,40,60,0.55) 100%); pointer-events: none; z-index: 1; background-attachment: fixed;background-size : auto; }
canvas                              {position: absolute; top:0; left:0; inset: 0; width: 100%; height: 100%; pointer-events: none; background-attachment: fixed; background-size: auto;}
.herocontainer .visible             {opacity:1;transform: translateY(0);}

/*########################*/
/*# HERO BORDER          #*/
/*########################*/
.custom-shape-divider-bottom-1777971543             {position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 1;}
.custom-shape-divider-bottom-1777971543 svg         {position: relative; display: block; width: calc(128% + 1.3px); height: 30px;}
.custom-shape-divider-bottom-1777971543 .shape-fill {fill: #FFFFFF;}

/*########################*/
/*# FEATURES             #*/
/*########################*/
.features                           {margin: 110px 0 50px 0; padding-top: 70px; position: relative; background-color: white; color: #384666; z-index:1}    
.featurecontainer                   {display:flex; justify-content:space-around; flex-direction: row; flex-wrap:wrap;}
.feature                            {width: 300px; min-height: 200px; margin: 20px; transform: translateY(50px); transition: 0.5s ease-out; opacity: 0;}

.features .visible                  {opacity:1;transform: translateY(0);}

.feature .icon                      {width:50px; padding:0px; margin:60px 0 70px 0; transition: transform 0.5s; opacity: 0.75;}
.feature .icon:hover                {transform: scale(3);}
.zoom                               {transform: scale(2);}

/*########################*/
/*# CALL TO ACTION       #*/
/*########################*/
.calltoaction                       {position:relative; color:white; margin:0 0 20px 0; padding:40px 20px 40px 20px; background-image:url(../Images/Herobg2.png); background-repeat: no-repeat; background-size:cover; border:0px red solid}
.calltoaction h2                    {font-size:30px; margin:20px 0 20px 0;}
.calltoaction p                     {padding:20px}
/*########################*/
/*# PORTFOLIO            #*/
/*########################*/
.portfolio                          {margin:50px 5% 50px 5%; padding-top:70px; color:#384666}
.portfolio .row                     {display:flex; flex-direction: row; justify-content:center; align-items: center top; flex-wrap:nowrap; padding:50px;}
.portfolio .row.even                {transform: translateX(-50px); transition: 0.5s ease-out; opacity: 0;}
.portfolio .row.odd                 {transform: translateX(50px); transition: 0.5s ease-out; opacity: 0;}
.portfolio .row.visible             {opacity: 1; transform: translateX(0);}

.portfolio .picture                 {width:400px; }
.portfolio .text                    {flex-grow: 1; padding:0 30px 0 30px;}
.portfolio .macscreen               {width:400px;}

/*########################*/
/*# PRICES               #*/
/*########################*/
.prices                             {background-color:white; margin:0px 0 0 0; padding:70px 30px 50px 30px;}
.prices h1                          {font-size:30px; color:#102230; margin:0 0 20px 0;}
.prices h2                          {font-size:50px; margin:0 0 30px 0; display:inline;}
.prices h3                          {font-size:20px; margin:20px 0 20px 0; font-weight:normal; color:#B1D0E0}
.pricecontainer                     {display:flex; width:100%; flex-direction:row; justify-content:space-evenly; margin-top:0px; flex-wrap:wrap; }
.price                              {color:white; position:relative; width:250px; min-height:400px; background-color:#4f4f4f; border-radius:0px; margin:20px; text-align:left; padding:30px; box-shadow:0px 5px 20px 5px rgba(0, 0, 0, .25); display:flex; flex-direction: column; align-items:stretch; justify-content:space-between;}
.price ul                           {list-style: none;}
.price ul li:before                 {content: "\2714\0020";}
.price strong                       {color:#B1D0E0}
.price .buttontranswhite            {display:block}

/*########################*/
/*# TESTIMONIALS         #*/
/*########################*/
.testimonials                       {position:relative; color:white; margin:50px 0 0 0; padding:80px 20px 10px 20px;background: linear-gradient(145deg, #2b3752 0%, #384666 38%, #4a5e88 70%, #5a7a9e 100%); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }
.testimonials p                     {padding:0px; margin:20px 0 0 0;}
.testimonials .footnote             {margin:20px 0 20px 0;}
.testimonials h2                    {padding-bottom: 0px;}
.testimonialcontainer               {padding-bottom:20px; border:0px red solid;display:flex; flex-direction: row; height:auto; justify-content:flex-start; align-items: flex-start; flex-wrap:nowrap; overflow:auto;}
.testimonial                        {box-sizing: border-box; padding:20px; border:1px rgba(255, 255, 255, 0.2) solid; min-width:300px; height:auto; margin:20px; box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(8px) contrast(1) saturate(100%); backdrop-filter: contrast(1) saturate(100%) blur(8px); background-color: rgba(0, 0, 0, 0.2)}
.testimonials .vignette            {position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(32,40,60,0.55) 100%); pointer-events: none; z-index: 1; background-attachment: fixed;background-size : auto; }
/*########################*/
/*# CONTACT US           #*/
/*########################*/

.contactus                          {min-height:200px; background-color:#f4f4f4; margin:20px 0 0px 0; padding:60px 0 20px 0; color:black;}        
.contactus h1                       {font-size:30px; color:#102230; margin:0 0 20px 0;}        
.contactus h6                       {font-size:12px; font-weight:normal; line-height:1.5em; margin:20px 0 0 0;}        
.contactuscontainer                 {display:flex; justify-content:center; align-items:center top; width:100%;flex-direction: row; flex-wrap:wrap;}
.contactuscontainer .form           {border:0px red solid; width:450px; min-height:300px; padding:20px 40px 20px 20px; text-align:left;}
.contactuscontainer .info           {border:0px green solid;; width:450px; min-height:300px; padding:20px;  text-align:left;}
.contactus input[Type="text"]       {width:100%; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit;}
.contactus input[Type="email"]      {width:100%; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit;}
.contactus input[Type="submit"]     {width:auto; margin: 10px; padding:10px 20px 10px 20px; box-sizing:border-box; font-size:16px; font-family:inherit; border:1px solid #1A374D; transition: background-color 0.3s linear, color 0.3s linear; border-radius: 5px;}
.contactus input[Type="submit"]:hover{cursor:pointer}
.contactus textarea                 {width:100%; min-height:200px; margin: 10px; padding:20px; box-sizing:border-box; font-size:20px; font-family:inherit}
.contactus .icon                    {width:50px; padding:0px; margin:140px 0 70px 0; transition: transform 0.5s}
.contactus .zoom                    {transform: scale(7);}        

/*#####################################################################*/
/*# Mobile Styles (Less than 900 px screen width)                     #*/
/*#####################################################################*/
@media only screen and (max-width: 900px) 
{
    /*########################*/
    /*# HERO SECTION         #*/
    /*########################*/
    .herocontainer                  {background-size:auto; z-index:20; border-bottom:2px white solid}
    .herocontainer                  {height:80vh; padding-bottom:5px;}
    .heropanel                      {}
    .heropanel                      {margin:0 20px 20px 20px; padding-bottom: 90px; width:auto;  min-height:300px; box-sizing: border-box;}
    .herolinks                      {transform: translateY(50px); transition: 0.5s ease-out; transition-delay:4.2s; opacity: 0;margin-top:100px; color:#3B413C; display: flex; justify-content:space-around; flex-wrap:wrap; width:100%;}
    .herocontainer .visible         {opacity:1;transform: translateY(0);}
    /*########################*/
    /*# FEATURES             #*/
    /*########################*/
    .features                       {margin-top:0px; padding-top:50px;position:relative; border-top:2px white solid}
    .feature                        {width: 300px; min-height: 200px; margin: 20px; transform: translateY(50px); transition: 0.5s ease-out;}
    .features .visible              {opacity: 1; transform: translateY(0);}

    /*########################*/
    /*# CALL TO ACTION       #*/
    /*########################*/
    .calltoaction                       {position:relative; color:white; margin:0 0 20px 0; padding:20px 0px 20px 0px; background-image:url(../Images/Herobg2.png); background-size: auto; background-repeat: no-repeat; overflow:hidden;}
    .calltoaction #background           {height:100%; width:100%;  position:absolute;}
    .calltoaction h2                    {font-size:30px; margin:20px 0 20px 0;}
    .calltoaction p                     {padding:20px}


    /*########################*/
    /*# PORTFOLIO            #*/
    /*########################*/
    .portfolio                      {margin:50px 0px 50px 0px; padding:20px 10px 0 10px}
    .portfolio .row                 {display:flex; flex-direction: row; justify-content:center; align-items: center; flex-wrap: wrap; padding:30px 0px 30px 0px;}
    .portfolio .row.odd             {flex-direction: column-reverse; padding-right:0px;}
    .portfolio .row.even            {flex-direction: column; padding-right:0px;}
    .portfolio .picture             {flex-grow:1; width:auto;}
    .portfolio .text                {flex-grow:1; text-align:center; padding:0 20px 0 20px}
    .portfolio .macscreen           {width:70%}
    /*########################*/
    /*# TESTIMONIALS         #*/
    /*########################*/
    .testimonials                   {background-color: black; color:white; margin:0px 0 0 0; padding:50px 20px 50px 20px;background: linear-gradient(145deg, #2b3752 0%, #384666 38%, #4a5e88 70%, #5a7a9e 100%); background-attachment: fixed; background-size: auto; background-position: center; background-repeat: no-repeat; }
    
    /*########################*/
    /*# PRICES               #*/
    /*########################*/
    .prices                         {padding-top:40px}

    /*########################*/
    /*# CONTACT US           #*/
    /*########################*/
    .contactus                      {padding-top:20px}
    .contactuscontainer .info       {text-align:center;}

    /*########################*/
    /*# INPUT FIELDS         #*/
    /*########################*/
    /* iOS adds it's own look to text fields so override this to make them look the same across all devices */
    textarea,
    input[type="text"],
    input[type="button"],
    input[type="submit"]                {-webkit-appearance: none;border-radius: 0;}
}