/*!
 *  Theme CSS
 */
/* -------------------------- */

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


html,
body,
header,
h1,h2,h3,h4,h5,
p,
strong,
a,
span,
div,
table,
tr,
td
{font-family: 'Open Sans', sans-serif;}

body {

}

:root {
  --darkBlue: #170c4e;
  --lightBlue: #6ed0f7;
  --kindaBlue: #275cac;
  --white: #fff;
  --black: #000;
}

::selection {
    color: var(--lightBlue);
    background: var(--darkBlue);
}



#wrapper {
      margin: 35px 10% 0;
}

.h100 {height: 100%;}
.pA {position: absolute;}
.fR {float: right;}
.fL {float: left;}
.vaT {position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.vaM {position: relative; top: 50%;}
.vaB {position: relative; bottom: 0%;}
.va13 {position: relative; top: 13%;}
.va28 {position: relative; top: 28%;}


/* ############################# HEAD ##################################### */

/* Header */
header { position: relative; height:10%; z-index: 9990;}








/* LOGO */

.logo {text-align: center; height: 100%;}
.logo img {max-width:100%; max-height:100%; width: auto; height: auto;}
.logo h1 {
    font-size: 75%;
    /* width: 155px; */
    margin: 0;
    padding: 0;
    position: relative;
    right: -6%;
    bottom: 21%;
    color: #275cac;
}


/* Head Contact */
.headContact { color:var(--white); padding: 13px 0 0 21%;}
.headContact span {display: block; color: var(--white); }
.headContact span i {width: 14px; overflow: hidden;}
.headContact strong {font-weight: 500; padding-left: 5%;}
.headContact strong a { color:var(--white); }


/* #######################################    MAIN CONTENT   #########################################*/

/* HOME */

.home {}
.home h2, p {color:var(--white); }
.home .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; z-index: 1200; width: 100%; }
.mainContent #wrapper {margin: 0 10%; height: 100%;}
.home .L {color:var(--white); padding: 0% 14% 0 7%; }
.home .L p {font-size: .9em; color: var(--white);}
.home .L a {color: var(--white); }
.home .L h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; display: inline-block; color: var(--white); }
.home .L h2 a {color: var(--white); }
.home .L h2 a:hover, a:focus {color: var(--darkBlue); text-decoration: none; }
.home .R {color: var(--darkBlue); padding: 0% 11% 0 10%; }
.home .R h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; color: var(--darkBlue); display: inline-block; }
.home .R h2 a {color: var(--darkBlue); }
.home .R h2 a:hover, a:focus {color: var(--white); text-decoration: none; }
.home .R p {font-size: .9em; color: var(--darkBlue);}
.home .headContact span i {color: var(--white); }

.home .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    left: 50%;
    width: 150px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.home .morePos:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}
.home .moreNeg:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}


.home .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
         color: var(--white);
}


.morePosR {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
    border: 2px solid #170c4e;
    color: #170c4e;
    padding: 15px 35px;
    margin: 120px 0;
    position: absolute;
    left: 61%;
    width: 150px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.morePosR:hover {color: #6ed0f7 !important; background-color: #170c4e !important;}
.moreNegR:hover {color: #6ed0f7 !important; background-color: #170c4e !important;}


.moreNegR {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}


/* CAT PAGE */

.cat {background-color: var(--kindaBlue); }
.cat h2, p {color:var(--white); }
.cat .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; z-index: 1200; width: 100%; }
.cat .L {color:var(--white); padding: 0% 1% 0 7%; }
.cat .L p {font-size: .88em; color: var(--white); }
.cat .L a {color: var(--white); }
.cat .L h2 {font-size: 3vmax; font-weight: 700; margin-bottom: 6%; display: inline-block; color: var(--white); }
.cat .L h2 a {color: var(--white); }
.cat .L h2 a:hover, a:focus {color: var(--darkBlue); text-decoration: none; }
.cat .R {color: var(--darkBlue); padding: 0% 0 0 5%; }
.cat .R h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; color: var(--darkBlue); display: inline-block; }
.cat .R h2 a {color: var(--darkBlue); }
.cat .R h2 a:hover, a:focus {color: var(--white); text-decoration: none; }
.cat .R p {font-size: .9em; color: var(--darkBlue);}

.cat .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    left: 50%;
    width: 182px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;

}

.cat .morePos:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}
.cat .moreNeg:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}


.cat .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
        color: var(--white);
}


/* CAT PAGE LOSANGE EFFECT FOR IMGS */

