@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/*
@font-face {
font-family: Graphik; src: url('../_src/Graphik-Regular.otf');
}
*/
@font-face {
font-family: MarrSans; src: url('../_src/MarrSansCondensed-Semibold.otf');
}

* { transition: transform 330ms ease-in-out; }

body, div, p {padding:0; margin: 0; font-family:'Quicksand', sans-serif; font-weight: 400;}
img {max-width: 100%; border: none;}
a {transition: color 1.5s ease-in-out; text-decoration: none;}
a:hover {transition: color 0.5s ease-in-out; text-decoration: none;}
.center {text-align: center;}
.container {padding:0; max-width:1180px; margin: 0 auto;}

.button {
    background: #0f4bef;
	color:#ccc;
	display:inline-block;/* or block */
	position:relative;
	text-decoration:none;
    padding:15px 25px;
    border-radius: 25px 0 0 25px;
    font-size: 11pt;
    margin-top:20px;
}

.button:after{
    background: #0f4bef;
    padding: 15px 25px 15px 0;
    border-radius: 0 25px 25px 0;
	content:'>';
    font-size: 11pt;
	position:absolute;
	top:0;
	right:-20px;
	border-color:inherit;
	transition:all 0.6s ease-in-out;
}
.button:hover:after{
	transform: translate(10px, 0); transition:all .3s ease-in-out;
}

#openSidebarMenu {z-index:191;}
.sidebarIconToggle {z-index:191;}

#Navigator {width: 1130px; max-width: 100%; height: 60px; position: relative; padding: 20px 0 0 20px; z-index: 11; }
#Navigator div {float:left;}
#Navigator div:last-child {margin:0 0 0 100px;}

.main_id {height:60px;}
.sub_id {filter: grayscale(100%) opacity(50%); transition: 1.5s ease-in-out; height:25px;}
.sub_id:hover {filter: grayscale(0%) opacity(100%); transition: 0.5s ease-in-out;}

.carousel {clear: both; float:none; position: relative; top:-90px;}


.overlay {position:absolute; z-index:101; transform: translateX(22%) translateY(68%); font-size:19pt; font-weight:500; line-height:20pt; z-index:1;}
.overlay img {margin: 0 0 30px 0;}
.overlay .button {margin: 30px 0 0 0;}
.overlay span {display: block; font-family: MarrSans; font-size: 120px; line-height: 100px; transform: translate(30px, 200px);}
.overlay-br {}
.splide {clear:left; margin:0 0 0 0; position: relative; top:-85px;}


