html, body{
  	font-family: 'Roboto', 'Helvetica Neue', sans-serif;
    font-size: 19px;
  	-webkit-font-smoothing: antialiased;
    color: #bfbfbf;
    background: black;
}

body { margin: 0 0 -19px 0; }

body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	color: #e0e0e0;
    font-weight: 700;
}
body a:visited { color: #bbbbbb; }
body a:active,
body a:hover { color: white; }

span.strike { text-decoration: line-through; }

p {
    margin: 0 0 1.45em 0;
    line-height: 1.45;
}

h2, h3, h4 {
	font-weight: 300;
	text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2em 0 1em;
    /*color: white;*/
}
h2 { font-size: 1.15em; }
h3 { font-size: 1.15em; }
h4 { font-size: 0.9em; }

.inline-subhead { font-weight: 700; }

.page-container-outer.odd {
    width: 100%;
}
.page-container {
    display: flex;
    padding: 0;
    max-width: 1920px;
    margin: 0 auto;
}
    
.page-container.odd,
.page-container-outer.odd {
    background: #212121;
}

.page-container.even
.page-container-outer.even {
    background: black;
}

.button a {
    font-size: .8em;
    background: white;
    color: black;
    border-radius: 4px;
    text-decoration: none;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    font-weight: 500;
    padding: .5em 1.0em;
    text-align: right;    
}

.left { float: left; }
.right { float: right; }
 
.side-text {
    flex: 1.1;
    padding: 1em 7em 2em;
}

.section-image-wrapper{
    flex: 1;
	padding: 0;
}

.odd .section-image-wrapper { right: 0; }

.even .section-image-wrapper { left: 0; }

.section-image{
	min-height: 100%;
	background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}

.flex { display: flex; }

.shim {
    background: rgba(255,0,255, .2);
}

/*---- landing page ----*/

.landing{
	background:url(../img/LondonON-dark-Q50.jpg) no-repeat center center; 
	background-size:cover;
    flex-direction: column;
    justify-content: space-between;
	height: 100vh;
	width: 100%;
    min-height: 820px;
}

.landing-container {
    width: 70%;
    margin: 0 auto;
}

.logo{
	float: left;
	margin-top: 0.35em;
}
.logo a{
    display:block;
	color: #303030;
	font-weight: 200;
	text-transform: uppercase;
	font-size: 2.5em;
}
.logo a:hover{ text-decoration:none; }

.top-header{
    display: flex;
    padding: 0.8em 0em;
}

.top-nav { flex-grow: 1; }
.top-nav:before,
.top-nav:after {
    content: " ";
    display: table;
}
.top-nav:after { clear: both; }

.top-nav ul li a,
div.language {
	color: white;
	font-size: 0.84em;
	font-weight: 400;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
    letter-spacing: 0.3px;
}
.top-nav ul li a { 
	padding: 0.2em 1.5em;
    margin: 15px 0 0 0;
    line-height: 1.4em;
	position: relative;
}
div.language {
    margin: .9em 1em 0;
    height: fit-content;
    line-height: 62px;
}
select#language {
    border: none;
    background: none;
	padding: 0.2em 0 0.2em 0;
    cursor: pointer;
}
select#language:focus-within { color: black; }

.top-nav ul li.active a,
.top-nav ul li a:hover { color: #e0e0e0; }

.top-nav ul li.lang a {
    padding-right: 0;
}

nav { position: relative; }

nav ul {
	margin: 0.9em 0;
	width: 650px;
	margin-left: auto;
	margin-right: 0em;
	text-align: right;
}
nav ul.es {
    width: 700px;
}

nav li {
	display: inline;
	position:relative;
}

nav a {
	color: #fff;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
}
nav a:hover{
	text-decoration:none;
	color:#00A2C1;
}
nav a#pull {
    display: none;
    color: red;
    stroke: green;
    fill: blue;
}

@media screen and (min-width: 769px) {
    .landing .top-nav ul li.button a {
        background: white;
        color: #35919e;
        font-weight: 500;
        padding: .3em 0.5em 0.1em;
        margin: 0 1.5em;
    }
    .landing .top-nav ul li.button a:hover {
        color: #55b1be;
    }
}

@media screen and (max-width: 768px) {
	nav { 
  		height: auto;
  		float:none;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
        padding: 0;
  	}
  	nav li {
  		width: 100%;
  		position: relative;
  	}
  	.top-nav ul li a {
        background: white;
		border-bottom: 1px solid #eee;
        margin: 0;
        min-width: 200px;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
  	}
}

