/* BIOGRA START */

.bg-image,
.bg-video {
    z-index: -1
}

.bg-image,
.bg-image>div,
.bg-video,
.bg-video>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: 50% 50%
}

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


}

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


}

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


}

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


}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    16% {
       opacity: 0;
    }
    84% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
}

.downtohello {
	font-size:25px;
	-webkit-animation: fadeInOut 36s;
    animation: fadeInOut 3s;
	color: #bdbdbd;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s;
}

.downtohello:hover { 
	color:#555555;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s;
}

/* 

==========================================================================
Homepage
========================================================================== 

*/

.backtotop { 
	text-align:center; 
	padding:0px 0 0 0; 
}

.backtotop a { 
	background:url(./img/icon.svg) center center no-repeat;
	background-size:auto 40%; 
	height:auto;
	padding:50px 0 0 0;
	float:left;
	width:100%;
	opacity:0.9;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s;
	color: #b5b5b5; 
}

.backtotop a:hover { 
    opacity:1;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 
}

.biogra-logo {
	background: url(./img/Biogra-Simple-2.svg) center center no-repeat;
	background-size:contain;
	padding:20vh 0 0 0;
	width:100%;
	height:30vh;
	text-indent:-2000px;
	overflow:hidden;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  
	.biogra-logo {
		background: url(./img/Biogra-Simple-2.svg) center center no-repeat;
		background-size:contain;
		position:relative;
		top:-60px;
	}

}

.homepageheader {
	transition: transform .2s, visibility .2s, background-color .3s;
}

.homepageheader2 {
	background:#313133;	
	transition: transform .2s, visibility .2s, background-color .3s;
	color:#fff;
}

header {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	padding: 5px 0 7px 0;
	color:#fff;
}

.homepageheader .container .col-50 a {
	color:#505050;
	font-size:14px;
	width:100%;
	float:left;
	text-align:center;
}

.homepageheader2 .container .col-50 a {
	color:#828287;
  	font-size:14px;
  	width:100%;
  	text-align:center;
  	float:left;
}

@media (min-width:768px) {
		
	.header-left a {
		color:#505050;
		font-size:14px;
		text-align:left !important;
	}

	.homepageheader .container .text-right a {
		font-size:14px;
		text-align:right !important;
	}

	.homepageheader2 .container .text-right a {
		color:#828287;
		font-size:14px;
		text-align:right !important;
	}
	
}

.homepageheader .container .col-50 a,
.homepageheader2 .container .col-50 a
 {
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.homepageheader .container .col-50 a:hover,
.homepageheader2 .container .col-50 a:hover
 {
	color:#ffffff;
  	font-size:14px;
	-webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

#hp-white h4 {
 color:#ffa900;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 font-size:30px;
 padding:0 0 30px 0;
}

#hp-photo1 {
    background:url(./img/oil-refining.jpg) center center no-repeat;
	background-size: cover;
    height:600px;
    float: left;
    width: 100%;
}

#hp-video-oil {
  
    height:600px;
    float: left;
    width: 100%;
}

#hp-photo-port {
    background:url(./img/ship.jpg) center center no-repeat;
	background-size: cover;
    height:70vh;
    float: left;
    width: 100%;
}

#hp-photo-mill {
    background:url(./img/mill.jpg) center center no-repeat;
	background-size: cover;
    height:70vh;
    float: left;
    width: 100%;
}

#hp-oil-drop2 {
    background:url(./img/hp-oil-drop2.jpg) center center no-repeat;
	background-size: cover;
    height:90vh;
    float: left;
    width: 100%;
}

#hp-oil-drop3 {
    background:url(./img/hp-gold-oil.jpg) center center no-repeat;
	background-size: cover;
    height:60vh;
    float: left;
    width: 100%;
}

#hp-photo-tanker {
    background:url(./img/hp-photo-tanker.jpg) center center no-repeat;
	background-size: cover;
    height:70vh;
    float: left;
    width: 100%;
}

#hp-white-2 h5 { font-weight:600; }

a.iscc {
	background: url(./img/iscc.png) center center no-repeat;
    background-size: contain;
    padding: 0vh 0 0 0;
    width: 100%;
    height: 100px;
    text-indent: -2000px;
    overflow: hidden;
	margin: 0 0 30px 0;
	display:block;
	transition: transform .2s, visibility .2s, background-color .3s, opacity .3s;
}

a.iscc:hover {
	transition: transform .2s, visibility .2s, background-color .3s, opacity .3s;
	opacity:0.4;
}

.grey-quote h4  {
	color: #fff;
 	font-family: 'Lato', sans-serif;
 	font-weight: 300;
    font-size:30px;
    line-height: 60px;
    margin: 0 0 40px 0;
}

@media (min-width:768px) {

	.grey-quote h4  {
		
	}

}

@media (min-width:1025px) {

	.grey-quote h4  {

	}

}

#hp-grey-one {
    padding: 60px 0;
    float: left;
    width: 100%;
}

#hp-white-2,
#section-prodcuts-we-trade {
    background-color: #fff;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: #656668;
}


@media (min-width:768px) {

	#hp-white-2 ,
	#section-prodcuts-we-trade {
	    padding: 100px 0;
	}

}


#hp-white-2 p,
#section-prodcuts-we-trade p {
	font-size:16px;
	color:#656668;
	padding:0 0 20px 0;
}

#hp-white-2 a,
#section-prodcuts-we-trade a {
	color: #333;
}

#hp-white-2 h4,
#section-prodcuts-we-trade h4 {
	font-size:30px;
 	font-family: 'Lato', sans-serif;
 	font-weight: 300;
	padding:0 0 30px 0;
	color:#C60;
}

#grey-footer h4 {
	font-size:30px;
 	font-family: 'Lato', sans-serif;
 	font-weight: 300;
	padding:0 0 30px 0;
	color:#C60;
}

