@import 'https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Playfair+Display:400,400i,700,700i,900,900i';

@import 'https://fonts.googleapis.com/css?family=Major+Mono+Display" rel="stylesheet'

 

/* typography

==================================================*/

 

h1 {

   font-family: 'Major Mono Display', monospace;

   font-size: 90px;

   line-height: 70px;

   background: linear-gradient(90deg, rgb(255, 255, 255), rgb(193, 194, 255));

   -webkit-background-clip: text;

   background-clip: text;

   color:transparent;

}

 

h4 {

   font-family: 'Lato', sans-serif;

   text-transform: capitalize;

   letter-spacing: 2px;

   position: relative;

   color: #C82228;

   margin-left: 40px;

   font-weight: 700;

}

 

h4:before {

   position: absolute;

   width: 30px;

   left: -40px;

   content: "";

   display: block;

   height: 2px;

   background: #C82228;

   top: 9px;

}

 

/* Audio

==================================================*/

 

#music{

position: relative;

z-index: 1000;

}

 

audio {

   background-color: black;

   width: 100%;

   height: 18px;

   }

 

/* General

==================================================*/

 

body {

   font-family: 'Open Sans', sans-serif, monospace;

   font-size: 14px;

   line-height: 24px;

}

 

.size-50 {

   font-size: 50px;

   line-height: 50px

}

 

.h-50 {

   height: 50px;

}

 

/* preloader

==================================================*/

 

#preloader {

   position: fixed;

   top: 0;

   left: 0;

   right: 0;

   bottom: 0;

   background-color: #222; /* refresh background color */

   z-index: 10000

}

 

#status,

.preloader {

   top: 50%;

   left: 50%;

   position: absolute

}

 

#status {

   width: 100px;

   height: 100px;

   background-repeat: no-repeat;

   background-position: center;

   margin: -50px 0 0 -50px

}

 

.preloader {

   height: 40px;

   width: 40px;

   margin-top: -20px;

   margin-left: -20px

}

 

.preloader:before {

   content: "";

   display: block;

   position: absolute;

   left: -1px;

   top: -1px;

   height: 100%;

   width: 100%;

   -webkit-animation: rotation 1s linear infinite;

   animation: rotation 1s linear infinite;

   border: 2px solid rgb(63, 102, 161); /* ring color*/

   border-top: 2px solid transparent;

   border-radius: 100%

}

 

.preloader>.icon {

   position: absolute;

   top: 50%;

   left: 50%;

   height: 25px;

   width: 10.6px;

   margin-top: -12.5px;

   margin-left: -5.3px;

   -webkit-animation: wink 1s ease-in-out infinite alternate;

   animation: wink 1s ease-in-out infinite alternate

}

 

@media only screen and (min-width:768px) {

   .preloader {

       height: 60px;

       width: 60px;

       margin-top: -30px;

       margin-left: -30px

   }

   .preloader:before {

       left: -2px;

       top: -2px;

       border-width: 2px

   }

   .preloader>.icon {

       height: 37.5px;

       width: 15.9px;

       margin-top: -18.75px;

       margin-left: -7.95px

   }

}

 

@media only screen and (min-width:1200px) {

   .preloader {

       height: 60px;

       width: 60px;

       margin-top: -30px;

       margin-left: -30px

   }

   .preloader>.icon {

       height: 50px;

       width: 21.2px;

       margin-top: -25px;

       margin-left: -10.6px

   }

}

 

@-webkit-keyframes rotation {

   from {

       -webkit-transform: rotate(0);

       transform: rotate(0)

   }

   to {

       -webkit-transform: rotate(359deg);

       transform: rotate(359deg)

   }

}

 

@keyframes rotation {

   from {

       -webkit-transform: rotate(0);

       transform: rotate(0)

   }

   to {

       -webkit-transform: rotate(359deg);

       transform: rotate(359deg)

   }

}

 

@-webkit-keyframes wink {

   from {

       opacity: 0

   }

   to {

       opacity: 1

   }

}

 

