/* Main Styles */
.fontSerif{font-family: 'Amstelvar-Roman-VF';}
.varCond { font-variation-settings: "opsz" 200; }

/* Font Size */
h1 { font-size: 72px; letter-spacing: -1px; }
h2 { font-size: 42px; line-height: 48px;}
h3 { font-size: 32px; line-height: 38px;}
h4 { font-size: 22px; line-height: 32px;}
p { font-size: 18px !important; line-height: 32px; }
h5 { font-size: 16px; line-height: 26px;}
h6 { font-size: 14px; line-height: 18px;}
.h7 { font-size: 11px; line-height: 16px;}

.letterS { letter-spacing: 0.5px; }
.letterS1 { letter-spacing: -0.5px; }

/* Font Weight */
.fontwEL { font-weight: 100; /*ExtraLight*/ }
.fontwL { font-weight: 300; /*Light*/ }
.fontwR { font-weight: 400; /*Regular*/ }
.fontwM { font-weight: 500; /*Medium*/ }
.fontwB { font-weight: 700; /*Bold*/ }
.fontwBL { font-weight: 900; /*Black*/ }

/* Font Color */
.colortPrimary { color:#9B9B9B; /*Light Gray*/ }
.colortSecondary { color:#333; /*Medium Gray*/ }
.colortLink { color:#4250F4; /*Medium Blue*/ }
.colortBlack { color: black; /*Dark Gray*/ }
.colortWhite { color: white; }

/* Background Color */
.colorbgPrimary { background-color: #FE4543; /*Red*/ }
.colorbgSecondary { background-color: #F7F7F7; /*Light Gray*/ }
.colorbgBlack { background-color: #131919; /*Dark Gray*/ }
.colorbgWhite { background-color: white; }

/* Paddings */
.padding10tb { padding: 10px 0px 10px 0px; }
.padding40 { padding: 35px !important; }
.padding25 { padding: 25px !important; }
.padding40rl { padding: 0px 30px 0px 30px !important; }
.padding50b { padding-bottom: 50px !important; }
.padding60rl { padding: 0px 60px 0px 60px !important; }
.padding60l { padding-left: 60px !important; }
.padding70 { padding: 70px; }
.padding80t { padding: 80px 0px 20px 0px; }
.padding50t { padding: 50px 0px 0px 0px; }

/* Text Alignment */
.alignTL { text-align: left !important; }
.alignTR { text-align: right; }
.alignTC { text-align: center; }

/* Image Property */
.img-responsive { display: block; max-width: 100%; height: auto;}
/*.imgShadow { transition: all ease-in-out 0.5s;}
.imgShadow:hover { box-shadow: 0px 5px 20px #BABDC8;transition: all ease-in-out 0.5s;}
*/
/* Opacity */
.opacity { opacity: 0.8; }

/* Borders */
.borderTop { border-top: 1px solid #282B2B } /* Dark Border */
.lightBorder { border-top: 1px solid #ECECEC; } /* Light Border */

/* Links */
a { text-decoration: none; color: black;  }
a:hover { text-decoration: line-through; text-decoration-color: auto; }
a:visited { color: auto; text-decoration: none !important; }
a.block { color: white; text-decoration: none}
a.block:hover { text-decoration: line-through; text-decoration-color: auto; }
a.block:visited { color: white; text-decoration: none !important; }
a.block2 { text-decoration: none; color: black; }
a.block2 :hover { text-decoration: line-through; }
a.block2 :visited { text-decoration: none !important; }
a.link { color: white !important; text-decoration: none; font-family: 'Amstelvar-Roman-VF' !important; }
a.link:hover { color: white !important; font-family: 'Amstelvar-Roman-VF' !important; text-decoration: line-through; text-decoration-color: auto; transition: all ease-in-out 0.3s; }
a.link:visited { color: white !important; text-decoration: none; font-family: 'Amstelvar-Roman-VF' !important;}

/* Menu */
.sideMenu { position: absolute; color: white; top: 48vh; }
.sideMenuFixed { position: absolute; color: black; top: 48vh; }
.smLeft { position: fixed; left: 20px; transform: rotate(-90deg); }
.smRight { position: fixed; right: 30px; transform: rotate(90deg); }
.sideMenu a { color: white; text-decoration: none; }
.sideMenuFixed a { color: black; text-decoration: none; }

.navigation {list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox;
  display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap;
  justify-content: space-around; text-align: center; color: white; }
.navigation a { text-decoration: none; color: white; }
.navigation a:hover { text-decoration: line-through; text-decoration-color: auto;}
.navigation .logo { flex-grow: 1; }
ul li { width: auto; flex-grow: 0; padding: 0px 10px 0px 10px;}

.navigationInt {list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox;
  display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap;
  justify-content: space-around; text-align: center; color: black; }
.navigationInt a { text-decoration: none;  color: black; }
.navigationInt a:hover { text-decoration: line-through; text-decoration-color: auto;}
.navigationInt .logo { flex-grow: 1; }

/* Main Block */
.colorbgRandom{ transition: background-color 0.4s ease-out;}
.mainBlock{ padding-top: 16%; height: 90vh; z-index: 3; position: relative; /* Block Space */}
.mainTitle { font-size: 4.6em; font-family: 'Amstelvar-Roman-VF' !important; /* Typography */}
.iconVar { font-size: 188px; font-family: 'pattern-4th';
  -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; 
  color: transparent; animation: TitleVar 2s infinite;
  animation-timing-function: ease; animation-direction: alternate; }
/* Animation Icon/Text */
@keyframes TitleVar { from { font-variation-settings:  "opsz" 30, "wght" 0; }
  to { font-variation-settings:  "opsz" 140, "wght" 200; } }

/* Circles Backgorund */
.firstCirOpacity { opacity: 0.4; }
.secondCirOpacity { opacity: 0.2; }
.circlebg { width: 550px; height: 300px; border-radius: 550px / 300px;
  position: absolute; top: 30vh; right: 28%; border: 1px solid white; }
/* Animation Circles */
#circleRot { -webkit-animation: rotation 5s infinite linear alternate; }
#circleRotDel { -webkit-animation: rotation 5s infinite linear alternate; animation-delay: -0.7s; }
@-webkit-keyframes rotation { from { -webkit-transform: rotate(45deg);}
    to { -webkit-transform:rotate(145deg);} }

/* Case Studies Grid */
.caseBlock { transition: 0.3s; }
.caseBlock:hover { background: #EEF2F5; box-shadow: 0 10px 30px 0 #E1E6E9; transition: 0.5s; }
.colorbgBlackInt{ transition: background-color 0.4s ease-out;}
.miniSite { background: #4000F5; box-shadow: 0 10px 20px 0 rgba(14,33,255,0.30); 
  border-radius: 100px; padding: 15px 30px 15px 30px; position: absolute; bottom: -20px; right: 30px; }

/* Footer */
.footer { font-size: 52px; }

/* About */
.about{ font-family: 'Amstelvar-Roman-VF'; font-size: 32px; line-height: 51px; animation: TitleVar 2.5s infinite;
  animation-timing-function: ease; animation-direction: alternate; }

/* Contact */
.contact { font-size: 52px !important; }


.row:before, .row:after {
display: flex !important;
}

/* Mobile */

@media all and (max-width: 600px) {
  h1 { font-size: 48px; letter-spacing: -1px; }
  h2 { font-size: 32px; line-height: 32px;}
  h3 { font-size: 22px; line-height: 28px;}
  .mainTitle { font-size: 48px; font-family: 'Amstelvar-Roman-VF' !important; line-height: 48px !important;}
  .about{ font-size: 20px; line-height: 31px; animation: none; text-align: left;}

  .navigation { padding: 0; }
  .navigation a { text-align: center; }
  ul li { width: auto; } 
  /*.circlebg { left: -100px; position: absolute; }*/
  .circlebg { width: 350px; height: 150px; border-radius: 350px / 150px; right: 2%}

  .padding40 { padding: 30px !important; }
  .padding60rl { padding: 0px 0px 0px 0px !important; }
  .padding60l { padding-left: 30px !important; }
  .padding70 { padding: 25px; }
  .padding80t { padding: 30px 0px 30px 0px;; }
}