#hp-grey-one {
	background-size: cover;
    padding: 60px 0;
    float: left;
    width: 100%;
}

#hp-grey-one:hover .worldmap {
 opacity: 1;
}

@media (min-width:576px) {

	#hp-grey-one {
		padding: 100px 0;
	}
	
}

#hp-white {
    background-color: #fff;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: red;
}

#hp-white p {
	line-height:27px;
	font-size:15px;
	color:#656668;
	padding:0 30px 20px 30px;
}

@media (min-width:576px) {
		
	#hp-white p {
		padding:0 0 20px 0;
	}
	
}

.worldmap {
	background:url(./img/map1.png) center center no-repeat;
	background-size:contain; 
	height:200px;
	margin:30px 0 0 0;
	float:left;
	width:100%;
	opacity:0.5;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 
}

.worldmap2 {
	background:url(./img/biogra-map4.svg) center center no-repeat;
	background-size:contain; 
	height:200px;
	margin:30px 0 0 0;
	float:left;
	width:100%;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 
}

.worldmap3 {
	background:url(./img/biogra-map6.svg) center center no-repeat;
	background-size:contain; 
	height:200px;
	margin:30px 0 0 0;
	float:left;
	width:100%;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 
}

@media (min-width:576px) {
		
	.worldmap, .worldmap2, .worldmap3 {
		height:398px;
	}
	
}

/* ==========================================================================
Waypoints
========================================================================== */
.worldmap, 
.titlefade, 
.wow,
.wow2,
.wow3,
.wow4,
.wow5
{
    visibility: hidden
}
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
    visibility: visible
}
.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.delay-15s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

#lowervideo {
	padding-top: 0;
	min-height: 600px;
	height: 70vh;
	float:left;
	width:100%;
	background:url(./img/oil-refining.jpg) 0 0 no-repeat;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.maketable2 {
	padding-top: 0;
    min-height: 600px;
    height: 70vh;
    position: relative;
    display: block;
    text-align: center;
    overflow: hidden;
    z-index: 0;

}


/* Style the tab */
.tab {
    float: left;
    /*border: 1px solid #ccc;*/
    background-color: #f1f1f1;
    width: 30%;
}

@media only screen 
and (max-device-width : 667px) 
and (orientation : portrait) { 

	.tab button {
		font-size:10px;
		margin:0 20px 0 0;
		float:left;
	}

	.tabcontent {
		font-size:10px;
	}

	.tabcontent p {
		font-size:12px !important;
		
	}

}


/* Style the buttons that are used to open the tab content */
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 30px;
    /*border: 1px solid #ccc;*/
    width: 70%;
    border-left: none;
}

.producttabs div:nth-child(3),
.producttabs div:nth-child(4),
.producttabs div:nth-child(5),
.producttabs div:nth-child(6),
.producttabs div:nth-child(7),
.producttabs div:nth-child(8)
{
	display:none;
}

.producttabs {
	border: 1px solid #ccc;
	float:left;
	width:100%;
}

.product-table {
	background:#efefef;
}

.product-table td {
    padding: 5px;
}

.table-blank { 
	background:#fff;
}







#homepagevideo {
	padding-top: 0;
	min-height: 700px;
	height: 100vh;
	float:left;
	width:100%;
	/*background:url(./img/ship-grey.jpg) 0 0 no-repeat;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;*/
	background:#fff;
}


#homepagevideo.thanks {
	min-height: 70px;
}

#homepagevideo h3 { 
	font-size: 36px;
    padding: 8vh 0 0 0;
 	font-family: 'Lato', sans-serif;
 	font-weight: 900;
}

@media (min-width:576px) {
	
	#homepagevideo h3 { 
		padding: 0 0 0 0;
	}
	
	.mobileonly { display:none; }

}

@media (min-width:768px) {
	
	#homepagevideo h3 { 
		font-size: 56px;
		
	}
	
}

	
.whitey { color:#fff !important; }

#homepagevideo h4 { 
	font-size:28px;
	color:#ef3c3c;     
	padding: 50px 0 0 0;
	float:left;
	font-family: 'Lato', sans-serif;
 	font-weight: 000;
}

#homepagevideo h5, #homepagevideo a
 { 
	font-size:18px;
	text-align:center !important;
	width:100% !important;
	color:#ef3c3c;     
	padding: 20px 0 0 0;
	float:left;
	font-family: 'Lato', sans-serif;
 	font-weight: 000;
}

.maketable.thanks {
	
	min-height: 100px !important;
	
}

.makebox.thanks {
	min-height: 70px;
}

.hplink {
	font-size:16px;
	margin: 20px 0 0 0;
	padding:10px 15px;
	font-family: 'Lato', sans-serif;
 	font-weight: 900;
	border:2px solid red;
	float:left;
	width:100%;
	transition: transform .2s, visibility .2s, background-color .3s;
    background: url(../img/claret-right-arrow.svg) center right no-repeat;
    background-position: right 15px center;
}

.hplink:hover {
	transition: transform .2s, visibility .2s, background-color .3s;
    background: red url(../img/claret-right-arrow-white.svg) center right no-repeat;
    background-position: right 15px center;  
}


@media (min-width:576px) {
	
	.hplink {
		margin: 0 auto !important;
		padding:10px 40px 10px 15px;
		font-family: 'Lato-Black';
		border:2px solid red;
		display: inline-block;
		width:auto;
		float:none;
		margin-bottom:20px !important;
		margin-right:40px;
		margin-left:10px !important;
        background: url("../img/claret-right-arrow.svg") center right no-repeat;
        background-position: right 15px center;

	}

    .hplink:hover {
 	    
 	    background: red url("../img/claret-right-arrow-white.svg") center right no-repeat;
        background-position: right 15px center;

	    transition: transform .2s, visibility .2s, background-color .3s;
    }
	
	#homepagevideo h4 { 
	
	    padding: 26vh 0 0 0;
		float:none;

	}

	
}