@keyframes wink {

   from {

       opacity: 0

   }

   to {

       opacity: 1

   }

}

 

 

/* Header

==================================================*/

 

header {

   text-align: center;

   -webkit-transition: all .5s;

   transition: all .5s;

   height: 65px;

}

 

nav ul {

   display: inline-block;

   padding-left: 0;

   list-style: none;

   padding: 20px;

   margin-bottom: 0;

   -webkit-transition: all .5s;

   transition: all .5s;

}

 

nav li {

   display: inline-block;

   margin: 10px;

}

 

nav li a {

   text-transform: uppercase;

   letter-spacing: 2px;

   color: #ddd; /* was 444 now ddd*/

   font-size: 11px;

   font-weight: bold;

}

 

.bg-nav {

   background: #18273E; /*header color of top of page when scrolling down*/

   border-bottom: 1px solid #f3f3f3

}

 

.bg-nav ul {

   padding: 10px;

}

 

a:focus {

   color: #ddd; /* was 444 now ddd*/

   text-decoration: none;

}

 

a:hover {

   color: #999; /* hover color */

   text-decoration: none;

}

 

a.active { /*matches with bg-nav*/

   color: #C82228;

}

 

 

/* home section

==================================================*/

 

#home {

   background: url(../img/home-bg-2.jpg);

   background-size: cover;

   height: 100vh;

}

 

#canvas {

   position: absolute;

   top: 0;

   left: 0;

   z-index: 10;

}

 

#chevron_down {

   visibility: hidden;

}

 

.table-cell {

   display: table-cell;

   vertical-align: middle;

}

 

.disply-table {

   display: table;

   height: 100vh;

   z-index: -1;

}

 

.text-gradient {

   background-image: linear-gradient(to right, color list);

     color: red, blue;

     -webkit-background-clip: text;

     background-clip: text;

   }

 

/* about section

==================================================*/

 

#about {

   padding: 100px 0;

   background-image: url("bg.jpg");

}

 

.about-img-div img {

   margin: 0 auto;

}

 

.about-border {

   position: absolute;

   border: 10px solid #18273E;

   width: 400px;

   height: 400px;

   top: 40px;

   left: 110px;

   z-index: 1

}

 

 

/* projects section

==================================================*/

 

#projects {

   background-color: #111;

   padding: 100px 0;

}

 

.portfolio .categories-grid span {

   font-size: 30px;

   margin-bottom: 30px;

   display: inline-block;

}

 

.portfolio .categories-grid .categories ul li {

   list-style: none;

   margin: 20px 0;

}

 

.portfolio .categories-grid .categories ul li a {

   display: inline-block;

   color: #60606e;

   padding: 0 10px;

   margin: 0 14px;

   -webkit-transition: all .2s ease-in-out .2s;

   transition: all .2s ease-in-out .2s;

}

 

.portfolio .categories-grid .categories ul li a:hover,

.portfolio .categories-grid .categories ul li a:focus {

   text-decoration: none;

}

 

.portfolio .categories-grid .categories ul li a.active {

   background-color: #18273E;

   padding: 0px 20px;

   color: white;

   text-decoration: none;

}

 

.portfolio_filter {

   padding-left: 0;

}

 

.portfolio_item {

   position: relative;

   overflow: hidden;

   display: block;

   margin-bottom: 30px;

}

 

.portfolio_item .portfolio_item_hover {

   position: absolute;

   top: 0px;

   left: 0px;

   height: 100%;

   width: 100%;

   background-color: #18273E;

   -webkit-transform: translateY(100%);

   transform: translateY(100%);

   opacity: 0;

   -webkit-transition: all .2s ease-in-out;

   transition: all .2s ease-in-out;

   color: #333;

}

 

.portfolio_item .portfolio_item_hover .item_info {

   text-align: center;

   position: absolute;

   top: 50%;

   left: 50%;

   -webkit-transform: translate(-50%, -50%);

   transform: translate(-50%, -50%);

   padding: 10px;

   width: 100%;

   font-weight: bold;

}

 