.cat .losanges {}
.cat .losange, .losange div {margin: 0 auto; transform-origin: 50% 50%; overflow: hidden; width: 150px; height: 150px; }
.cat .losange {transform: rotate(45deg) translateY(10px); margin-bottom: 75px; }
.cat .losange .view {width: 239px; height: 249px; transform: rotate(-45deg) translateY(-74px); }
.cat .losange .view img {width: 100%; height: auto; }
.cat .losange .view .mask img {width: 50px; position: absolute; left: 38%; top: 32%; opacity: 0;}
.cat .losange .view .mask:hover img {width: 75px; opacity: 1; left: 32%; top:32%;}
/*Losanges Column Fixes */
.cat .losanges .col-md-3:nth-child(1) {margin-top: 113px; }
.cat .losanges .col-md-3:nth-child(2) {margin-left: -3%; margin-right: -3%; }
.cat .losanges .col-md-3:nth-child(3) {margin-top: 113px; }
.cat .losanges .col-md-3:nth-child(4) {margin-top: 226px; margin-left: -3%;}

.cat .view {width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; }
.cat .view .mask, .view .content {width: 213px; height: 213px; position: absolute; overflow: hidden; top: 1px; left: 6px; background-color: rgba(33, 150, 243, 0.2); }
.cat .view img {display: block; position: relative }
.cat .view h2 { visibility: hidden; text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; width: 213px; height: auto; padding: 0; margin: 42% 0 0 0; }
.cat .view p {font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center }
.cat .view a.info {text-decoration: none; padding: 7px 14px; color: #fff; text-transform: uppercase; }
.cat .view a.info:hover {}
.cat .view-first img {transition: all 0.2s linear; }
.cat .view-first .mask {transition: all 0.4s ease-in-out; }
.cat .view-first .mask .maskA {width:100%; height:100%; position: absolute;}
.cat .view-first h2 {transition: all 0.2s ease-in-out; }
.cat .view-first p {transition: all 0.2s linear; }
.cat .view-first i {position: absolute; left: 66px; top: 57px; font-size: 7em; text-shadow: 0px 0px 30px #000000; color: #aeaeae; -ms-transform: scale(0); /* IE 9 */ -webkit-transform: scale(0); /* Safari */ transform: scale(0); /* Standard syntax */ transition: all 0.2s linear; }
.cat .view-first a.info{transition: all 0.2s ease-in-out; }
.cat .view-first:hover img {-ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari */ transform: scale(1.1); }
.cat .view-first:hover i {-ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); /* Standard syntax */ }
.cat .view-first:hover .mask {opacity: 1; background-color: rgba(110,208,247, 0); }
.cat .view-first:hover h2, .view-first:hover p, .view-first:hover a.info {opacity: 0; color:#000; transform: translateY(5px); }
.cat .headContact span i {color: var(--white); }


/* TEAM PAGE */

.team {background-color: var(--white); }
.team h2, p {color:var(--darkBlue); }
.team .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; z-index: 1200; width: 100%; }
.team .L {color:var(--darkBlue); padding: 0% 1% 0 7%; }
.team .L p {font-size: .88em; color: var(--kindaBlue); }
.team .L a {color: var(--darkBlue); }
.team .L h2 {font-size: 3vmax; font-weight: 700; margin-bottom: 6%; display: inline-block; color: var(--kindaBlue); }
.team .L h2 a {color: var(--darkBlue); }
.team .L h2 small {color: var(--darkBlue); }
.team .L h2 a:hover, a:focus {color: var(--darkBlue); text-decoration: none; }
.team .R {color: var(--darkBlue); padding: 0% 0 0 5%; }
.team .R h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; color: var(--darkBlue); display: inline-block; }
.team .R h2 a {color: var(--darkBlue); }
.team .R h2 a:hover, a:focus {color: var(--white); text-decoration: none; }
.team .R p {font-size: .9em; color: var(--darkBlue);}

.team .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid var(--kindaBlue);
    color: var(--kindaBlue);
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    left: 50%;
    width: 182px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;

}

.team .morePos:hover {color:  var(--white); !important; background-color:  var(--darkBlue) !important;}
.team .moreNeg:hover {color:  var(--white); !important; background-color:  var(--darkBlue) !important;}
.team .morePos:hover span { color: var(--white);}

.team .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
        color: var(--kindaBlue);
}


/* TEAM PAGE LOSANGE EFFECT FOR IMGS */