@media (min-width:768px) {
	
	.hplink {
		
	}
	
}

#whiteblock {
	padding-top: 0;
	min-height: 700px;
	height: 100vh;
	float:left;
	width:100%;
	background:#fff;
}

#firstblock {
    background:#fff;
	float:left;
}

h2 { 
	margin-top: 20px !important;
	margin-right: 20px;
    width: 125px;
    height: 42px;
    background: url(../img/logo-light.svg) center right no-repeat;
    text-indent: -500px;
    overflow: hidden;
    margin: 0 auto;
    background-size: contain;
    margin-bottom:5px !important;
	float:right;
}

h2 a {
    display: inline-block;
    float: left;
    box-sizing: border-box;
}

.verticalwow
{
	display: table-cell;
	vertical-align: middle;
	padding: 60px 0;	
}

@media (min-width:576px) {
    
	h2 { 
		margin-top: 25px !important;
		background: url(../img/logo-light.svg) center center no-repeat;
		background-size: contain;
		float:none;

	}
	
}

@media (min-width:768px) {
	h2 { 
		margin-top: 30px !important;
		-webkit-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.4) );
        -ms-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.4) );
        -o-filter: drop-shadow( 1px 1px 1px rgba(0,0,0,0.4) );
        filter: drop-shadow( 2px 2px 1px rgba(0,0,0,0.1) );
	}
}

.col-33.header-left { width:50%; float:left; }
.col-33.header-right { width:50%; float:right; padding-right: 20px; }
.col-33.header-hide { display:none; }

@media (min-width:576px) {
	.col-33.header-left { width:33.3%; float:left; }
	.col-33.header-right { width:33.3%; float:left; padding-right:0; }
	.col-33.header-hide { width:33.3%; display:inline; }
}

.header-social { float: right; margin-top:20px !important }

@media (min-width:768px) {
	
	.header-social { margin-top:30px !important }

}

.header-social li { float: left; }
.header-social li a { 
	padding:0px 10px; 
	color:#333; 
	margin:0 5px 0 0;
	text-indent:-300px;
	overflow:hidden;
	height:30px; 
	width:30px;
	float:left;
}

.header-social li:hover {
    background: url(../img/claret-arrow.svg) bottom right no-repeat;
    background-size: 50% 50%;
}

.header-social li:nth-child(1) a { 
	background: url(../img/t.svg) center center no-repeat;
	background-size: contain;
}

.header-social li:nth-child(2) a { 
	background: url(../img/f.svg) center center no-repeat;
	background-size: contain;
}

.header-social li:nth-child(3) a { 
	background: url(../img/in.svg) center center no-repeat;
	background-size: contain;
}

.header-social li:nth-child(4) a { 
	background: url(../img/insta.svg) center center no-repeat;
	background-size: contain;
}

.maketable {
	padding-top: 0;
    min-height: 700px;
    height: 100vh;
    position: relative;
    display: block;
    text-align: center;
    overflow: hidden;
    z-index: 0;

}

.makebox {
	height: 100%;
    min-height: 700px;
    display: table;
    width: 100%;

}

.makecell {
	display: table-cell;
    vertical-align: middle;
    padding: 60px 0;

}

.bg-image-overlay {
	background-color: rgba(12, 12, 12, 0.4);	
}

/*
------
HOMEPAGE GREY BOX
------
*/

.hp-recruiting h4  {
	
	color:#681416;
	font-family: 'Lato', sans-serif;
 	font-weight: 900;
	font-size: 30px;

}

.hp-recruiting ul  {

  padding: 15px 0 0 0;
  
}

.hp-recruiting ul li {

  padding: 0 0 10px 0;
  
}

.hp-recruiting ul li a {
    font-size: 22px;
    font-family: 'Lato', sans-serif;
 	font-weight: 900;
}

.hp-recruiting ul li a:hover {
    color:#ff5b5b;
}

.hp-recruiting ul li:last-child {

  padding: 0 0 0 0;
  
}


/* 
-------

HP WHITE 1

-------
*/



#hp-white .col-50:first-child h4 {
	width:100%;
	float:left;
	background: url(../img/claret-arrow.svg) 60px 10px no-repeat;
}

#hp-white .col-50:last-child h4 {
	color:#681416;
	width:100%;
	float:left;
	padding: 0 0 20px 0;
	background: url(../img/claret-arrow.svg) 100px 10px no-repeat;
}

.hp-policy p {
    color: #ec1e24 !important;
    font-family: 'Lato', sans-serif;
 	font-weight: 900;
    font-size: 28px !important;
    line-height: 70px !important;
    padding: 0;
    margin: 0;
    border-bottom: none;
}

#hp-white .col-50:first-child {
    padding: 0 0 60px 0;
}

@media (min-width:576px) {

	#hp-white {
		padding: 100px 0;
	}
	
}

@media (min-width:768px) {
	
	#hp-white p {
		width:85%;
	}
	
	#hp-white .col-50:first-child {
		padding: 0 0 0 0;
	}
	
	.hp-policy p {
    	font-size: 38px !important;
    }
	
}


/* 
-------

SUB PAGE STANDARD CODE

-------
*/

#sub-white {
    background-color: #fff;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: #646668;
}

#sub-white h4 {
    font-size:30px;
    padding-bottom:30px;
    color:#7c0000;
    font-family: 'Lato', sans-serif;
 	font-weight: 900;
    line-height:48px;
}

#sub-white h3 {
    font-size:18px;
    padding-bottom:15px;
    color:#cc1218;
    font-family: 'Lato', sans-serif;
 	font-weight: 900;
    line-height:48px;
}