.portfolio_item .portfolio_item_hover .item_info span {

   display: block;

   color: #fff;

   font-size: 18px;

   -webkit-transform: translateY(-100px);

   transform: translateY(-100px);

   -webkit-transition: all .3s ease-in-out .3s;

   transition: all .3s ease-in-out .3s;

   opacity: 0;

}

 

.portfolio_item .portfolio_item_hover .item_info em {

   font-style: normal;

   display: inline-block;

   background-color: #18273E;

   padding: 5px 20px;

   color: #fff;

   margin-top: 10px;

   -webkit-transform: translateY(100px);

   transform: translateY(100px);

   -webkit-transition: all .3s ease-in-out .3s;

   transition: all .3s ease-in-out .3s;

   opacity: 0;

   font-size: 10px;

   letter-spacing: 2px;

}

 

.portfolio_item:hover .portfolio_item_hover {

   opacity: 1;

   -webkit-transform: translateX(0);

   transform: translateX(0);

}

 

.portfolio_item:hover .item_info em,

.portfolio_item:hover .item_info span {

   opacity: 1;

   -webkit-transform: translateX(0);

   transform: translateX(0);

}

 

.portfolio .categories-grid .categories ul li {

   float: left;

}

 

.portfolio .categories-grid .categories ul li a {

   padding: 0 10px;

   -webkit-transition: all .2s ease-in-out .2s;

   transition: all .2s ease-in-out .2s;

}

 

.portfolio_filter {

   padding-left: 0;

   display: inline-block;

   margin: 0 auto;

   text-align: center;

}

 

.portfolio_item img {

   -webkit-filter: grayscale(100%);

   filter: grayscale(100%);

}

 

.portfolio-padding {

   padding: 50px 0;

}

 

.portfolio-inner {

   padding-bottom: 0 !important;

   padding-top: 55px;

}

 

.modal-content {

   box-shadow: 0 5px 15px rgba(0, 0, 0, 0);

   border: none;

}

 

.popup-modal {

   background: #fff;

}

 

.close-popup-modal {

   float: right;

   margin: 20px;

   font-size: 22px;

   opacity: 0;

   cursor: pointer;

   -webkit-transition: all .3s;

   transition: all .3s;

   -webkit-transition-delay: .6s;

   transition-delay: .6s;

   position: fixed;

   z-index: 100000;

   right: 14px;

}

 

.animatedModal-on .close-popup-modal {

   opacity: 1;

}

 

.modal-content h2 {

   font-family: 'Playfair Display', serif;

   font-size: 40px;

   line-height: 50px;

}

 

/* experience section

==================================================*/

#experience {

   padding: 100px 0;

   background: #f3f3f3

}

 

.experience-row {

   padding: 20px 0;

   border-bottom: 1px solid #ddd;

}

 

.experience-row h3 {

   font-family: 'Lato', sans-serif;

   text-transform: capitalize;

   letter-spacing: 2px;

   color: #18273E;

   font-size: 16px;

   font-weight: bold

}

 

.experience-row p {

   color: #888;

   margin-top: 20px;

   font-size: 15px;

}

 

.experience-row .date {

   color: #000;

   font-size: 17px;

}

 

.timeline {

   padding-left: 0;

   list-style: none;

   position: relative;

}

 

.timeline:before {

   background-color: black;

   content: '';

   margin-left: -1px;

   position: absolute;

   top: 0;

   left: 2em;

   width: 2px;

   height: 100%;

}

 

.timeline-event {

   position: relative;

}

 

.timeline-event:hover .timeline-event-icon {

   -webkit-transform: rotate(-45deg);

   transform: rotate(-45deg);

   background-color: #C82228;

}

 

.timeline-event:hover .timeline-event-thumbnail {

   box-shadow: inset 40em 0 0 0 #C82228;

}

 

