@font-face {
  font-family: 'Gotham-Light';
  src: url('../fonts/Gotham-Light.eot');
  src: url('../fonts/Gotham-Light.woff2') format('woff2'),
       url('../fonts/Gotham-Light.woff') format('woff'),
       url('../fonts/Gotham-Light.otf') format('opentype'),
       url('../fonts/Gotham-Light.ttf') format('truetype'),
       url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg'),
       url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Book';
  src: url('../fonts/Gotham-Book.eot');
  src: url('../fonts/Gotham-Book.otf') format('opentype'),
       url('../fonts/Gotham-Book.ttf') format('truetype'),
       url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/Gotham-Bold.eot');
  src: url('../fonts/Gotham-Bold.woff2') format('woff2'),
       url('../fonts/Gotham-Bold.woff') format('woff'),
       url('../fonts/Gotham-Bold.otf') format('opentype'),
       url('../fonts/Gotham-Bold.ttf') format('truetype'),
       url('../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg'),
       url('../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Black';
  src: url('../fonts/Gotham-Black.eot');
  src: url('../fonts/Gotham-Black.woff2') format('woff2'),
       url('../fonts/Gotham-Black.woff') format('woff'),
       url('../fonts/Gotham-Black.otf') format('opentype'),
       url('../fonts/Gotham-Black.ttf') format('truetype'),
       url('../fonts/Gotham-Black.svg#Gotham-Black') format('svg'),
       url('../fonts/Gotham-Black.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

/* CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	font-family: 'Gotham-Light';
}

.gothamBook{
    font-family: 'Gotham-Book';
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Global */
h1{
	font-family: 'Gotham-Black';
}
h2{
	font-family: 'Gotham-Bold';
	font-size: 20px;
}
.content{
	width: 1140px;
	margin:0 auto;
	padding: 0 15px;
}
.button{
	font-family: 'Gotham-Bold';
	display:inline-block;
	border-color: none;
	border-radius:30px;
	text-align: center;
	background: #9dce45;
	padding: 0 64px;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFF;
	font-size: 12px;
	line-height: 60px;
	letter-spacing: 1px;
}
.button:hover{
    animation: activeBtn 0.3s both;
    /*box-shadow:0px 0px 0px 2px #28aae1 inset;
    background: #031162;
    color: #28aae1;*/
}
a{
	color: #24aede;
	text-decoration: none;
}
/* Header */
header{
	min-width: 1170px;
	min-height: 1024px;
	background: url('../images/hero_bg.jpg') no-repeat;
	background-color: #031162;
	background-size: cover;
	background-origin: top;
	background-attachment: fixed;
}
nav {
    display: block;
    min-width: 1170px;
    border-bottom:1px dotted #7d8ab8;
    height: 85px;
}
.logo, .mainmenu{
	float: left;
}
.logo{
	width: 20%;
	margin-top: 10px;
}
.logo a{
	width: 166px;
	height: 99px;
	background: url('../images/podorca_logo.png') no-repeat;
	display: block;
}

/* ********Added NEW TOP MENU************* */

.topmenu {
    float:right;
    clear: none;
    width: 50%;
    display: block;
    margin-top: 10px;
    text-align: right;
    /*border: 1px solid yellow;*/
}

.topmenu ul li{
	display: inline-block;
}
.topmenu ul li a{
	font-family: 'Gotham-Bold';
	color:#41B1BD;
	text-transform: uppercase;
	font-size: 10px;
	text-decoration: none;
	height: 16px;
	margin-left: 26px;
	display: block;
}
.topmenu ul li a:hover{
	color:#9dce45;
	/*border-bottom: 1px solid #9dce45;*/
}

.topmenu .active{
	color:#9dce45;
	/*border-bottom: 1px solid #9dce45;*/
}

/* ***** /END NEW TOP MENU ******* */

.mainmenu{
	width: 80%;
	display: block;
	text-align: right;
	margin-top: 30px;
    /*border-bottom:1px dotted silver;*/
}
.mainmenu ul li{
	display: inline-block;
}
.mainmenu ul li a{
	font-family: 'Gotham-Bold';
	color:#FFF;
	text-transform: uppercase;
	font-size: 15px;
	text-decoration: none;
	height: 22px;
	margin-left: 26px;
	display: block;
}
.mainmenu ul li a:hover{
	color:#9dce45;
	border-bottom: 2px solid #9dce45;
}

.mainmenu .active{
	color:#9dce45;
	border-bottom: 2px solid #9dce45;
}

.hero-content{
	clear: both;
	text-align: center;
	padding-top: 116px;
}
.hero-content h1{
	font-size: 66px;
	color: #28aae1;
	text-align: center;
	text-transform: uppercase;
	line-height: 56px;
	letter-spacing: 2px;
}
.hero-content h2{
	font-size: 26px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	line-height: 50px;
	letter-spacing: 2px;
}
.hero-content .button{
	margin-top: 52px;
}
.hero-content .scroll-mouse{
	margin-top: 261px;
}

/*Popups*/
.terms{
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: .64s ease-in-out;
}

.closepopup {
  position: absolute;
  right: -1rem;
  top: -1rem;
  width: 3rem;
  height: 3rem;
  font-size: .875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: #47BDFF;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

.terms:target {
  visibility: visible;
  opacity: 1;
}

.terms a {
	text-decoration: none;
	color:  #47BDFF;
}


/* Content */
content h1{
	font-family: 'Gotham-Black';
	font-size: 38px;
	color: #000;
	text-align: center;
	line-height: 0px;
	line-height: 1em;
	letter-spacing: 1px;
}
.border{
	display: block;
    background: #bfc0c4;
    width: 30px;
    height: 5px;
    margin:24px auto 71px auto;

    border-radius: 5px;
}

/*Box elements*/
.pBox{
    border: 1px solid gray;
    padding: 15px;
    text-align: center;
    min-height: 80px;
    /*font-weight:500;*/
}

.col-box{
	width: 25%;
    padding:0px 15px;
    height:200px;
    text-align: center;
	display:table-cell;
}

img.I {

	height: auto;
	margin: auto;
	padding-top: 2rem;
    filter: grayscale(100%);
    transition: width 0.1s, height 0.1s, transform 0.5s;
}

.col-box:hover img.I{
    transform: rotate(15deg) scale(1.1, 1.1);
    -ms-transform: rotate(15deg) scale(1.1, 1.1);
    -webkit-transform: rotate(15deg) scale(1.1, 1.1);
    /*filter: contrast(0);*/
    filter: grayscale(0%); /*drop-shadow(8px 8px 5px rgba(0,0,0,0.10));*/
    }

.col-box:hover h2{
    color: #28aae1;
    }

.col-box:hover p.pBox{
    -webkit-box-shadow: 0px 3px 1rem -3px rgba(0,0,0,0.25); 
    box-shadow: 0px 2px 1rem -3px rgba(0,0,0,0.25);
}
    
.row{
	margin-bottom: 57px;
}

.col-left, .col-right{
	width: 570px;
	display:table-cell;
}
.col-left{
	padding-right: 50px;
}
.col-right{
	padding-left: 50px;
}
.col-full{
	width: 100%;
}
.row-end{
	margin-bottom: 0px;
}
.col-full a:hover{
    text-decoration: underline;
}

.techconsult, .services, .smartcity, .partnerships, .clients, .careers, .about, .contact{
	padding: 120px 0;
	min-width: 1170px;
}

/* Tech Consult */
.techconsult{
	background: #fff;
    text-align: center;
}
.techconsult p{
	font-size: 14px;
	color: #000;
	line-height: 21px;
	margin-top: 13px;
}

/* Services */
.services{
	background: #f0f0f0;
    text-align: center;
}
.services p{
	font-size: 14px;
	color: #000;
	line-height: 21px;
	margin-top: 13px;
}

/* Smart City */
.smartcity{
    background: url('../images/smartcity2.jpg') no-repeat;
	background-color:#333;
	background-size: cover;
	background-origin: top;
	background-attachment: fixed;
    background-blend-mode:multiply;
    text-align: center;
    color: #fff;
}

/*
.smartcity:hover{
    animation-play-state: paused;
}

@keyframes myTrans {
  from {background-blend-mode: multiply;}
  to {background-blend-mode: multiply;}
}
*/

.smartcity p{
	font-size: 14px;
	line-height: 21px;
	margin-top: 13px;
}

.smartcity p, .smartcity h1{
    color: #fff;
}

.smartcity img.SC{
    border-radius: 15px;
    border: 2px solid #999;
    transition: width 0.1s, height 0.1s, transform 0.2s;
}

.col-left .SC:hover {
    border-radius: 15px;
    border: 2px solid #fff;
    transform:translateY(-10px);
    -webkit-box-shadow: 0px 3px 1rem white; 
    box-shadow: 0px 2px 1rem white;
    filter: saturate(2);
}

.smartcity .col-right:hover img.SC {
    border-radius: 15px;
    border: 2px solid #fff;
    transform:translateY(-10px);
    -webkit-box-shadow: 0px 0px 1rem white; 
    box-shadow: 0px 0px 1rem white;
    filter: saturate(1.5);
}


/* Clients and Partnerships */
.partnerships{
	background: #9dce453d;
    text-align: center;
}

.partnerships img, .clients img{
    max-width: 80%;
    transition: width 0.1s, height 0.1s, transform 0.3s;
}

.clients img{
    max-width: 50%;
    max-height: 95px;
}


.clients .list ul li, .partnerships .list ul li{
	width: 270px;
	height: 180px;
	text-align: center;
	display: inline-block;
	margin:5px;
	padding: 0;
	vertical-align: middle;
    background-color: #fff;
    border-radius: 15px;
}
.clients .list ul li img, .partnerships  .list ul li img {
    display: inline-block;
    vertical-align: middle;
    filter: grayscale(100%);
}
.clients .list ul li:before, .partnerships .list ul li:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.clients .list ul li:hover{
    background-color: #f3f3f3; /*#9dce45;*/
}

.partnerships .list ul li:hover img{
    background-color: white; /*#9dce45;*/
    filter: grayscale(0);
    transform:scale(1.1);
}

.clients .list ul li:hover img{
    filter: grayscale(0);
    transform:scale(1.1);
}

/* Careers */
.careers{
	/*background: url('../images/careers2.jpg') no-repeat;*/
	background-color: #333;
	background-size: cover;
	background-origin: top;
	background-attachment: fixed;
    text-align: center;
    min-height: 200px;
}

.careers h1, .careers p, .careers h2{
	color: #FFF;
}

/* About Us */
.about{
	background: url('../images/about_bg.jpg') no-repeat;
	background-color: #031162;
	background-size: cover;
	background-origin: top;
	background-attachment: fixed;
    text-align: center;
}
.about h1, .about p, .about h2{
	color: #FFF;
}
.about h2{
	font-size: 28px;
}
.about .border{
	opacity:0.5;
}
.about p{
	font-size: 20px;
	line-height: 21px;
	margin-top: 13px;
}
.about .col-left{
	width: 530px;
}
.about .col-right{
	width: 610px;
}

/* Contact Us */
.contact{
	min-height: 690px;
    background: #fff;
}
.contact p{
	font-size: 18px;
	color:#333;
	margin-top:13px;
}
.contact form{
	margin-top: 20px;
}
.contact img.C /*.map*/ {
	width: 556px;
	height: 552px;
	float: left;
	margin-right: 125px;
}

.contact .flexBox{
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-around;
    width: 100%;
}
.contact .flexBox>div{
    width: 45%;
    border: 0px solid gray;
}

.contact address {
    display: block;
    text-align: center;
	width: 100%;
	height: 200px;
	float: left;
    clear: left;
	margin-right: 125px;
    margin-bottom: 1rem;
    border-radius: 15px;
    font-style: normal;
}

.contact .form-left {
    display: block;
    text-align: center;
	width: 40%;
	float: left;
    clear: left;
    font-style: normal;
}

address h2{
    color: #fff;
    margin: 0;
    padding: 1rem 1rem;
    background-color: rgba(157, 206, 69, 0.8);
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 18px;
}

address p{
    color: #333;
    margin: 2rem;
    padding: 2rem 0.5rem 0.5rem;
    font-size: 16px;
    /*font-weight: 600;
    background-color: rgba(255, 255, 255, 0.6);*/
}

address p.left{
    width: 37%;
    float:left;
    clear: none;
    /*font-weight: 500;*/
}
address p.right{
    width: 30%;
    float:right;
    clear: none;
    /*font-weight: 500;*/
}

.address1 {
    display: block;
    background: url('../images/singapore.jpg') -10px -50px no-repeat;
	background-color: #28aae1 /*#031162*/;
	background-size:auto;
	background-origin: top;
    background-blend-mode:screen;
}
.address2 {
    display: block;
    background: url('../images/sealink.jpg') -50px -90px no-repeat;
	background-color: #28aae1 /*#031162*/;
	background-size:auto;
	background-origin: top;
    background-blend-mode:screen;
}
.address3 {
    display: block;
    background: url('../images/usa.jpg') -60px -30px no-repeat;
	background-color: #28aae1 /*#031162*/;
	background-size:auto;
	background-origin: top;
    background-blend-mode:screen;
}

.contact .input{
	width: 437px;
	height: 58px;
	padding-left: 20px;
	font-size: 14px;
	color: #000;
	background: #dbdbdd;
	
	margin-bottom: 20px;

	border:none;
	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	
	outline: none;
    
    font-family: 'Gotham-Light';
}
.contact .textarea{
	padding-top: 20px;
	height: 100px;
    font-family: 'Gotham-Light';
}
.contact .send{
	border:none;
	outline: none;
	height: 40px;
	line-height: 0px;
	cursor: pointer;
	margin-top: -4px;
	padding-left: 0;
	padding-right: 0;
	width: 120px;
}
.bigText{
    font-size: 20px;
    color: black;
}
hr{
	margin:30px 0;
	opacity: 0.2;
}
/* Footer */
footer{
	min-width: 1170px;
	background: #031162;
}
footer .content{
	color: #FFF;
	font-size: 12px;
	text-align: center;
	line-height: 60px;
}

/* normal content link*/

.careers a:hover, .contact a:hover{
	text-decoration: underline;
}
footer .content a:hover{
    text-decoration: underline;
    color: #9dce45;
}

/* Back to Top */
.btop{
	font-family: 'Gotham-Bold';
	font-size: 12px;
	width: 60px;
	height: 60px;
	color:#FFF;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	line-height: 60px;
	display: block;
	position: fixed;
	right: 30px;
	bottom:30px;

	-webkit-border-radius:30px;
	border-radius:30px;

	display: none;
}
.blue{
	animation: greenToBlue 0.5s both;
}
.green{
	animation: blueToGreen 0.5s both;
}

@keyframes blueToGreen {
    0%   {background-color: #031162;}
    100% {background-color: #9dce45;}
}
@keyframes greenToBlue {
    0%   {background-color: #9dce45;}
    100% {background-color: #031162;}
}
@keyframes activeBtn {
    0%   {background-color: #9dce45;}
    100% {background-color: #28aae1;}
}