.team .losanges {}
.team .losange, .losange div {margin: 0 auto; transform-origin: 50% 50%; overflow: hidden; width: 150px; height: 150px; }
.team .losange {transform: rotate(45deg) translateY(10px); margin-bottom: 75px; }
.team .losange .view {width: 239px; height: 249px; transform: rotate(-45deg) translateY(-74px); }
.team .losange .view img {width: 100%; height: auto; }
.team .losange .view .mask img {width: 50px; position: absolute; left: 38%; top: 32%; opacity: 0;}
.team .losange .view .mask:hover img {width: 75px; opacity: 1; left: 32%; top:32%;}
/*Losanges Column Fixes */
.team .losanges .col-md-3:nth-child(1) {margin-top: 113px; }
.team .losanges .col-md-3:nth-child(2) {margin-left: -3%; margin-right: -3%; }
.team .losanges .col-md-3:nth-child(3) {margin-top: 113px; }
.team .losanges .col-md-3:nth-child(4) {margin-top: 226px; margin-left: -3%;}

.team .view {width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; }
.team .view .mask, .view .content {width: 213px; height: 213px; position: absolute; overflow: hidden; top: 1px; left: 6px; background-color: rgba(0,0,0,.4); }
.team .view img {display: block; position: relative }
.team .view h2 {text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; width: 213px; height: auto; padding: 0; margin: 42% 0 0 0; }
.team .view p {font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center }
.team .view a.info {text-decoration: none; padding: 7px 14px; color: var(--white); text-transform: uppercase; }
.team .view h2 small { color: var(--white); text-transform: none; font-weight: 700; display: block;}
.team .view a.info:hover {}
.team .view-first img {transition: all 0.2s linear; }
.team .view-first .mask {transition: all 0.4s ease-in-out; }
.team .view-first .mask .maskA {width:100%; height:100%; position: absolute;}
.team .view-first h2 {transition: all 0.2s ease-in-out; }
.team .view-first p {transition: all 0.2s linear; }
.team .view-first i {position: absolute; left: 66px; top: 57px; font-size: 7em; text-shadow: 0px 0px 30px #000000; color: #aeaeae; -ms-transform: scale(0); /* IE 9 */ -webkit-transform: scale(0); /* Safari */ transform: scale(0); /* Standard syntax */ transition: all 0.2s linear; }
.team .view-first a.info{transition: all 0.2s ease-in-out; }
.team .view-first:hover img {-ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari */ transform: scale(1.1); }
.team .view-first:hover i {-ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); /* Standard syntax */ }
.team .view-first:hover .mask {opacity: 1; background-color: rgba(110,208,247, 0); }
.team .view-first:hover h2, .view-first:hover p, .view-first:hover a.info {opacity: 0; color:#000; transform: translateY(5px); }
.team .headContact span i {color: var(--kindaBlue); }
.team .headContact span strong a{color: var(--kindaBlue); }
.team #navigation-icon span {background-color: var(--kindaBlue);}

/* DETAILS PAGE */

.details {background-color: var(--kindaBlue); }
.details .mainContent #wrapper h2, p {color:var(--white); }
.details .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; z-index: 1200; width: 100%; }
.details .mainContent #wrapper .L {color:var(--white); padding: 0% 1% 0 7%; }
.details .mainContent #wrapper .L p {font-size: .85em; color: var(--white); text-align: left; padding-right: 5%; padding-left: 15%;}
.details .mainContent #wrapper .L a {color: var(--white); }
.details .mainContent #wrapper .L h2 {font-size: 3vmax; font-weight: 700; margin-bottom: 6%; display: inline-block; color: var(--white); }
.details .mainContent #wrapper .L h2 a {color: var(--white); }
.details .mainContent #wrapper .L h2 a:hover, a:focus {color: var(--darkBlue); text-decoration: none; }
.details .mainContent #wrapper .L .addressDet {width: 100%; height: 85px; padding-left: 17%; }
.details .mainContent #wrapper .L address {margin-bottom: 20px; padding-left: 7%; font-style: normal; font-size: .9em; width: 80%; float: left; color: #fff; text-align: left;}
.details .mainContent #wrapper .L i {float: left; font-size: 3em; color: #6ed0f7; }
.details .R {color: var(--darkBlue); padding: 0% 0 0 5%; }
.details .R h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; color: var(--darkBlue); display: inline-block; }
.details .R h2 a {color: var(--darkBlue); }
.details .R h2 a:hover, a:focus {color: var(--white); text-decoration: none; }
.details .R p {font-size: .9em; color: var(--darkBlue);}