.timeline-event-copy {

   padding: 2em;

   position: relative;

   top: -1.875em;

   left: 4em;

   width: 100%;

}

 

.timeline-event-copy h3 {

   font-size: 1.75em;

}

 

.timeline-event-copy h4 {

   font-size: 1.2em;

   margin-bottom: 1.2em;

}

 

.timeline-event-copy strong {

   font-weight: 700;

}

 

.timeline-event-copy p:not(.timeline-event-thumbnail) {

   padding-bottom: 1.2em;

}

 

.timeline-event-icon {

   -webkit-transition: -webkit-transform 0.2s ease-in;

   transition: -webkit-transform 0.2s ease-in;

   transition: transform 0.2s ease-in;

   transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;

   -webkit-transform: rotate(45deg);

   transform: rotate(45deg);

   background-color: #18273E;

   outline: 10px solid #f3f3f3;

   display: block;

   margin: 0.5em 0.5em 0.5em -0.5em;

   position: absolute;

   top: 0;

   left: 2em;

   width: 1em;

   height: 1em;

}

 

.timeline-event-thumbnail {

   -moz-transition: box-shadow 0.5s ease-in 0.1s;

   -o-transition: box-shadow 0.5s ease-in 0.1s;

   -webkit-transition: box-shadow 0.5s ease-in;

   -webkit-transition-delay: 0.1s;

   transition-delay: 0.1s; /*For Compatibility*/

   -webkit-transition: box-shadow 0.5s ease-in 0.1s;

   transition: box-shadow 0.5s ease-in 0.1s;

   color: white;

   font-size: 12px;

   font-weight: bold;

   background-color: black;

   box-shadow: inset 0 0 0 0em #18273E;

   display: inline-block;

   margin-bottom: 1.2em;

   padding: 0.25em 1em 0.2em 1em;

}

 

/* contact

==================================================*/

 

#contact {

   padding: 100px 0;

   background-image: linear-gradient(#f3f3f3, white);

 

 

}

 

#contact-form input,

#contact-form textarea {

   height: 50px;

   margin-bottom: 10px;

   border-radius: 0;

}

 

#contact-form label {

   display: block;

   margin-bottom: .2em;

   font-size: 13px;

   line-height: 13px;

   font-size: 1.3rem;

   line-height: 1.3rem;

   color: #000;

}

 

#contact-form label.error {

   margin-top: 10px;

   margin-bottom: 1em;

   font-size: 12px;

   line-height: 12px;

   font-size: 1.2rem;

   line-height: 1.2rem;

   color: #D33E43;

   margin-left: 10px

}

 

#contact-form input[type="text"].error,

#contact-form input[type="password"].error,

#contact-form input[type="date"].error,

#contact-form input[type="datetime"].error,

#contact-form input[type="datetime-local"].error,

#contact-form input[type="month"].error,

#contact-form input[type="week"].error,

#contact-form input[type="email"].error,

#contact-form input[type="number"].error,

#contact-form input[type="search"].error,

#contact-form input[type="tel"].error,

#contact-form input[type="time"].error,

#contact-form input[type="url"].error,

#contact-form textarea.error {

   border-color: #D33E43

}

 

textarea {

   resize: none;

}

 

fieldset {

   border: 0px;

   margin: 0;

   padding: 0

}

 

.required {

   color: #e9266d

}

 

#success,

#error {

   display: none

}

 

#success p,

#error p {

   display: block;

}

 

#success p {

   color: #18273E;

   font-size: 15px;

   text-align: center;

   padding: 10px;

   border: 2px solid #18273E;

   margin-top: 10px;

}

 

#error p {

   color: #D33E43;

   font-size: 15px;

   text-align: center;

   padding: 10px;

   border: 2px solid #D33E43;

   margin-top: 10px;

}

 

#submit {

   background-color: #18273E;

   color: #fff;

   padding: 10px 40px;

   border-radius: 0;

   text-transform: uppercase;

   letter-spacing: 2px;

   font-weight: bold;

   width: 100%;

}

 