@media only screen and (max-width : 768px) {
	nav {
		border-bottom: 0;
		float:none;
	}
	nav ul {
		display: none;
		height: auto;
		margin: 1.5em 0 0 0;
		background: none;
	}
	nav a#pull {
		display: block;
		position: relative;
		color: #F26D7D;
		text-align: right;
		position: absolute;
		top: 23px;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	nav a#pull img{ margin-right: 5%; }
	.top-nav ul li a {
		color: #2C3E50;
		padding: 0.4em 0;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav { float:none; }
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a { border-bottom: 1px solid #EEE; }
}


/*---- landing content ----*/

.landing .shim--top     { flex: 1; }
.landing .shim--bottom  { flex: 1; }

.banner1 {
    margin: auto 0;
    display: table-cell;
    vertical-align: middle;
    position: relative;
    width: 100vw;
    height: calc(100vh - 106px);
}

.banner-info {
    padding: 0 0 1% 12%;
    text-align: left;
	color: white;
}

.banner-info h1, .banner-info p {
	display: inline-block;
	width: 80%;
}

.banner-info h1{
	font-weight: 500;
	font-size: 5.25em;
	letter-spacing: 1px;
	line-height: 1.1em;
}

.banner-info p{
	font-weight: 400;
	line-height: 1.3em;
	margin: 1em 0;
	width: 65%;
}
.banner-info p:not(.button) { font-size: 1.7em; }

.landing .banner-info .button {
    margin: 1em 0em;
    width: 100%;
}

.landing .banner-info .button a {
    color: white;
    background: black;
}


/*---- products ----*/

.page-container.odd.products {
    display: block;
    padding: 4.5em;
}
.products .top-row {
    display: flex;
    margin: 0 4.5em;
    padding: 0;
}

.products p { margin-top: -0.3em; }

.products .top-left {
    height: fit-content;
    display: flex;
    flex-direction: column;
    margin-right: auto;
}

.products .top-left h3 { margin: 0 0 2em  0; }

.products .subhead-1 {
    font-size: 1.263em;
    color: white;
    margin: 0 0 2em 0;
    max-width: 900px;
}

.products .subhead-2 {
    font-size: 1.184em;
    margin: 0 0 1.3em;
    color: white;
 }
 
.products .mission {
    margin: 0 4em 0 0;
    max-width: 40em;
}

.products .top-left p { line-height: 1.5em;  }

.products-top-right-inner{ padding: 0; }

.videocropper {
	width: 440px;
    min-width: 440px;
    height: 440px;
    border-radius: 100%;
	overflow: hidden;
	margin: 0px;
}

video#video-background {
    width: 480px;
    position: relative;
    top: -54px;
    left: -5px;
    position: absolute;
}

.product-row { display: flex; }

.product-cell {
    flex: 1;
    padding: 0 4.5em;
    margin-top: 5em;
}

.product-cell .spacer { flex: 1; }

.product-details {
    flex: 16;
    min-width: 200px;
}
.product-details p { font-size: 0.9em; }

.products .product {
    margin: 5em 0 0 0;
    padding: 0 4.5em;
    border: 1px solid green;
}

.products .top-row .top-left { padding: 0; }

.sidebox-right {
    margin: 0 0 0 2em;
    flex: 10;
}

.screenshot-frame {
    background: #d0d0d0;
    border-radius: 3px 3px 0 0;
    max-width: 375px;
    min-width: 200px;
    height: 50px;
    flex: 20;
}

.screenshot-toolbar {
    display: flex;
    padding: 0 5px;
}

.screenshot-toolbar .button,
.screenshot-toolbar .search-bar {
    height: 7px;
    background: rgba(255,255,255, 0.6);
    border: 1px solid #999999;
    margin: 4px 2px;
}

.screenshot-toolbar .button {
    width: 7px;
    border-radius: 10px;
}

.screenshot-toolbar .search-bar {
    flex: 1;
    width: 200px;
    border-radius: 2px;
}

.screenshot-frame img {
    animation-duration: 9s;
    animation-iteration-count: infinite;
    max-width: 100%
}

.screenshot-frame img.img-1 { animation-name: fade-1; }
.screenshot-frame img.img-2 {
    animation-name: fade-2;
    transform: translate(0, -100%);
}
.screenshot-frame img.img-3 {
    animation-name: fade-3;
    transform: translate(0, -200%);
}

.screenshot-frame.one img.img-3 { animation-delay: -2.52s; }
.screenshot-frame.two img.img-1,
.screenshot-frame.two img.img-2 { animation-delay: -1.5s; }
.screenshot-frame.two img.img-3 { animation-delay: -4.02s; }

@keyFrames fade-1 {
      0% {opacity: 0;}
      7% {opacity: 1;}
     42% {opacity: 1;}
     48% {opacity: 0;}
    100% {opacity: 0;} 
}
@keyFrames fade-2 {
      0% {opacity: 0;}
     38% {opacity: 0;}
     45% {opacity: 1;}
     75% {opacity: 1;}
     82% {opacity: 0;}
    100% {opacity: 0;} 
}
@keyFrames fade-3 {
      0% {opacity: 0;}
      7% {opacity: 1;}
     32% {opacity: 1;}
     38% {opacity: 0;}
    100% {opacity: 0;} 
}


/*---- images ----*/

#benefits .section-image {
  	background-image: url(../img/tram-small.jpg);
    background-position: top;
}
#services .section-image {
    background-image: url(../img/subte-small.jpg);
    background-position: 25% 50%;
}
#company .section-image {
    background-image: url(../img/gate-small.jpg);
    background-position: bottom;
}