.details .det2ndColmH {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; right: 0; bottom: 0;}
.details .det2ndColmH .points {width: 200px; height: 30px; position: absolute; bottom: 7%; z-index: 9999; left: -136px; }
.details .R .points a{width: 25px; height: 25px; background-color: #fff; float: left; margin-right: 25px; text-decoration: none; }
.details .R .detImgL:nth-child(1) {display: block; }
.details .R .detImgL:nth-child(2) {display: none; }
.details .R .detImgL:nth-child(3) {display: none; }
.details .R .detImgL img {transition: all 0.2s linear; opacity: 1; }
.details .R .detImgL i {position: absolute; left: 39%; top: 47%;font-size: 9em!important; text-shadow: 0px 0px 30px #000000; color: #c7c7c7 !important; transition: all 0.2s linear; opacity: 0; z-index: 10000; }
.details .R .detImgL:hover img {-webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: .7; }
.details .R .detImgL:hover i {-webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; }
.details .headContact span i {color: var(--white); }

.details .detPlus {position: absolute; position: absolute; left: 37%; top: 42%; z-index: 10000; opacity: 0 !important;}
.details .R .detImgL:hover .detPlus {opacity: 1 !important;}


/* TECH DETAILS PAGE */

.techDet {background-color: var(--lightBlue); }
.techDet .mainContent #wrapper h2 {color:var(--darkBlue); }
.techDet .mainContent #wrapper .L h2,p,i,a,span,div,small{color: var(--darkBlue); }
.techDet .mainContent #wrapper  {color:var(--darkBlue); }
.techDet .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; z-index: 1200; width: 100%; }
.techDet .mainContent #wrapper .L {color:var(--white); padding: 0% 1% 0 7%; }
.techDet .mainContent #wrapper .L p {font-size: 1.05em; color:var(--darkBlue); text-align: left; padding-right: 5%; padding-left: 15%; margin-bottom: 45px;}
.techDet .mainContent #wrapper .L a {color: var(--white); }
.techDet .mainContent #wrapper .L h2 {font-size: 3vmax; font-weight: 700; margin-bottom: 6%; display: inline-block; color: var(--darkBlue); }
.techDet .mainContent #wrapper .L h2 a {color: var(--white); }
.techDet .mainContent #wrapper .L .techBackButton {position: relative; left: 41% }
.techDet .mainContent #wrapper .L h2 a:hover, a:focus {color: var(--darkBlue); text-decoration: none; }
.techDet .mainContent #wrapper .L .addressDet {width: 100%; height: 50px; padding-left: 15%;  margin-bottom: 60px;}
.techDet .mainContent #wrapper .L .addressDet img {float:left; max-height: 50px}
.techDet .mainContent #wrapper .L address {margin-bottom: 20px; padding-left: 7%; font-style: normal; font-size: .9em; line-height: 50px; width: 61%; float: left; color: var(--darkBlue); text-align: left;}
.techDet .mainContent #wrapper .L address a {color: var(--darkBlue); normal; font-size: 1.1em;}
.techDet .mainContent #wrapper .L i {float: left; font-size: 3em; color: #6ed0f7; }
.techDet .R {color: var(--darkBlue); padding: 0% 0 0 5%; }
.techDet .R h2 {font-size: 5vmin; font-weight: 700; margin-bottom: 6%; color: var(--darkBlue); display: inline-block; }
.techDet .R h2 a {color: var(--darkBlue); }
.techDet .R h2 a:hover, a:focus {color: var(--white); text-decoration: none; }
.techDet .R p {font-size: .9em; color: var(--darkBlue);}

.techDet .det2ndColmH {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px); position: absolute; right: 0; bottom: 0;}
.techDet .det2ndColmH .points {width: 200px; height: 30px; position: absolute; bottom: 7%; z-index: 9999; left: -136px; }
.techDet .R .points a{width: 25px; height: 25px; background-color: #fff; float: left; margin-right: 25px; text-decoration: none; }
.techDet .R .detImgL:nth-child(1) {display: block; }
.techDet .R .detImgL:nth-child(2) {display: none; }
.techDet .R .detImgL:nth-child(3) {display: none; }
.techDet .R .detImgL img {transition: all 0.2s linear; opacity: 1; }
.techDet .R .detImgL i {position: absolute; left: 39%; top: 47%;font-size: 9em!important; text-shadow: 0px 0px 30px #000000; color: #c7c7c7 !important; transition: all 0.2s linear; opacity: 0; z-index: 10000; }
.techDet .R .detImgL:hover img {-webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: .7; }
.techDet .R .detImgL:hover i {-webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; }
.techDet .headContact span i {color: var(--white); }

.techDet .detPlus {position: absolute; position: absolute; left: 37%; top: 42%; z-index: 1000; opacity: 0 !important;}
.techDet .R .detImgL:hover .detPlus {opacity: 1 !important;}


.techDet .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid  var(--darkBlue);
    color:  var(--darkBlue);
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    width: 220px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
        float: right;
}

.techDet .morePos:hover {color: var(--lightBlue) !important; background-color: var(--darkBlue) !important;}
.techDet .moreNeg:hover {color: var(--lightBlue) !important; background-color: var(--darkBlue) !important;}


.techDet .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 20%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

/* TEAM DETAILS PAGE */

.teamDet .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px);}