#sub-white p {
    line-height:28px;
    padding:0 0 20px 0;
}

#sub-white a {
    color:#333;
}

#sub-white a:hover {
    color:#cc1218;
}

.makebox-subpage {
    min-height: 500px;
    display: table;
    width: 100%;
}

.maketable-subpage {
	padding-top: 0;
    min-height: 500px;
    position: relative;
    display: block;
    text-align: left;
    overflow: hidden;
    z-index: 0;
}

.makecell-subpage {
	display: table-cell;
	vertical-align: bottom;
	padding: 60px 0;
}

#subpageimagebg h3 {
    font-size: 35px;
    line-height: 50px;
    margin-bottom: 0;
	font-family: 'Lato', sans-serif;
 	font-weight: 900;
}

@media (min-width:576px) {
	
	#subpageimagebg h3 {
		width: 65%;
		font-size: 40px;
		line-height: 70px;
		margin-bottom: 20px;
	}
	
}

@media (min-width:768px) {
	
	#sub-white p {
		width:75%;
	}
	
}

/* 
-------

ABOUT: PAGE SPECIFIC CODE

-------
*/

#aboutimage {
	background:url(../img/header-about.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

/* 
-------

REQUEST CALL: PAGE SPECIFIC CODE

-------
*/

#requestimage {
	background:url(../img/header-request.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

/* 
-------

JOB ALERTS: PAGE SPECIFIC CODE

-------
*/

#alertimage {
	background:url(../img/header-alerts.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

.checkme ul, .checkme ul li {
  width:100%;
  float:left;
}

.checkme {
  padding:0px 0 20px 0;
  width:100%;
  float:left;
}
.checkme li {
  padding:20px 0 0 0;
  width:100%;
  float:left;
}

.checkme label { 
width:90% !important; 
float:left !important;
display:block;
box-sizing:border-box;
}

.checkme input { 
width:10% !important; 
margin:3px 0 0 0 !important;
float:left;
}


/* 
-------

CLIENT: PAGE SPECIFIC CODE

-------
*/

#clientimage {
	background:url(../img/header-client.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}


#client-grey-one {
    background:url(../img/header-profession-bw.jpg) center center no-repeat;
	background-size: cover;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: red;
}

.client-quote h4  {
	
	color: #fff;
    font-family: 'Lato', sans-serif;
 	font-weight: 900;
    font-size: 38px;
    line-height: 60px;
    padding:40px 0;
    margin:40px 0;

}

@media (min-width:768px) {
	
	.clientcontact {
	  width:75%;
	} 
	
}

/* 
-------

CANDIDATE: PAGE SPECIFIC CODE

-------
*/

#candidateimage {
	background:url(../img/header-about-old.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}
/*
.sidequote {
    font-size:16px;
    padding-bottom:15px;
    color:#7c0000;
    font-family: 'apercuregular';
    line-height:48px !important;
    border-top:1px solid #d4d4d4;
    border-bottom:1px solid #d4d4d4;
    padding:60px 40px 50px 40px !important;
    background:#f3f3f3;
    margin-bottom:40px;
    display: inline-block;
}
*/

.sidequote {
    font-size: 14px;
    padding-bottom: 15px;
    color: #7c0000;
    line-height: 30px !important;
	padding-top: 60px !important;
    margin-bottom: 40px;
    display: inline-block;
    width: 100% !important;
}

@media (min-width:768px) {
	
	.sidequote {
		
		padding-top: 0px !important;
		
	}
	
}

.sidequote span {
	color:#272727;
	width:100%;
	float:left;
	text-align:right !important;
	padding:20px 0 0 0 !important;
}

#candidate-grey-one {
    background:url(../img/header-joblist.jpg) center center no-repeat;
	background-size: cover;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: red;
}

.candidate-quote h4  {
	
	color: #fff;
    font-size: 38px;
    line-height: 60px;
    padding:40px 0;
    margin:40px 0;

}

.claretlist {
	letter-spacing: normal;
}

.claretlist li {
    line-height: 26px;
    padding: 0 0 0px 0;
    margin-bottom: .2em;
    letter-spacing: normal;
    text-indent: 20px;
    list-style-type: none;
    background: url(../img/claret-right-arrow-dark.svg) 0px 8px no-repeat;
}

.claretlist ul {
	list-style: disc inside none;
	padding-bottom:20px;
}

/* 
-------

CONTACT: PAGE SPECIFIC CODE

-------
*/

#contactimage {
	background:url(../img/header-contact.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

/* 
-------

Profession Landing Page: PAGE SPECIFIC CODE

-------
*/

.isophone {
	background:url(../img/iso-phone-3.png) 20px center no-repeat;
	border:3px solid #d1d1d1;
	float:left;
	padding:20px 20px 20px 120px;
	margin:10px 0 20px 0;
	letter-spacing:0;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s, background .3s;

}

.isocallback {
	background:url(../img/iso-phone-4.png) 20px center no-repeat;
	border:3px solid #d1d1d1;
	float:left;
	padding:20px 20px 20px 120px;
	margin:10px 0 20px 0 !important;
	letter-spacing:0;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s, background .3s;

}

@media (min-width:768px) {
	
	.isophone { 
		width: 75%;
		margin: 10px 0 0px 0;
	}
	.isocallback { 
		width: 75%;
		margin: 10px 0 0px 0;
	}
	
}

.isophone:hover {
    background: #f2f2f2 url(../img/iso-phone-2.png) 20px center no-repeat;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s, background .3s;
}

.isocallback:hover {
    background: #f2f2f2 url(../img/iso-phone-5.png) 20px center no-repeat;
	transition: transform .2s, visibility .2s, background-color .3s, color .3s, background .3s;
}

.isophone span, .isocallback span  {
  font-style:italic;
  color:#eb1d23;
}

#professionimage {
	background:url(../img/header-profession.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

#professionimage-asset-management { background:url(../img/header-profession.jpg) 0 0 no-repeat; }
#professionimage-broking { background:url(../img/header-profession-broking.jpg) 0 0 no-repeat; }
#professionimage-fin-tech { background:url(../img/header-profession-fin-tech.jpg) 0 0 no-repeat; }
#professionimage-hedge-funds { background:url(../img/header-profession-hedge-funds.jpg) 0 0 no-repeat; }
#professionimage-investment-banking { background:url(../img/header-profession-investment-banking.jpg) 0 0 no-repeat; }
#professionimage-wealth-management { background:url(../img/header-profession-wealth-management.jpg) 0 0 no-repeat; }

#professionimage-asset-management,
#professionimage-broking,
#professionimage-fin-tech,
#professionimage-hedge-funds,
#professionimage-investment-banking,
#professionimage-wealth-management
{
	background-size: cover;
    background-position: 50% 50%;
}

#professionimagebw {
	background:url(../img/header-profession-bw.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

.profession-buttons a {
	font-size:14px;
	margin: 20px 0 0 0;
	padding:10px 15px;
	border:2px solid red;
	float:left;
	width:100%;
	background: url(../img/claret-right-arrow.svg) center right no-repeat;
	background-position: right 15px center;
	transition: transform .2s, visibility .2s, background-color .3s;
}

.profession-buttons a:hover {
 	background:red;
	transition: transform .2s, visibility .2s, background-color .3s;
}

.profession-buttons.darkness a {
	color:#555;
}

.profession-buttons.darkness a:hover {
 	background: #555 url(../img/claret-right-arrow.svg) center right no-repeat;
 	color:#fff !important;
 	border:2px solid #555;
 	background-position: right 15px center;
	transition: transform .2s, visibility .2s, background-color .3s;
}

.profession-2 h4 {
	padding:0 0 10px 0 !important;
	
}

.profession-list li {
	color:#666;
	padding-bottom: 15px;
	float:left;
	width:100%;
		
}

.profession-list li a:hover {
	color:red;
		
}

.profession-2 h4 {
	
	
}

.profession-list li a {
	color:#3b3a3c !important;
		
}

.profession-list li a:hover {
	color:#db4739 !important;
		
}

.profession-grey-quote h4  {
	
	color: #fff;
    font-family: 'Lato-Black';
    font-size: 38px;
    line-height: 60px;
    padding: 0 0 0px 0;
    margin: 0 0 0px 0;

}

.profession-testimonial h4  {
	color: #fff;
    font-family: 'Lato-Black';
    font-size: 22px;
    line-height: 31px;
    padding: 0 0 0px 0;
    margin: 0 0 0px 0;
    letter-spacing: 0;
}

.profession-testimonial h5  {
	color: #272727;
    font-family: 'Lato-Black';
    font-size: 17px;
    line-height: 31px;
    padding: 0 0 0px 0;
    margin: 0 0 0px 0;
    letter-spacing: 0;
	float: right;
}

/* LATEST JOBS BOX */

.latest-positions li {
  width:100%;
  border-bottom: 1px dotted #a6a6a6;
  padding:5px 0 5px 0;
  background: url(../img/claret-right-arrow.svg) center right no-repeat;
}

.latest-positions li:hover {
  border-bottom: 1px dotted red;
}

.latest-positions li div a {
	padding:5px 0;
	float:left;
}

.latest-positions li div:nth-child(1) a {
  color:#3b3a3c;
  width:100%;
}

.latest-positions li div:nth-child(2) a {
  color:red;
  width:100%;
}

.latest-positions li {
  color:#3b3a3c; 
  float:left;
}

.latest-positions li:hover div a  {
	color:#731d12 !important;
}

.livejobsearch {
	background:#ebecef;
	padding:20px;
	margin: 0 0 20px 0;
}

.livejobsearch p {
	background:#ebecef;
	padding:0 !important;
}

.livejobsearch input {
  width:250px;
  padding:5px;
  color: #600;
  letter-spacing: 0;
}

.profession-view-all-jobs {
		color:#7c0000;
		margin: 0 auto !important;
		padding:10px 40px 10px 15px;
		font-family: 'Lato-Black';
		border:2px solid red;
		display: inline-block;
		width:auto;
		float:none;
		letter-spacing:0;
		margin-top:20px !important;
		margin-right:0px;
		margin-left:0px !important;
        background: url("../img/claret-right-arrow.svg") center right no-repeat;
        background-position: right 15px center;
		transition: transform .2s, visibility .2s, background-color .3s;
}

.profession-buttons a:hover {
 	    background: red url("../img/claret-right-arrow-white.svg") center right no-repeat;
        background-position: right 15px center;
	    transition: transform .2s, visibility .2s, background-color .3s;
 }

@media (min-width:576px) {
	
	.latest-positions li div:nth-child(1) a {
	  color:#3b3a3c;
	  width:80%;
	}
	
	.latest-positions li div:nth-child(2) a {
	  color:red;
	  width:80%;
	}
	
	.profession-view-all-jobs {
		color:#7c0000;
		margin: 0 auto !important;
		padding:10px 40px 10px 15px;
		font-family: 'Lato-Black';
		border:2px solid red;
		display: inline-block;
		width:auto;
		float:none;
		margin-top:20px !important;
		margin-right:0px;
		margin-left:0px !important;
        background: url("../img/claret-right-arrow.svg") center right no-repeat;
        background-position: right 15px center;
		transition: transform .2s, visibility .2s, background-color .3s;
	}
	
	.profession-view-all-jobs:hover {
 	    background: red url("../img/claret-right-arrow-white.svg") center right no-repeat;
        background-position: right 15px center;
		color:#fff !important;
	    transition: transform .2s, visibility .2s, background-color .3s;
    }
	
	.profession-buttons a {
		margin: 0 auto !important;
		padding:10px 40px 10px 15px;
		font-family: 'Lato-Black';
		border:2px solid red;
		display: inline-block;
		width:100%;
		float:none;
		margin-bottom:20px !important;
		margin-right:40px;
		margin-left:0px !important;
		background: url("../img/claret-right-arrow.svg") center right no-repeat;
		background-position: right 15px center;
	}

	.profession-buttons a:first-child {
			
		margin-left:0px !important;
			
	}

    .profession-buttons a:hover {
 	    background: red url("../img/claret-right-arrow-white.svg") center right no-repeat;
        background-position: right 15px center;
	    transition: transform .2s, visibility .2s, background-color .3s;
    }
	
	.livejobsearch input {
	  margin:0 0 0 10px;
      width:200px;
    }
	
}


@media (min-width:768px) {
	
	.latest-positions li div:nth-child(1) a {
	  color:#3b3a3c;
	  width:70%;
	  padding-right:10px;
	}
	
	.latest-positions li div:nth-child(2) a {
	  color:red;
	  width:22%;
	  overflow:hidden;
	}

	.livejobsearch input {
      width:180px;
    }
	
	.profession-buttons a {
		font-size:16px;
		margin: 0 auto !important;
		padding:10px 40px 10px 15px;
		font-family: 'Lato-Black';
		border:2px solid red;
		display: inline-block;
		width:100%;
		float:none;
		margin-bottom:20px !important;
		margin-right:40px;
		margin-left:0px !important;
		background: url("../img/claret-right-arrow.svg") center right no-repeat;
		background-position: right 15px center;
	}
	
}

@media (min-width:992px) {
	
	.livejobsearch input {
      width:350px;
    }
	
	.profession-buttons a {
		width:auto;
		float:left;
		margin-bottom:20px !important;
		margin-right:20px !important;
		margin-left:0px !important;
	}
}

@media (min-width:1200px) {
	
	.livejobsearch input {
      width:490px;
    }
	
}

/* 
-------

Joblist Page: PAGE SPECIFIC CODE

-------
*/

#joblistimage {
	background:url(../img/header-joblist.jpg) 0 0 no-repeat;
	background-size: cover;
    background-position: 50% 50%;
}

.joblist-buttons a {
	color: #b5b5b5;
	background: url(../img/claret-left-arrow-grey.svg) center left no-repeat;
	padding-left: 20px;
	font-size: 14px;
}

.joblist-buttons a:hover {
  color:#fff;
}

.joblist-1 h4 {
	font-size: 16px !important;
	font-family: 'apercubold' !important;
}

.lefthandjobnav {
    width:100%;
    background:#fdecec;		
    float:left;
    font-size:14px;
    padding:20px;
    margin:0 20px 20px 0;
    box-sizing:border-box;
    color:red;
    background: #fdecec url("../img/claret-right-arrow.svg") center right no-repeat;
    background-position: right 20px center;

}

.lefthandjobnav:hover {
     background-position: right 15px center;
     color:#7c0000;
}

.joblistbuttons {
	float:left;width: 100%;
}

@media (min-width:768px) {
	
	.joblistbuttons {

	}
	
	.lefthandjobnav {
		width:80%;
		float:left;
		padding:20px;
		margin:0 20px 20px 0;
		box-sizing:border-box;
		background-position: right 12px center;
	}

}

@media (min-width:991px) {

  .lefthandjobnav {    
      background-position: right 20px center;
  }

}

@media (min-width:1500px) {

  .lefthandjobnav {
		width:70%;

  }
}


/* 
-------

Single Job Page: PAGE SPECIFIC CODE

-------
*/

.jobcontent {
	letter-spacing: normal;
}

.jobcontent li {
    line-height: 26px;
    padding: 0 0 0px 0;
    margin-bottom: .2em;
    font-family: 'apercuregular';
    letter-spacing: normal;
    text-indent: 20px;
    list-style-type: none;
    background: url(../img/claret-right-arrow-dark.svg) 0px 8px no-repeat;
}

.jobcontent ul {
	list-style: disc inside none;
	padding-bottom:20px;
}

.jobdata li {
	border-bottom: 1px dotted #c0c0c0;
    font-family: 'apercuregular';
    letter-spacing: normal;
    padding:0 0 10px 0;
    margin:0 0 10px 0;
}

.jobdata {
    padding:0 0 10px 0;
}

.jobdata li a { color:#555 !important; }

#apply-claret label {
    width:100%;
    float:left;
    line-height: 20px;
    padding: 0 0 3px 0;
    margin-bottom: .2em;
    font-family: 'apercuregular';
    letter-spacing: normal;
    text-indent: 0px;
}

#apply-claret input {
    width:100%;
    float:left;
    line-height: 20px;
    padding: 5px;
    margin-bottom:15px;
    font-family: 'apercuregular';
    letter-spacing: normal;
    color:Red;
    background-image: none;
	background: #f9f9f9;
    border: 0.0625rem solid #e0e0e5;
    border-radius: 0.25rem;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
    height:auto !important;
}

#apply-claret select {
    padding: 5px !important;
    margin-bottom:15px;
    font-family: 'apercuregular';
    letter-spacing: normal;
    color:Red;
    border: 0.0625rem solid #e0e0e5;
    border-radius: 0.25rem;
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
    height:auto !important;
}

input.error { border:1px solid red !important; }
textarea.error { border:1px solid red !important; }

#applybutton {
	background-color: #c0c0c0 !important;
	padding: 10px 0 !important;
	border:1px solid #8d8d8d !important;
	transition: transform .2s, visibility .2s, background-color .3s;
}


