@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,300,400,700");
 @import url("https://fonts.googleapis.com/css?family=Volkhov:400italic");
 @font-face {
     font-family: 'Antro Vectra';
     src: url('../fonts/AntroVectra.woff2') format('woff2'), url('../fonts/AntroVectra.woff') format('woff'), url('../fonts/AntroVectra.ttf') format('truetype'), url('../fonts/AntroVectra.svg#AntroVectra') format('svg');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'Antro Vectra';
     src: url('../fonts/AntroVectra-Bolder.woff2') format('woff2'), url('../fonts/AntroVectra-Bolder.woff') format('woff'), url('../fonts/AntroVectra-Bolder.ttf') format('truetype'), url('../fonts/AntroVectra-Bolder.svg#AntroVectra-Bolder') format('svg');
     font-weight: bold;
     font-style: normal;
}
 body {
     margin: 0;
     font: 400 .9rem/1.8 "Open Sans", sans-serif;
     color: #666;
     text-align: left;
     background-color: #fff;
     background-image: url('../img/background-image2.png');
     background-attachment: fixed;
}
 section.exsection {
     background-image: url('../img/background-image.png');
     background-attachment: fixed;
     padding: 8em 0;
     color: #fff;
}
section.container-fluid.bg-3.text-center {
    margin-top: 5em;
    margin-bottom: 5em;
    }
 section.info {
     padding: 6em 0;
}
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family: "Open Sans", sans-serif;
     line-height: 1.4;
     color: inherit;
     margin-bottom: .75em;
     /*letter-spacing: 3px;
     text-transform: uppercase;*/
}
 h2, .h2 {
     font-size: 2.1em;
}
 h3, .h3 {
     font-size: 2em;
}
 h4, .h4 {
     font-size: 1.65em;
}
 span.nobr {
     white-space: nowrap;
}
 .jumbotron h1 {
     font-family: 'Antro Vectra';
     font-style: normal !important;
     text-transform: capitalize;
     letter-spacing: 0px;
     font-weight: 800;
     font-size: 6em;
     margin: 0;
     position: relative;
     top: 1em;
}
 .jumbotron {
     height: 89vh;
     color: #fff;
     border-radius: 0;
     position: relative;
}
 a {
     color: #000f68;
}
 a:hover {
     color: #0021e5 !important;
}
 a.down {
     color: #fff;
     position: absolute;
     font-size: 1.1rem;
     width: 90%;
     display: block;
     bottom: 1em;
     margin: 0 auto;
     text-align: center;
     opacity: .5;
}
 .hidden {
     height: 0px;
     width: 0px;
     position: absolute;
     left: -10000000px;
}
 .info .row {
     margin: 0;
}
 .script {
     font-family: 'Antro Vectra';
     font-weight: bold;
     font-style: normal !important;
}
 a.navbar-brand.script {
     font-size: 3em;
     text-transform: capitalize;
     letter-spacing: 0px;
     margin-top: 11px;
     padding: 0;
}
 a.navbar-brand.script:hover {
     color: #fff !important;
}
 .navbar {
     padding: 0;
     background-color: #000000 !important;
}
 .navbar, footer {
     font-family: "Open Sans", sans-serif;
     font-size: 11px;
     letter-spacing: 3px;
     text-transform: uppercase;
}
 .navbar-collapse {
     flex-grow: 0;
}
 .navbar-toggler {
     padding: 0;
}
 .navbar-dark .navbar-toggler {
     border-color: rgba(255, 255, 255, 0);
}
 div#navblock {
     width: 100%;
     height: 69px;
     position: absolute;
     background-color: #000;
     color: #fff;
}
 div#navblock .container:hover {
     color: #fff !important;
}
 li.nav-item a:hover {
     color: #fff !important;
}
 .headroom {
     will-change: transform;
     transition: transform 200ms linear;
}
 .headroom--pinned {
     transform: translateY(0%);
}
 .headroom--unpinned {
     transform: translateY(-100%);
}
 .caption-content {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
     width: 100%;
     height: 100%;
     margin: 0 auto;
}
 .caption-content p {
     font-family: "Open Sans", sans-serif;
     font-size: 2em;
     letter-spacing: 3px;
     font-weight: 300;
}
 span.slash {
     font-size: 3em;
     font-weight: 100;
    /* display: inline-block;
     */
     top: .25em;
     position: relative;
     font-family: "Volkhov", sans-serif;
}
/* Footer Styles */
 .bg-primary {
     background-color: #000 !important;
}
 .bg-circle {
     display: inline-block;
     width: 60px;
     height: 60px;
     padding: 14px 4px;
     color: #ececec;
     text-align: center;
     border-radius: 50%;
}
 .bg-circle-outline {
     color:smoke;
}
 .fas, .fab, .far {
     font-size: 2.25em !important;
     color: rgba(255, 255, 255, 0.75);
}
a.text-white.icon svg {
    font-size: 2.25em;
    margin-right: 0.25em;
    color: rgba(255, 255, 255, 0.75);
}
 .fas:hover, .far:hover, .fab:hover, a.text-white.icon svg:hover {
     color: rgba(255, 255, 255, 1);
}
 footer .fas, footer .fab, footer .far {
     margin-right: .25em;
}
 .skills p {
     line-height: 1em;
}
 .skills .fa-2x {
     color: #666;
     font-size: 1.5em;
     display: inline-block;
     margin: 0 1px;
}
 .skills span.nobr {
     margin-right: 1em;
}
 .bg-circle a, a:hover, .media a:focus {
     text-decoration: none !important;
     outline: none;
     color: #ececec;
}
 .bg-circle-outline a, a:hover, .media a:focus {
     text-decoration: none !important;
     outline: none;
     color: #ececec;
}
 footer {
     background-color: #000000e0 !important;
}
 .jumbotron {
     background-image: url('../img/cover-image.jpg');
     background-size: cover;
     background-position: center top;
     background-attachment: fixed;
     background-color: #000;
}
/* Examples Section */
 .border {
     border: 1px solid #000 !important;
}
 .ex {
     display: block;
     background-size: 100%;
     background-position: top;
     transition: 1s all;
     margin-bottom: 2em;
     animation-iteration-count: 2;
     animation-direction: alternate;
     animation-timing-function: linear;
     border-radius: .75em;
}
 .ex:hover {
     background-position: 0 -230px;
     transition: 2s all;
     animation-iteration-count: 2;
     animation-direction: alternate;
     animation-timing-function: linear;
    /* filter: grayscale(100%);
     */
}
 .ex .clkhover {
     display: none;
     width: 100%;
     height: 100%;
     text-align: right;
     font-size: 2em;
     font-family: "Open Sans", sans-serif;
     line-height: 1.4;
     color: #666;
     position: relative;
     font-weight: 100;
     border-radius: .38em;
}
 .ex:hover .clkhover {
     display: block;
     transition: 2s all;
     background: #ffffffe8;
}
 .ex .clkhover p {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-pack:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-flex-line-pack:center;
    -ms-flex-line-pack:center;
    -webkit-align-content:center;
    align-content:center;
    -webkit-flex-direction:column;
    -moz-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0 1em 1em 0;
    padding: 1em;
    color: #202020;
    text-transform: uppercase;
    font-weight: 300;
}
 .x001 {
     background-image: url('../img/examples/001.jpg');
}
 .x002 {
     background-image: url('../img/examples/002.jpg');
}
 .x003 {
     background-image: url('../img/examples/003.jpg');
}
 .x004 {
     background-image: url('../img/examples/004.jpg');
}
 .x004:hover {
     background-position: 0 -170px;
     transition: 1.5s all;
}
 .x005 {
     background-image: url('../img/examples/005.jpg');
}
 .x006 {
     background-image: url('../img/examples/006.jpg');
}
 .x007 {
     background-image: url('../img/examples/007.jpg');
}
 .x007:hover {
     background-position: 0 -75px;
     transition: 1s all;
}
 .x008 {
     background-image: url('../img/examples/008.jpg');
}
 .x008:hover {
     background-position: 0 -110px;
     transition: 1.5s all;
}
 .x009 {
     background-image: url('../img/examples/009.jpg');
}
 .x010 {
     background-image: url('../img/examples/010.jpg');
     background-position: 0 -100px;
}
 .x010:hover {
     background-position: 0 -300px;
     transition: 1s all;
}
 .form-control {
     color: #4d4d4d;
}
 .modal-content {
     color: #4d4d4d;
     background-repeat: repeat-y;
     background-size: 40%;
     text-align: left;
     background-color: #0000;
     border: none;
}
 .modal-content.services {
     background: #fff;
     border-radius: .75em;
     padding: 0 2em 3em 2em;
}
 .modal-content.services.contact {
     padding: 2em;
}
 .modal-content button.close.sclose {
     color: #000;
}
 .modal-header {
     margin: 2rem 1rem 0 1rem;
     border-bottom: none;
}
 .modal-title {
     text-transform: none;
     letter-spacing: normal;
}
 .modal-body {
     padding: .5rem 2rem;
}
 #modalcontact .close.sclose {
     width: 3%;
     float: right;
}


 img.imgModal {
     width: 100%;
}
 .imgModalBx {
     height: 80vh;
     overflow-y: scroll;
     padding-right: 0px;
}
 .imgModalBx img {
     border: 1px solid #00000066;
     box-shadow: 0px 18px 15px #0000004a;
}
 .imgModalBx::-webkit-scrollbar {
     width: 8px;
}
 .imgModalBx::-webkit-scrollbar-track {
     border: 1px solid #ffffff40;
     border-radius: 10px;
}
 .imgModalBx::-webkit-scrollbar-thumb {
     background: #dedede;
     opacity: .75;
     border-radius: 10px;
}
 .imgModalBx::-webkit-scrollbar-thumb:hover {
     background: #fff;
     opacity: 1;
}
 button:focus {
     outline: none;
}
 .close {
     font-size: 3rem;
     color: #fff;
     opacity: .75;
     width: 100%;
     text-align: right;
     padding-bottom: .25em !important;
}
 .close:hover {
     color: #fff;
     opacity: .9;
}
 .popupbx {
     background-color: #fff;
     padding: 2em;
     line-height: 1.45em;
     border: 1px solid #030303d4;
     border-radius: .5em;
}
/* Contact Form Styles */
 a#captcha_reload {
     color: #4d4d4d;
}
 .btn-primary {
     background-color: #666;
     border-color: #666;
}
 .btn-primary:hover {
     background-color: #4a4a4a;
     border-color: #4a4a4a;
}
/* Desktop Specific Styles */
 @media only screen and (min-width: 992px) {
     .navbar {
         height: 11vh;
    }
}
/* Desktop Specific Styles */
 @media only screen and (min-width: 1400px) {
     .caption-bx {
         top: 15vh;
    }
}
/* Smaller Screen styles */
 @media only screen and (max-width: 992px) {
     body {
     font: 400 1rem/1.8 "Open Sans", sans-serif;
    }
     .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
         padding: 0 15px;
    }
     .jumbotron {
     height: 92vh;
    }
    .navbar-toggler-icon {
        height: 8vh;
    }
    .navbar-toggler {
        font-size: 1.15rem;
    }
    .modal-body {
    padding: 0.5rem 1.25rem;
    }
     .ex {
         height: 25vh;
    }

     div#navblock {
         height: 71px;
    }
    .navbar-nav {
        padding-bottom: 1em;
    }
}
/* Mobile Specific styles */
 @media only screen and (max-width: 575px) {
     p.mobile-right {
         width: 100%;
         text-align: right;
    }
     .jumbotron h1 {
         font-size: 3.5em;
         top: .65em;
         margin-top: 40%;
    }
     span.slash {
         font-size: 2em;
    }
     .caption-content p {
         font-size: 1.2em;
    }
     .skills {
         display: none;
    }
     .imgModalBx {
         overflow-y: normal;
         padding-right: 0px;
         padding: 0;
         height: inherit;
    }
     .imgModalBx::-webkit-scrollbar {
         height: 0;
         width: 0;
    }
     .modal-content {
         background-color: #fff;
    }
     .popupbx {
         padding: 0 0 1em 0;
         border: 0;
    }
     .close {
         color: #000;
         padding-bottom: 0;
    }
     .close:focus {
         color: #000;
    }
}
/* Legacy Mobile Specific styles */
 @media screen and (device-aspect-ratio: 40/71) {
     .jumbotron h1 {
         font-size: 3em;
    }
}
/* Mobile Specific styles */
 @media only screen and (max-width: 400px) { 
         .caption-content p {
         letter-spacing: 2px;
    }
 }
/* iPhone X Specific styles */
 @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
     .jumbotron h1 {
         margin-top: 20vh;
    }
}