.teamDet {background-color: var(--white); color: var(--kindaBlue); }
.teamDet .mainContent #wrapper .L h2,p,i,a,span,div,small{color: var(--kindaBlue); }
.teamDet .mainContent #wrapper .L h2{font-size: 3vmax; font-weight: 700; padding-left: 0; }
.teamDet .mainContent #wrapper .L h2 small{font-size: 0.5em; font-weight: 500; color: #275cab; float: right; top: 20px; position: relative;}
.teamDet .mainContent #wrapper .L p{ font-size: .95em; padding-left: 5%;}
.teamDet .mainContent #wrapper .L .morePos {width: 186px; border: 2px solid #275cab;}
.teamDet .mainContent #wrapper .contents.L  {padding: 4% 5px 0 11%; }
.teamDet .mainContent #wrapper .contents.R  {padding: 4% 0 0 0; }
.teamDet .mainContent #wrapper .wPiview img {max-width:100%; max-height:100%; width: auto; height: auto;}

.teamDet .headContact strong {color: var(--kindaBlue); }
.teamDet .headContact strong a {color: var(--kindaBlue); }
.teamDet #navigation-icon span {background-color: var(--kindaBlue); }




.teamDet .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    width: 182px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.teamDet .morePos:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}
.teamDet .moreNeg:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}


.teamDet .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

/* CONTACT PAGE */