.headbody {padding:40px 80px; font-size: 22px; color:#AAA;}
.headbody div {float:left;}
.headbody div:first-child {width:65%;}
.headbody div:last-child {width:35%; text-align: right;}
.headbody p {margin: 0 50px 20px 0;}
.headbody p:first-child {color:#727270; font-family: MarrSans; font-size: 32px;}

.ibody {padding:40px 80px; font-size: 22px; color:#AAA;}
.ibody p {margin: 0 0 20px 0;}
.bodyflowx img {padding:100px 80px 0 80px; max-width: 82%;}

.bodyflow {margin: 40px 0;}
.bodyflowx {clear: both; display: none;}
.bodyflowx img {padding:100px 80px 0 80px; max-width: 82%;}
.subfeat {padding:150px 80px 0 80px; font-size: 40px; color:#888; clear: both;}
.subfeat p:nth-child(1) {color:#727270; font-family: MarrSans; font-size: 48px; line-height: 42px; padding: 0 0 20px 0;}

.tmp-main {padding:0 80px 100px 80px;}
.tmp-main img {max-width: 345px; margin: 0 0 1px 0;}

.subtemp {clear:both; padding:80px; font-size: 22px; color:#AAA; background-image: url('../_media/tmp_main00b.jpg'); background-repeat: no-repeat; background-position: top right;}
.subtemp img {max-height: 400px; border-radius: 10px;}
.subtemp p {margin: 0 0 15px 0;}
.subtemp p:first-child {color:#727270; font-family: MarrSans; font-size: 32px; margin: 100px 0 20px 0;}
.subtemp p:nth-child(2) {padding: 0 560px 0 0;}

.footerbar {clear:both; margin: 100px 0 20px 0;}
.footerbar a {font-family: MarrSans, graphik, arial, sans-serif; font-size: 12pt; color:#444; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; margin: 0 20px 0 0;}
.footerbar a:hover {color:#1754fb;}
.footerbar a:last-child {margin: 0;}

.footertwin {clear:both; margin: 0 0 80px 0;}
.footertwin a {font-family: MarrSans, graphik, arial, sans-serif; font-size: 9pt; color:#666; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; margin: 0 20px 0 0; }
.footertwin a:hover {color:#1754fb;}
.footertwin a:last-child {margin: 0;}

.footersocial {margin: 25px 0 25px 0;}
.footersocial a {font-family: MarrSans, graphik, arial, sans-serif; font-size: 9pt; color:#BBB; text-transform: uppercase; text-decoration: none; letter-spacing: 0.5px; margin: 0 15px 0 0; }
.footersocial a:hover {color:#555;}
.footersocial a:last-child {margin: 0;}

.footnote {color:#aaa; font-size: 7pt; font-weight:400; margin: 0 0 40px 0;}

input {font-size: 18px; color:#ccc; border:none; background: none; padding: 10px; width:90%; margin: 0 0 10px 0; border: dotted 1px #ccc; border-radius: 10px; }
input:last-child {margin: 0;}

.Logpanel {width:330px; height:320px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.Logpanel img {max-width: 280px; margin: 30px 0 0 0;}
.Logpanel-top {width:300px; background: linear-gradient(180deg, #fff 0%, #efefef 100%); color:#888; border-radius:10px 10px 0 0; border:dotted 1px #ccc; padding:15px; line-height: 28px;}
.Logpanel-bot {width:300px; background:#003bde; border-radius: 0 0 10px 10px; border:solid 1px #003bde; padding:15px;}
.Logpanel-bot button {width: 48%;}


/* INTERNALS */

.ptitle { clear:both; width:100%; color:#727270; font-family: MarrSans; font-size: 32px; text-align: center; margin: 40px 0 20px 0;}


/* /// INDEPENDENT FIXTURES */



/* /// INDEPENDENT HERE ON */

/* ShootWiz Bar */

.ShootwizBar {
  overflow: hidden;
}

.ShootwizBar a {
  float: left;
  display: block;
  color: #555;
    font-weight: 500;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
  font-size: 15px;
}
.ShootwizBar a:last-child {padding: 14px 0 14px 12px;;}
.ShootwizBar a:hover {
    color:#003bde;
}
.ShootwizBar a span {display: none;}

.ShootwizBar a.active {
  color: #000;
}

.ShootwizBar .icon {
  display: none;
  font-size: 22px;
}

@media screen and (max-width: 600px) {
  .ShootwizBar a:not(:first-child) {display: none;} /* a:not(:first-child) */
  .ShootwizBar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .ShootwizBar.responsive {position: relative;}
  .ShootwizBar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .ShootwizBar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .ShootwizBar.responsive a span {display: contents;}
}


/* CADD : Side Bar */

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.mainInner div{
    display:table-cell;
    vertical-align: middle;
    font-size: 3em;
    letter-spacing: 1.25px;
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 225px;
    transform: translateX(250px);
    transition: transform 250ms ease-in-out;
    background: linear-gradient(180deg, #fff 0%, #efefef 100%);
    z-index: 19;
}
.sidebarMenuInner{
    margin:0;
    padding:100px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.01);
}
.sidebarMenuInner li{
    list-style: none;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.sidebarMenuInner li span{
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    color: #555;
    font-size: 11pt;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: color 1.5s ease-in-out;
}
.sidebarMenuInner li a:hover{
    color: #003bde;
    transition: color 0.5s ease-in-out;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 35px;
    right: 15px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #999;
    z-index: 1001;
    display: none;
}
@media (min-width:320px) and (max-width: 479px) {
    .spinner {display:block;}
    .ShootwizBar {display: none;}
    #sidebarMenu {width: 100%;
    transform: translateX(100%);
        transition: transform 250ms ease-in-out;}
    }
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    z-index: 1001;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
    z-index: 1001;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}    


/* /// MQUERIES */

@media (min-width:320px) and (max-width: 479px) {
    body {max-width: 100%;}
    .container {padding:0; width: 100%;}
    #Navigator {width:80%;}
    .globalnav {width: 100%;}
    .ShootwizBar {position: fixed; right:15px; top: 30px; width: 100%; z-index: 90;}
    .ShootwizBar a {background: #fff;}
    .ShootwizBar a:first-child {background: none; padding:30px;}
    .ShootwizBar.responsive {position: fixed; right:15px; top: 30px; z-index: 90; width:97%;}
    .ShootwizBar.responsive a {float: none; display: block; text-align: left;}
    .ShootwizBar .icon {background: none; padding:0 20px 0 0;}
    /*
    .carousel-cell div {font-size:18px;}
    .carousel-cell:nth-child(1) div {position:relative; left:25px; top:230px;}
    .carousel-cell:nth-child(1) div img {width: 280px; filter:invert(1); }
    .carousel-cell:nth-child(1) div p {margin:50px 0; color:#fff;}
    
    .carousel {margin: 100px 0 0 0;}
    .flickity-page-dots {text-align: center; bottom: -40px;}
    */

    .overlay {position: absolute; transform: translate(10%, 80%); font-size: 14pt;}
    .overlay span {font-size: 48px; line-height: 40px; transform: translate(30px, 160px);}
    .overlay img {max-height: 80px; margin: 0 0 20px 0;}
    .splide {margin: 80px 0 0 0;}
    .headbody {padding:0 40px;}
    .headbody div:first-child {width:100%;}
    .headbody div:last-child {width:100%;}
    .headbody p {margin-right: 0;}

    .ibody {padding:40px; font-size: 22px; color:#AAA;}
    .bodyflow {margin: 100px 0 50px 0;}
    .subfeat {padding:50px 40px; font-size: 22px;}
    .subfeat p:first-child {font-size: 32px;}
    .tmp-main {padding:0 0 100px 0;}
    .tmp-main img {max-width: 100%; margin: 0 0 1px 0;}
    
    .subtemp {padding:0 40px 80px 40px; background: none;}
    .subtemp p:nth-child(2) {padding: 0;}
    
    .footerbar a {display: block; letter-spacing: 0.5px; margin: 0 0 12px 0;}
    .sub_id {height:40px;}
    .footersocial a {letter-spacing: 0; margin: 0 5px 0 0;}
    .footersocial a:first-child {display: none;}
}
@media (min-width:480px) and (max-width: 600px) {
    .overlay {position: absolute; transform: translate(10%, 115%); font-size: 16pt;}
    .overlay img {max-height: 110px;}
    .overlay span {font-size: 80px; line-height: 70px; transform: translate(40px, 160px);}
    .splide {margin: 50px 0 0 0;}
    .spinner {display:block;}
    .ShootwizBar {display: none;}
    .headbody {padding:40px;}
    .headbody p {margin-right: 0;}
    .headbody div:first-child {width:100%;}
    .headbody div:last-child {width:100%; text-align: center;}
    .ibody {padding:40px 60px;}
    .bodyflow {margin: 80px 0 50px 0;}
    .bodyflowx {display: none;}
    .subfeat {padding:40px 40px;}
    
    .subtemp {padding:40px 40px 80px 40px; background: none;}
    .subtemp p:nth-child(2) {padding: 0;}
    
    .footerbar a {display: block; letter-spacing: 0.5px; margin: 0 0 12px 0;}
}
@media (min-width: 601px) and (max-width: 768px) {
    .overlay {position: absolute; transform: translate(18%, 155%);}
    .overlay span {transform: translate(20px, 120px);}
    .overlay img {max-height: 110px;}
    .splide {margin: 40px 0 0 0;}
    .spinner {display:block;}
    .ShootwizBar {display: none;}
    .headbody p {margin-right: 0;}
    .headbody div:first-child {width:100%;}
    .headbody div:last-child {display: none;}
    .bodyflowx {display: block;}
    
    .subtemp {padding:80px; background: none;}
    .subtemp p:nth-child(2) {padding: 0;}
    
    .footerbar a {display: block; letter-spacing: 0.5px; margin: 0 0 12px 0;}
}
@media (min-width: 769px) and (max-width: 991px) {
    .overlay {transform: translate(18%, 35%);}
    .overlay span {transform: translate(35px, 100px);}
    .overlay img {max-height: 110px;}
    .spinner {display:block; right:0; top:0;}
    .ShootwizBar {display: none;}
    .headbody p {margin-right: 0;}
    .headbody {padding: 0 80px;}
    .headbody div:first-child {width:100%;}
    .headbody div:last-child {display: none;}
    .bodyflowx {display: block;}
    .subtemp p:nth-child(2) {padding: 0 300px 0 0;}
}
@media (min-width: 992px) and (max-width: 1199px) {
    .overlay {transform: translate(18%, 40%);}
    .overlay img {max-height: 180px;}
    .spinner {display:block;}
    .ShootwizBar {display: none;}
    .headbody {padding: 0 80px;}
    .headbody div:first-child {width:60%;}
    .headbody div:last-child {width:40%;}
}
@media (min-width: 1200px) {
    .sidebarIconToggle {display: none;}
}