#applybutton:hover {
	background:#8d8d8d !important;
	border:1px solid #8d8d8d !important;
	transition: transform .2s, visibility .2s, background-color .3s;
	color:#fff;
}

.recaptcha {
    float:left;
}


/* 
-------

All Jobs Page: PAGE SPECIFIC CODE

-------
*/

#filters {
    width:100%;
    background:#fdecec;		
    float:left;
    font-size:12px;
    padding:20px;
    margin:20px 20px 20px 0;
    box-sizing:border-box;
    color:red;
    background: #fdecec;
}

#filters li a {
	color:red;	
	margin: 10px 0;
	border-bottom: 1px dotted #fff;
	float:left;
	padding:0 0 5px 0;
	width:100%;
}

#filters li a.selected {
	color:#7c0000;
}

#filters li a:hover {
	border-bottom: 1px dotted #7c0000;
}

@media (min-width:768px) {

  #filters {
	width:80%;
	float:left;
	padding:20px;
	margin:20px 20px 0 0;
	box-sizing:border-box;
  }

}

/* 
-------

Small Sub Page: PAGE SPECIFIC CODE

-------
*/

#sub-small-white {
    background-color: #fff;
    padding: 60px 0;
    float: left;
    width: 100%;
    color: #646668;
}

#sub-small-white h4 {
    font-size:30px;
    padding-bottom:10px;
    color:#7c0000;
    font-family: 'Lato-Black';
    line-height:48px;
}