.social {

   padding-left: 0;

   list-style: none;

   margin-top: 20px;

}

 

.social li {

   float: left;

}

 

.social li a {

   color: #333;

   font-size: 35px;

   margin-right: 15px;

   transition: all .3s;

   -webkit-transition: all .3s;

}

 

.social li a:hover {

   color: #C82228;

}

 

 

/* Responsive media queries

==================================================*/

 

@media (max-width: 991px) {

   .portfolio .categories-grid .categories ul li a {

       padding: 0 2px;

   }

}

 

@media (max-width: 768px) {

   .timeline-event-copy {

       width: 90%;

       left: 2em;

   }

}

 

@media (max-width: 500px) {

   h1 {

       font-family: 'Playfair Display', serif;

       font-size: 50px;

       line-height: 50px;

      

   }

   #home,

   .disply-table {

       height: 600px;

   }

   .about-border {

       width: 265px;

   }

   .portfolio .categories-grid .categories ul li {

       list-style: none;

       margin: 10px 0;

   }

}

 

@media (max-width: 420px) {

   nav li {

       margin: 6px;

   }

   nav li a {

       font-size: 10px;

   }

}

 

/* Banner

==================================================*/

 

#banner {

   /*background: #fae2e2;*/

   background-image: linear-gradient(white, rgba(54, 86, 134, 0.425));

   background-size: contain;

   height: 35px;

}

 

h5 { /*Exclusive to changelog */

 

   font-family: 'Lato', sans-serif;

   font-size: 10px;

   position: relative;

   padding-top: 770px;

   color: #999;

}

 

h6 { /*Exclusive to banner */

 

   font-family: 'Lato', sans-serif;

   font-size: 12px;

   letter-spacing: 8px;

   padding-top: 10px;

   position: relative;

   color: #18273E;

}

 

button {

   background-color: Transparent;

   background-repeat:no-repeat;

   border: none;

   cursor:pointer;

   overflow: hidden;

   outline:none;

}

 

.gacontainer {

   position: absolute;

   bottom: 1%;

   right: 0%;

   height:25px;

   width:25px;

   margin-right: 8px;

   z-index: 999;

}

 

.ga {

   opacity: 0.45;

   display: block;

   width: 100%;

   height: auto;

   transition: .5s ease;

   backface-visibility: hidden;

}

 

.gacontainer:hover .ga {

   opacity: 1;

}

 

.lecontainer {

   position: absolute;

   bottom: 1%;

   right: 0%;

   height:25px;

   width:25px;

   margin-right: 72px;

   z-index: 999;

}

 

.le {

   opacity: 0.45;

   display: block;

   width: 100%;

   height: auto;

   transition: .5s ease;

   backface-visibility: hidden;

}

 

.lecontainer:hover .le {

   opacity: 1;

}

 

.gitcontainer {

   position: absolute;

   bottom: 1%;

   right: 0%;

   height:25px;

   width:25px;

   margin-right: 40px;

   z-index: 999;

}

 

.git {

   opacity: 0.45;

   display: block;

   width: 100%;

   height: auto;

   transition: .5s ease;

   backface-visibility: hidden;

}

 

.gitcontainer:hover .git {

   opacity: 1;

}

 

.cccontainer {

   z-index: 999;

}

 

.cc {

   opacity: 0.45;

   display: block;

   margin-left: auto;

   margin-right: auto;

   transition: .5s ease;

   backface-visibility: hidden;

}

 

.cccontainer:hover .cc {

   opacity: 1;

}

 

.codecontainer {

   position: absolute;

   height:45px;

   width:45px;

   margin-right: 8px;

   margin-top: 12px;

   z-index: 9999;

   right: 0%;

}

 

.code {

   opacity: 0.45;

   display: block;

   width: 100%;

   height: auto;

   transition: .5s ease;

   backface-visibility: hidden;

}

 

.codecontainer:hover .code {

   opacity: 1;

}