.contact {background-color: #6ed0f7; }
.logoBack {-webkit-clip-path: polygon(55% 70%, 0% 0, 95% 0); clip-path: polygon(55% 70%, 0% 0, 95% 0); background-color: #fff; z-index: 0; position: absolute; width: 42%; height: 42%; top: 0; margin: 0 26%;}
.contact .mainContent #wrapper {text-align: center; padding-top: 10%;height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px);}
.contact .mainContent #wrapper h2 {color:var(--white) !important; text-transform: none; font-weight: 700; font-size: 3em; margin: 0 0 46px;}
.contact .mainContent #wrapper p {font-size: .9em !important; color: var(--darkBlue);}
.contact .mainContent #wrapper a {font-size: 1em !important; color: var(--darkBlue); text-decoration: underline;}
/*.contact .leftMini3Angle:after, .contact .rightMini3Angle:after {content: '';}*/
.contact .headContact span i {color: var(--white); }


/* SINGLE PAGE */

.other .mainContent {height: -webkit-calc(90% - 35px); height: -moz-calc(90% - 35px); height: calc(90% - 35px);}

.other {background-color: var(--white); color: var(--kindaBlue); }
.other .mainContent #wrapper .L h2,p,i,a,span,div,small{color: var(--kindaBlue); }
.other .mainContent #wrapper .L h2{font-size: 3vmax; font-weight: 700; padding-left: 55px; }
.other .mainContent #wrapper .L h2 small{font-size: 0.5em; font-weight: 300; margin-left: 93px; color: #275cab; }
.other .mainContent #wrapper .L p{ font-size: .85em; padding-left: 5%;}
.other .mainContent #wrapper .L .morePos {width: 186px; border: 2px solid #275cab;}
.other .mainContent #wrapper .contents.L  {padding: 4% 5px 0 11%; }
.other .mainContent #wrapper .wPiview img {max-width:100%; max-height:100%; width: auto; height: auto;}

.other .headContact strong {color: var(--kindaBlue); }
.other .headContact strong a {color: var(--kindaBlue); }
.other #navigation-icon span {background-color: var(--kindaBlue); }




.other .morePos {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(-35deg) skewY(0deg);
    border: 2px solid #fff;
    color: #fff;
    padding: 15px 35px;
    margin-top: 25px;
    position: absolute;
    width: 182px;
    height: 55px;
    -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.other .morePos:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}
.other .moreNeg:hover {color: #170c4e !important; background-color: #6ed0f7 !important;}


.other .moreNeg {
-moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
-ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(35deg) skewY(0deg);
position: absolute;
left: 24%;
font-size: 1.1em;
-webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

/* #######################################   3Angles - Shapes - Arrows -etc  ####################################### */

.left3angle {
/* -webkit-clip-path: polygon(0% -36%, 0% 176%, 57% 47%);
clip-path: polygon(0% -36%, 0% 176%, 57% 47%);*/
-webkit-clip-path: polygon(25.5% 0%, 56% 46%, 32% 100%, 0 47%, 0% 0%);
clip-path: polygon(25.5% 0%, 56% 46%, 32% 100%, 0 47%, 0% 0%);
background-color: rgba(39, 92, 172, 1);
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1100;
}

.right3Angle {
-webkit-clip-path: polygon(66% 0%, 100% 0%, 100% 100%, 92% 100%, 48% 34%);
clip-path: polygon(66% 0%, 100% 0%, 100% 100%, 92% 100%, 48% 34%);
background-color: rgba(110, 208, 247, 1);
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1100;
}

.CenterBottom3Angle {
-webkit-clip-path: polygon(56% 46%, 32% 100%, 92% 100%);
clip-path: polygon(56% 46%, 32% 100%, 92% 100%);
background: url('../images/bg/homeBottomBgBuilding.jpg');
background-position: center;
    background-size: contain;
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1101;
}

.leftMini3angle {
-webkit-clip-path: polygon(0 19%, 0 78%, 30% 42.5%);
clip-path: polygon(0 19%, 0 78%, 30% 42.5%);
background-color: rgba(23, 12, 78, 1);
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 9998;
  -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.leftMini3angle:hover{
  -webkit-clip-path: polygon(0 19%, 0 78%, 31% 42.5%);
clip-path: polygon(0 19%, 0 78%, 31% 42.5%);
}

.leftMini3Angle:after {
      content: '\2039';
    color: #6ed0f7;
    z-index: 9999;
    position: absolute;
    top: 34%;
    left: 10%;
    font-size: 7em;
      -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.leftMini3angle:hover:after {
    left: 8%;
    color: var(--lightBlue);
}



.rightMini3angle {
-webkit-clip-path: polygon(100% 8%, 100% 65%, 68.5% 43%);
clip-path: polygon(100% 8%, 100% 65%, 68.5% 43%);
background-color: rgba(23, 12, 78, 1);
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
z-index: 9998;
  -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.rightMini3angle:after {
      content: '\203A';
    z-index: 9999;
    position: absolute;
    top: 34%;
    right: 12%;
    font-size: 7em;
    color: #6ed0f7;
      -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}

.rightMini3angle:hover {
  -webkit-clip-path: polygon(100% 8%, 100% 65%, 67.5% 43%);
clip-path: polygon(100% 8%, 100% 65%, 67.5% 43%);
}

.rightMini3angle:hover:after {
  right:10%;
    color: var(--lightBlue);
  }

.detailBottom3Angle {
-webkit-clip-path: polygon(49% 0%, 100% 51%, 100% 100%, 0% 100%);
clip-path: polygon(49% 0%, 100% 51%, 100% 100%, 0% 100%);

background-color: rgba(23, 12, 78, 1);
position: absolute;
bottom: 0;
right: 0;
width: 117%;
height: 100%;
z-index: 9999;
  -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
        transition: all 0.1s linear;
}


/*
height: -webkit-calc(100% - 202px);
height: -moz-calc(100% - 202px);
height: calc(100% - 202px);
*/


/*  #################################  SOME FIXES  #####################################  */


/* LightBox X buton Fix */

.lb-number{position: relative; left: 0; top: 104px; display: none !important; }
.lb-close {position: relative; right: 0; top: 104px; z-index: 12; width: 0; height: 0; border-top: 100px solid #170c4e; border-left: 100px solid transparent; }
.lb-close:after {content: '\00d7'; top: -71px; position: absolute; right: 12px; font-size: 4em; color: #fff; font-weight: 600; }
.modal-body > p { margin-bottom: 20px; padding: 0px !important; color:#222; }
.modal { z-index: 90000; }
.modal-backdrop { z-index: 9990; }
.modal-content { border-radius: 0; }