#sub-small-white p {
    line-height:28px;
    padding:0 0 20px 0;
}

.makebox-joblistpage {
    min-height: 350px;
    display: table;
    width: 100%;
}

.maketable-joblistpage {
	padding-top: 0;
    min-height: 350px;
    position: relative;
    display: block;
    text-align: left;
    overflow: hidden;
    z-index: 0;
}

.makecell-joblistpage {
	display: table-cell;
	vertical-align: bottom;
	padding: 60px 0;
}

#smallpageimagebg h3 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
	font-family: 'Lato-Black';
}


@media (min-width:576px) {
	
	#smallpageimagebg h3 {
		width: 65%;
		font-size: 40px;
		line-height: 60px;
		margin-bottom: 20px;
	}
	
}


/* 
-------

FOOTER

-------
*/

.bybold {
	color:#646668;	
}

.bybold:hover {
	color:#969696;	
}

#grey-footer {
    background-color: #fff;
    padding: 40px 0 40px 0;
    float: left;
    width: 100%;
    color: #646668;
}


#grey-hard-footer {
    background-color: #444444;
    padding: 40px 0 40px 0;
    float: left;
    width: 100%;
    color: #a2a2a2;
}

#grey-footer p {
	font-size:16px
}

#grey-footer .col-50:nth-child(1) 
{
  padding:0 0 40px 0  
}