/*---- footer -----*/

#company .side-text { padding-bottom: 0; }
p.copyright {
	color:#777777;
	font-size: 14px;
	font-weight: 400;
    margin: 0 0 -24px 0;
    border-top: 1px solid rgba(255,255,255, .25);
    padding: 12px 0;
}

p.copyright a {
    float: right;
    font-weight: 400;
}

#toTop {
	display: none;
	text-decoration: none;
	position: fixed;
	bottom: 14px;
	right: 3%;
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: none;
	text-indent: 100%;
	background: url("../img/to-top1.png") no-repeat 0px 0px;
}
#toTopHover {
	width: 40px;
	height: 40px;
	display: block;
	overflow: hidden;
	float: right;
	opacity: 0;
	-moz-opacity: 0;
	filter: alpha(opacity=0);
}

/*---- responsive-design ----*/

@media (max-width: 1920px) {
    /* make each page full height:
    .side-text { margin: auto 0; }
    .page-container { min-height: 100vh; }
    */
    
    #products { min-height: 100vh; }
}

@media (max-width: 1620px) {
    .product-row .product-cell .flex { display: unset; }
    
    .screenshot-frame {
        height: 200px;
        margin-bottom: 42px;
    }
}

@media (max-width: 1440px){
    .landing-container { width: 80%; }
}

@media (max-width: 1300px) {
    
    .product-row { flex-direction: column; }
    
    .product-row .product-cell .flex { display: flex; }
    
    .screenshot-frame { margin-bottom: revert; }
    
    .product-cell .screenshot-frame { height: 50px; }
}

@media (max-width: 1280px){
	.landing-container{ width: 90%; }
    
    .banner-info h1 { font-size: 4.5em; }
    .banner-info p:not(.button) { font-size: 1.6em; }

    .es .banner-info h1 { font-size: 4.0em; }
    .es .banner-info p:not(.button) { font-size: 1.5em; }
    
    .products .mission { margin: 0; }
    .products-top-right-inner { display: none; }
    
    .side-text { padding: 1em 5em 2em; }
}

@media (max-width: 1024px){
 
    .page-container.odd.products { padding: 0; }
    
    .banner-info h1 { font-size: 4.0em; }
    .banner-info p:not(.button) { font-size: 1.5em; }
    
    .section-image-wrapper { display: none; }

    .side-text { padding: 1em 7em 2em; }
}

@media (max-width: 768px){
   
    .banner-info h1 { font-size: 3.5em; }
    .banner-info p:not(.button) { font-size: 1.4em; }
    
    .product-row .product-cell .flex { display: unset; }
    
    .product-cell { margin-top: 0; }
    .product-cell .screenshot-frame {
        height: 200px;
        margin-bottom: 42px;
    }
    
	.products .top-left { padding: 1.5em 4em 1.5em 4em; }
	
        .side-text { padding: 1em 5em 2em; }

        .side-text,
        .product-cell { padding: 1em 5em 2em; }
        .products .top-row { margin: 0 5em;}
}

@media (max-width: 640px){
	.landing-container{ width: 75%; }
    .banner1 .landing-container { padding-bottom: 6em; }
	
    .banner-info h1 { font-size: 3.0em; }
    .banner-info p:not(.button) { font-size: 1.3em; }
    
	.banner-info h1 { width: 100%; }
	.banner-info p { width: 90% }
	
	.products .top-left { padding: 1.5em 3em 1.5em 3em; }
    
    .product-cell .screenshot-frame {
        height: 160px;
        margin-bottom: 80px;
    }
    
    .side-text,
    .product-cell {
        padding: 1em 4em 2em;
    }
    .products .top-row { margin: 0 4em; }

}

@media (max-width: 480px){
	.banner-info h1 { width: 100%; }

	.banner-info h1 { font-size: 2.5em; }
    .banner-info p:not(.button) { font-size: 1.2em; }
    
    .fadeInLeft, .fadeInRight {
        animation-name: none;
        -webkit-animation-name: none;
    }
    
    
	.products .top-left { padding: 1.5em 2em 1.5em 1.8em; }

    .product-cell .screenshot-frame {
        height: 120px;
        margin-bottom: 100px;
    }
    
    .side-text,
    .product-cell {
        padding: 1em 2em 2em;
    }
    
    .products .top-row { margin: 0 2em;}
    .products .subhead-1, .products .subhead-2 { font-size: 1.0em; }
}

@media (max-width: 320px){
	
    .landing-container{ width: 80%; }

	.banner-info h1 { width: 100%; }
	
    .products .top-left { padding: 1.5em 1em 1.5em 1em; }

	.top-nav ul li a { padding: 0.2em 0;  }
    
    .side-text {
        padding: 1em 2em 2em;
    }
        
    .product-cell .screenshot-frame {
        height: 120px;
        margin-bottom: 42px;
    }
      
    .side-text,
    .product-cell { padding: 1em 2em 2em; }
    
    .products .top-row { margin: 0 2em;}

}