* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
body {
font-family : 'Lato', sans-serif;
padding-top : 0;
color : #868e96;
overflow-x : hidden;
}
#home {
overflow : hidden;
}
#about {
overflow : hidden;
}
#soc {
overflow : hidden;
}
#differentiator {
overflow : hidden;
}
#capabilities {
overflow : hidden;
}
#application {
overflow : hidden;
}
#contact {
overflow : hidden;
}
footer {
overflow : hidden;
}
h1, h2, h3, h4, h5 {
font-family : 'Lato', sans-serif;
font-weight : 700;
text-transform : uppercase;
color : #343a40;
}
p {
color : #484848;
font-size : 1.4em;
font-family : 'Lato', sans-serif;
text-align : justify-all;
}
h2 {
font-size : 3.5rem;
}
section.section-item {
padding-top : 3.33em !important ;
padding-bottom : 3.33rem !important ;
padding-left : 2em;
padding-right : 2em;
margin : 0;
}
.portfoliocontent {
margin-left : 10rem;
margin-right : 10rem;
}
.projectcon {
color : #696969;
text-align : justify;
}
footer {
background-color : #333;
font-size : 1em;
color : white;
padding-bottom : 0;
padding-top : 10px;
text-align : center;
}
.social-links {
list-style : none;
}
.social-links li {
display : inline-block;
margin-right : 1.2em;
}
.social-links li:last-child {
margin-right : 0;
}
.social-links li a:link, .social-links li a:visited {
text-decoration : none;
border : 0;
color : #ffffff;
transition : color 0.2s;
}
.ion-social-facebook, .ion-social-twitter, .ion-social-linkedin, .ion-social-instagram {
transition : color 0.2s;
}
.ion-social-facebook:hover {
color : #00aced;
}
.ion-social-twitter:hover {
color : #00aced;
}
.ion-social-linkedin:hover {
color : #00aced;
}
.ion-social-instagram:hover {
color : #00aced;
}
footer p {
color : #ffffff;
text-align : center;
font-size : 1em;
}
.pheader {
max-width : 100%;
height : auto;
height : 100vh;
}
.photo {
max-width : 100%;
height : auto;
}
#about {
background : rgb(33, 164, 247, 0.1);
}
#soc {
padding : 2em;
}
#differentiator {
padding : 2em;
background : rgb(33, 164, 247, 0.1);
}
.animation-element {
opacity : 0;
position : relative;
}
.animation-element.slide-left {
opacity : 0;
transition : all 500ms linear;
transform : translate3d(-100px,0,0);
}
.animation-element.slide-left.in-view {
opacity : 1;
transform : translate3d(0,0,0);
}
.animation-element.fade-in-up {
transition : all 0.7s ease-in-out;
opacity : 0;
transform : translate3d(0,100%,0);
}
.grayout {
animation : grayout 10s;
}
@keyframes grayout {
0% {
opacity : 1;
}
50% {
opacity : 0.55;
}
100% {
opacity : 0.1;
}
}
.grayin {
animation : grayin 10s;
}
@keyframes grayin {
0% {
opacity : 0.1;
filter : grayscale(100%);
}
25% {
opacity : 0.2;
filter : grayscale(100%);
}
50% {
opacity : 0.25;
filter : grayscale(100%);
}
100% {
opacity : 1;
filter : grayscale(0%);
}
}
.animation-element.fade-in-up.in-view {
opacity : 1;
transform : translate3d(0,0,0);
}
.animation-element.fade-in-up.grayout.in-view {
opacity : 0.1;
transform : translate3d(0,0,0);
}
.animation-element.zoom-in {
transition : all 1.7s ease-in-out;
opacity : 0;
transform : scale3d(0.3,0.3,0.3);
}
.animation-element.zoom-in.in-view {
opacity : 1;
transform : none;
}
.animation-element.slide-in-left {
transition : all 0.7s ease-in-out;
transform : translate3d(-100%,0,0);
opacity : 0;
}
.animation-element.slide-in-left.in-view {
transform : translate3d(0,0,0);
opacity : 1;
}
.animation-element.slide-in-left.grayout.in-view {
transform : translate3d(0,0,0);
opacity : 0.1;
}
.animation-element.slide-in-right {
transition : all 0.7s ease-in-out;
transform : translate3d(100%,0,0);
opacity : 0;
}
.animation-element.slide-in-right.in-view {
transform : translate3d(0,0,0);
opacity : 1;
}
.animation-element.slide-in-right.grayin.in-view {
transform : translate3d(0,0,0);
opacity : 1;
}
.justify {
text-align : justify;
}
.underline {
display : inline-block;
padding : 0.2em 0.5em 0.2em 0.5em;
font-family : 'Black Ops One', 'sans-serif';
font-weight : 100;
letter-spacing : 0.05em;
background-color : #000;
color : #fff;
border : solid 0.1em;
border-image-source : linear-gradient(45deg, rgb(0, 143, 104), rgb(250, 224, 66));
border-image-slice : 1;
margin-bottom : 0.5em;
}
.left {
text-align : left;
}
.resize {
max-height : 50px;
}
.right {
float : right;
}
.navbar-default {
background-color : rgb(0, 0, 0);
box-shadow : 0 6px 5px 0 rgb(0, 0, 0, 0.75);
border : none;
}
.navbar-default .navbar-nav li > a {
color : rgb(255, 255, 255);
font-size : 1.5em;
font-family : 'Lato';
transition : all 0.3s ease-in-out;
font-variant : small-caps;
}
.navbar-default .navbar-nav li > a:hover {
color : #ff9600;
transform : scale(1.2);
font-family : 'Lato';
font-variant : small-caps;
background-color : transparent;
}
.navbar-default .navbar-nav li > a:focus {
background-color : transparent;
color : rgb(255, 188, 6, 0.88);
font-weight : 700;
}
.navbar-toggle {
color : #ff9600;
}
.nav-custom-icon {
cursor : pointer;
font-size : 200%;
}
input[type="text"], input[type="email"], select, textarea {
width : 100%;
padding : 10px;
margin-bottom : 10px;
border : #0258a2 solid 2px;
transition : all 0.3s ease-in-out;
background-color : transparent;
color : #0258a2;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
background : rgb(2, 88, 162, 0.12);
border : #0258a2 solid 2px;
transform : scale(1.02);
}
input[type="submit"] {
background-color : rgb(2, 88, 162, 0.12);
color : #0258a2;
border : #0258a2 solid 2px;
padding : 10px;
float : right;
margin-right : 0;
border-radius : 0;
transition : all 0.3s ease-in-out;
letter-spacing : 0.2em;
font-family : 'Raleway';
font-variant : small-caps;
font-weight : 700;
}
input[type="submit"]:hover {
opacity : 0.7;
transform : scale(0.9);
}
textarea {
height : 100px;
}
.no-padding-left {
padding-left : 0;
}
.no-padding-right {
padding-right : 0;
}
.contact-line {
font-family : 'Lato';
font-variant : small-caps;
text-transform : none;
font-weight : 700;
font-size : 2em;
color : #000;
}
.submission-message > h6 {
font-size : 1.5em;
font-variant : small-caps;
color : #0258a2;
display : none;
text-align : center;
}
header {
background-image : linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0)), url(../img/landing_1.jpg);
background-size : cover;
background-position : center;
height : 100vh;
background-attachment : fixed;
text-align : center;
}
.header-text {
position : relative;
float : left;
top : 70%;
left : 53%;
transform : translate(-50%,-50%);
}
.header-text > h2 {
font-size : 5em;
color : #ffffff;
font-family : 'Lato';
text-transform : none;
letter-spacing : 0.5em;
line-height : 100px;
padding-bottom : 0.2em;
text-shadow : 0 4px 3px rgb(0, 186, 255, 0.86), 0 8px 13px rgb(0, 0, 0), 0 18px 23px rgb(0, 0, 0), 0 18px 23px rgb(255, 1, 1, 0.38);
}
.header-text > h3 {
font-size : 2.5em;
color : rgb(255, 255, 255);
letter-spacing : 0.1em;
text-transform : none;
font-variant : small-caps;
text-shadow : 0 4px 3px rgb(0, 186, 255, 0.86), 0 8px 13px rgb(0, 0, 0), 0 18px 23px rgb(0, 0, 0), 0 18px 23px rgb(255, 1, 1, 0.38);
}
.header-text > h4 {
font-size : 50px;
color : #f3d9b4;
font-variant : small-caps;
letter-spacing : 5px;
line-height : 100px;
}
.header-button {
background-color : transparent;
color : #f3d9b4;
border : #f3d9b4 solid 3px;
padding : 10px;
font-family : 'Lato';
transition : all 0.3s ease-in-out;
letter-spacing : 5px;
font-variant : small-caps;
transform : scale(1.0);
text-indent : 5px;
}
.header-button:hover {
transform : scale(1.1);
background : linear-gradient(rgb(0, 0, 0, 0.2), rgb(0, 0, 0, 0.2));
}
.box-first-row {
height : 14em;
max-width : 100%;
}
.box-second-row {
height : 14em;
max-width : 100%;
}
.box-style {
background-color : transparent;
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.3s ease-in-out;
padding : 0;
margin-bottom : 2em;
}
.box-style:hover {
box-shadow : 0 0 50px 15px rgb(0, 0, 0, 0.30);
transform : scale(1.02);
}
.icon {
display : inline-block;
font-size : 35px;
color : #ffC977;
vertical-align : middle;
}
.text {
display : inline-block;
vertical-align : middle;
color : #fff;
font-size : 1.2em;
font-variant : small-caps;
text-transform : none;
padding-left : 0.5em;
}
.box-heading {
background : #021d38;
padding : 0.5em;
padding-left : 1em;
color : #fff;
border-bottom : 1px solid #000;
}
.box-text {
padding : 1.5em;
font-size : 0.7em;
}
.box-image {
padding : 0;
}
.box-image > span {
font-size : 2.5em;
margin : 0;
padding : 0;
}
.key-read-more {
text-align : right;
padding-right : 1em;
position : absolute;
bottom : -0.5em;
right : 0;
padding-bottom : 0;
margin : 0;
transition : all 0.3s ease-in-out;
}
.read-more-icon {
font-size : 3em;
color : #021d38;
}
.key-read-more:hover {
transform : scale(1.6,1.2);
}
.read-text {
display : inline-block;
vertical-align : middle;
color : #fff;
font-size : 1em;
font-variant : small-caps;
text-transform : none;
padding-left : 0.5em;
}
.read-more-button {
background-color : #7f5a83;
background-image : linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);
border-radius : 10px;
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.3s ease-in-out;
padding : 0;
cursor : pointer;
}
.read-more-button:hover {
box-shadow : 0 0 50px 15px rgb(0, 0, 0, 0.30);
transform : scale(1.1);
}
.read-text-icon {
display : inline-block;
font-size : 2em;
color : #ffC977;
padding-left : 0.5em;
vertical-align : middle;
}
.cap-box-style {
height : 12em;
margin-bottom : 2em;
}
.cap-box-style {
background-color : transparent;
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.3s ease-in-out;
padding : 0;
}
.cap-box-style:hover {
box-shadow : 0 0 50px 15px rgb(0, 0, 0, 0.30);
transform : scale(1.1);
}
.cap-image {
max-height : 2em;
width : auto;
max-width : 1.8em;
}
.cap-text {
display : inline-block;
vertical-align : middle;
color : #000;
font-size : 1.1em;
font-weight : 700;
font-variant : small-caps;
text-transform : none;
padding-left : 0.2em;
}
.cap-box-heading {
background : rgb(255, 167, 0, 0.71);
padding : 0.5em;
padding-left : 0.5em;
color : #fff;
border-bottom : 1px solid #000;
}
.cap-box-text {
padding : 1.5em;
font-size : 0.7em;
}
.cap-box-image {
padding : 0;
}
.cap-box-image > span {
font-size : 2.5em;
margin : 0;
padding : 0;
}
.read-box-style {
background-color : rgb(110, 4, 255, 0.01);
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.3s ease-in-out;
padding : 0;
}
.read-box-style:hover {
box-shadow : 0 0 50px 15px rgb(0, 0, 0, 0.30);
transform : scale(0.9);
}
.icon {
display : inline-block;
font-size : 35px;
color : #ffC977;
vertical-align : middle;
}
.read-text {
display : inline-block;
vertical-align : middle;
color : #fff;
font-size : 1.2em;
font-variant : small-caps;
text-transform : none;
padding-left : 0.5em;
}
.read-box-heading {
background-color : rgb(47, 8, 8, 0.7);
padding : 0.5em;
padding-left : 1em;
color : #fff;
border-bottom : 1px solid #000;
}
.read-box-text {
padding : 1.5em;
font-size : 0.7em;
}
.read-box-text p {
color : #000000;
}
#xai {
background-color : rgb(0, 137, 255, 0.2);
}
.key-text-box {
padding : 1em 5em 1em 5em;
background : transparent;
text-align : justify;
}
.key-text-box p {
font-size : 1em;
}
.differentiator-logo-left {
text-align : center;
position : relative;
}
.differentiator-logo-left img {
position : absolute;
height : 150px;
margin-top : 5%;
}
.differentiator-logo-right {
text-align : left;
position : relative;
}
.differentiator-logo-right img {
position : absolute;
height : 150px;
margin-top : 5%;
}
area:link, area:hover, area:active, area:focus {
outline : none;
}
.popup-heading h2 {
text-align : center;
color : #fff;
font-weight : 500;
font-size : 2.5em;
letter-spacing : 0.2em;
font-variant : small-caps;
color : rgb(0, 0, 0);
font-family : 'Black Ops One';
text-shadow : 2px 8px 6px rgb(0, 0, 0, 0.2), 0 -5px 35px rgb(255, 255, 255, 0.3);
}
.popup-text p {
color : black;
font-weight : 700;
font-size : 1.2em;
text-align : justify;
padding : 1em;
padding-bottom : 0;
}
#illustration {
max-width : 100%;
height : auto;
}
.illustration-description ul li {
color : #555;
}
.illustration-description ul li .ill-heading {
font-weight : 700;
font-variant : small-caps;
font-size : 1.2em;
color : #0067ab;
}
.illustration-description ul li .fa-li {
color : #0067ab;
font-size : 2em;
padding-right : 0.5em;
}
#illustration-div {
background : rgb(33, 164, 247);
background : linear-gradient(90deg, rgb(33, 164, 247, 0.1) 0%, rgb(33, 164, 247, 0.1) 10%, rgb(255, 255, 255, 1) 30%, rgb(255, 255, 255, 1) 70%, rgb(33, 164, 247, 0.1) 90%, rgb(33, 164, 247, 0.1) 100%);
padding : 1em;
border : #c5c5c5 solid 1px;
box-shadow : 0 3px 8px rgb(0, 0, 0, 0.25);
border-radius : 3px;
}
.illustration-heading {
font-size : 1.5em;
}
.second-line, .fourth-line, .sixth-line {
background : rgb(255, 255, 255);
background : linear-gradient(0deg, rgb(255, 255, 255, 1) 0%, rgb(255, 255, 255, 1) 100%);
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.7s ease-in-out;
padding : 1em 0 1em 0;
border-radius : 10px;
}
.third-line, .fifth-line {
transition : all 0.7s ease-in-out;
padding : 1em 0 1em 0;
}
.first-key-row {
margin-top : 2em;
background-color : rgb(55, 255, 18, 0.07);
box-shadow : 0 0 5px 5px rgb(0, 0, 0, 0.30);
transition : all 0.3s ease-in-out;
padding : 0;
}
.first-line-headings {
background-color : #000000;
background-image : linear-gradient(147deg, #000000 0%, #434343 50%, #000000 100%);
box-shadow : 0 5px 5px 5px rgb(0, 0, 0, 0.96);
transform : scale(0.98);
margin-bottom : 1em;
}
.first-line-headings div p {
font-size : 1.5em;
text-align : center;
font-variant : small-caps;
font-weight : 700;
padding : 1em 1em 0 0;
color : #fff;
}
.key-column-points {
padding-top : 1em;
text-align : justify;
}
.key-column-points ul {
list-style-type : none;
padding-right : 1em;
}
.key-column-points ul li {
color : #0b5a93;
font-variant : small-caps;
font-weight : 700;
font-family : 'Raleway';
padding-left : 0;
padding-right : 0;
line-height : 1.8em;
}
.key-column-icon {
padding-top : 1em;
}
.key-column-icon img {
height : 8em;
width : auto;
}
.key-column-heading {
font-variant : small-caps;
font-size : 1.2em;
font-weight : 700;
color : #000;
}
.key-column-inner-heading-bottom {
font : bold 12px Sans-Serif;
letter-spacing : 2px;
text-transform : uppercase;
background : #369;
color : #fff;
padding : 5px 10px;
margin : 0 0 10px 0;
line-height : 24px;
position : absolute;
left : 0;
width : 50%;
height : 10%;
max-width : 100%;
max-height : 100%;
overflow : hidden;
transform-origin : 0 0;
transform : rotate(90deg);
}


/*CAROUSEL*/


/* Slideshow container */
.slideshow-container {
/*  max-width: 1000px;*/
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
    
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: rgb(0, 147, 255);
  font-weight: bold;
  font-size: 36px;
/*  transition: 0.6s ease;*/
  border-radius: 0 3px 3px 0;
  user-select: none;
    transition : all 0.3s ease-in-out;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
/*  background-color: rgba(0, 0, 0, 0.26);*/
    transform: scale(1.2);
    text-decoration: none;
}


/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgba(0, 147, 255, 0.2);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: rgb(0, 147, 255);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration: 2.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}