#grey-footer ul li a {
	font-size:16px;
	color:#646668;	
	transition: transform .2s, visibility .2s, background-color .3s, color .5s;
}

#grey-footer .col-25:nth-child(3) a {
  color:#898c8e !important;
}

#grey-footer ul li a:hover {
	color:#a0a4a7;	
	transition: transform .2s, visibility .2s, background-color .3s, color .2s;
}

#grey-footer .col-25:nth-child(3) a:hover {
  color:#fff !important;
}

#grey-footer .col-25 ul li { padding:0 0 10px 0; }

.footer-social { padding:40px 0 0 0; }

.footer-social li { float: left; }

.footer-social li a { 
	padding:0px 10px; 
	color:#333; 
	margin:0 20px 0 0;
	text-indent:-300px;
	overflow:hidden;
	height:30px; 
	width:30px;
	float:left;
	border:1px solid #333;
	box-sizing:border-box;
	transition: transform .2s, visibility .2s, background-color .3s;
}

.footerlogo {
	width: 90px !important;
    background: url(../img/logo-light.svg) center right no-repeat;
    text-indent: -500px;
    overflow: hidden;
    margin: 0 auto;
    background-size: contain;
	border:none !important;
}

.footer-social li:nth-child(2) a { 
	background: url(../img/t.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(3) a { 
	background: url(../img/f.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(4) a { 
	background: url(../img/in.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(5) a { 
	background: url(../img/insta.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(2) a:hover { 
	background:#333 url(../img/t.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(3) a:hover { 
	background:#333 url(../img/f.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(4) a:hover { 
	background:#333 url(../img/in.svg) center center no-repeat;
	background-size: contain;
}

.footer-social li:nth-child(5) a:hover { 
	background:#333 url(../img/insta.svg) center center no-repeat;
	background-size: contain;
}

#grey-footer .col-50:nth-child(5) 
{
  display:none;  
}

@media (min-width:768px) {

	#grey-footer .col-50:nth-child(5) 
	{
		display:inline;  
	}
	
	#grey-footer {
		padding: 100px 0;
	}
	
	#grey-footer ul li a {
		font-size:14px;
	}
	#grey-footer p {
		font-size:14px
	}

}

@media (min-width:1025px) {

	#grey-footer ul li a {
		font-size:16px;
	}
	#grey-footer p {
		font-size:16px
	}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.trans, .trans li a {
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 	
}

.trans:hover,  .trans li a:hover {
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s; 	
}

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

@font-face {
    font-family: 'Lato-Black';
    src: url('../fonts/apercu_bold-webfont.eot');
    src: url('../fonts/apercu_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/apercu_bold-webfont.woff') format('woff'),
         url('../fonts/apercu_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercu_lightregular';
    src: url('../fonts/apercu_light-webfont.eot');
    src: url('../fonts/apercu_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/apercu_light-webfont.woff') format('woff'),
         url('../fonts/apercu_light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercu_mediumregular';
    src: url('../fonts/apercu_medium-webfont.eot');
    src: url('../fonts/apercu_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/apercu_medium-webfont.woff') format('woff'),
         url('../fonts/apercu_medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'apercuregular';
    src: url('../fonts/apercu_regular-webfont.eot');
    src: url('../fonts/apercu_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/apercu_regular-webfont.woff') format('woff'),
         url('../fonts/apercu_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #dd001e;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.jarallax {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* line 3, clingify.scss */
.js-clingify-ztransform, .js-clingify-wrapper {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Baseline selectors */
/* line 10, clingify.scss */
.js-clingify-wrapper {
  /*width: 100%;*/
}

/* line 14, clingify.scss */
.js-clingify-locked {
  /*left: 0;*/
  position: fixed;
  top: 120px;
  z-index: 99999;
  width: 20%;
}


#grey-footer ul { float:left; width:100%; }
#grey-footer ul li { float:left; width:90%; margin: 0 5% 20px 5%; }
#grey-footer ul li label { 
	float:left; 
	width:100%; 
	font-weight: 400; 
	color: #011734 !important; 
	font-size: 16px; 
	line-height: 22px; 
	padding-bottom:5px;
}
#grey-footer ul li input,
#grey-footer ul li textarea { 
	float:left; 
	width:100%;
	background-color:#efefef; 
	border:1px solid #bdbdbd;
	padding:8px;
	color:#6f6f6f;
}
#grey-footer ul li input[type='text'], 
#grey-footer ul li textarea
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#applysubmit { 
	background:#555 !important;
	color:#fff !important;
	border:1px solid #555 !important;
	transition: transform .2s, visibility .2s, background-color .3s;
}

#applysubmit:hover { 
	background:#777 !important;
	color:#fff !important;
	border:1px solid #555 !important;
	transition: transform .2s, visibility .2s, background-color .3s;
}

@media (min-width:576px) {
	

	#grey-footer ul { float:left; width:100%; }
	#grey-footer ul li { float:left; width:60%; margin: 0 20% 20px 20%; }
	
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%);
  }

  100% {
    -moz-transform: translateY(0);
  }
}

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-100%);
  }

  100% {
    -o-transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown;
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-100%);
  }
}
@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
  }

  100% {
    -moz-transform: translateY(-100%);
  }
}
@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0);
  }

  100% {
    -o-transform: translateY(-100%);
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp;
}


header, nav {display:block}

.hidden{display:none !important;
   visibility:hidden}

.visually-hidden{
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px
}

.visually-hidden.focusable:active,.visually-hidden.focusable:focus{
	clip:auto;
	height:auto;
	margin:0;
	overflow:visible;
	position:static;
	width:auto
}

.invisible { visibility:hidden }

.clearfix{*zoom:1}

.clearfix:before,.clearfix:after{
	content:" ";
   display:table;
   }

.clearfix:after {clear:both}

.animated{-webkit-animation-duration:.5s;
   -moz-animation-duration:.5s;
   -o-animation-duration:.5s;
   animation-duration:.5s;
   -webkit-animation-fill-mode:both;
   -moz-animation-fill-mode:both;
   -o-animation-fill-mode:both;
   animation-fill-mode:both;
   will-change:transform,opacity}

.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.headroom {
	background: rgba(255, 255, 255, 0.95);
	position: fixed;
	top: 0;
	-webkit-transition: top 0.35s;
	transition: top 0.35s;
	-webkit-box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
	-moz-box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
	box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
}


.headroom-hidden {
  top: -160px;
}

.nav li a {
	font-size:14px;
	color:#929292;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s;    
}

.nav li a:hover {
	color:#fb7802;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s;    
}


@media (min-width:576px) {

	.nav li a {
		font-size:16px;
		color:#929292;   
	}

}

.nav li {
	display:inline-block;
	width:100%;
	text-align:center; 
	padding:5px 20px;
}

@media (min-width:576px) {

	.nav li {
		width:auto;
		display:inline-block;
		text-align:center; 
		padding:20px 20px;
	}

}

.nav {
	width:100%; 
	text-align:center; 
	float:left;
}

#section-prodcuts-we-trade h5 {
	font-size:18px;
	padding: 0 0 20px 0;
	color: #C60;
}

.productlist {
	padding:0 0 20px 0;

}

.productlist li {
	width:100%;
	padding:0 0 5px 0;

}

.asterixdesign {
    font-style: italic;
    margin: 15px 0 0 0;
    opacity: 0.5;
}

.homepagescroll {
	background: #791c1c url(./img/downarrow.svg) center 20px no-repeat;
    color: #ffffff !important;
    background-size: 15px auto;
    position: relative;
    bottom: 70px;
    -webkit-transition: top 0.35s;
    transition: top 0.35s;
    -webkit-box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
    -moz-box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
    box-shadow: 0px 2px 12px -4px rgba(0,0,0,0.54);
    height: 70px;
    text-transform: uppercase;
    font-size: 13px !important;
    padding: 40px 0 0 0 !important;
}

.g-recaptcha div { width:auto !important; }


#submitbutton { 
    background:rgb(150, 0, 0) !important; color:#fff !important; border:none !important;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s;   
}

#submitbutton:hover { 
    background:rgb(209, 0, 0) !important; 
    color:#fff !important; border:none !important;
	-webkit-transition:all 0.2s linear;	
	-moz-transition:all 0.2s linear;	
	-ms-transition:all 0.2s linear;	
	-o-transition:all 0.2s; 
	transition: all 0.2s;   
}

.cert {
    width:100px; 
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.1));
    margin-bottom:40px;
    cursor:pointer;
    transition: all 0.5s;
}

.cert:hover {
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,.3));
    cursor:pointer;
    transition: all 0.5s;
}

.rightpadding {

	margin-right:30px;

}

.textDisclaimer { font-size:13px; color:#7e7e7e; }