﻿
/* Microsite Shared CSS Document */

/* roboto-300 - cyrillic_latin-ext_latin_cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"), url("../woff2/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-3002grn.woff2") format("woff2"), url("../woff/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-300xunp.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - cyrillic_latin-ext_latin_cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url("../woff2/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-regular4bci.woff2") format("woff2"), url("../woff/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-regularn6yk.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - cyrillic_latin-ext_latin_cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"), local("Roboto-Medium"), url("../woff2/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-500uiev.woff2") format("woff2"), url("../woff/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-5005an8.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - cyrillic_latin-ext_latin_cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold"), url("../woff2/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-700dkca.woff2") format("woff2"), url("../woff/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-700u4i6.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-900 - cyrillic_latin-ext_latin_cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local("Roboto Black"), local("Roboto-Black"), url("../woff2/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-900xunp.woff2") format("woff2"), url("../woff/roboto-v18-cyrillic_latin-ext_latin_cyrillic-ext-900as2q.woff") format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


body {
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: #fff;
}


/* Disable CSS animation in small devices 
========================================================================== */
@media (max-width: 33.9em) {
	.animated {
		-webkit-animation-duration: 0s !important;
		animation-duration: 0s !important;
	}
}


/* Header
========================================================================== */
.extron-header {
	position:relative;
    width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#245496+0,1c3e6c+100 */
	background: #245496; /* Old browsers */
	background: -moz-linear-gradient(top,  #245496 0%, #1c3e6c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #245496 0%,#1c3e6c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #245496 0%,#1c3e6c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#245496', endColorstr='#1c3e6c',GradientType=0 ); /* IE6-9 */
	opacity:1;
	padding: .5em 0;
}
 
.support-hotline {
    color: #ffffff;
    text-align: right;
	font-size: 0.9rem;
}
.support-hotline .h4 {
	font-size: 1.5rem;
}


@media (max-width: 61.9em) {
	.support-hotline .h4 { font-size: 1.25rem; }
}

.logo-extron-svg {
	width: 100%;
}
.logo-extron-svg-mobile {
	height: 26px;
	width: auto;
	margin: 0.75rem .5rem;
}

/* Navbar Logo
========================================================================== */
.navbar-brand-logo {
	background-image: url(../svg/logo-extron-mobilejyea.svg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 26px;
	width: 120px;
	margin: .75rem 1rem;
	display: none;
}

.navbar-fixed-top .navbar-brand-logo {
	display: inline-block;
	float: left;
	width: calc(15% - 2rem);
}
.navbar-fixed-top .navbar-toggleable-md {
	width: 85%;
}

@media (max-width: 52.9em) {
	.navbar-fixed-top .navbar-brand-logo,
	.navbar-brand-logo {
		display: none
	}
}

/* Footer
========================================================================== */	    

.footer {
	position: relative;
    background-color:#333333;
    color: #ccc;
    box-sizing: border-box;
    display: block;
    padding: 1em;
    text-align: center;
	max-height: 45vh;
	height: 100vh;
	z-index: 99
}

.footer a,
.footer a:hover,
.footer a:focus {
    color: #fff;
}

@media (max-width: 33.9em) {
	.footer { 
		max-height: inherit;
		height: inherit;
	}
}

.social {
    width: 100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
    justify-content: center;
}
.social-item {
    margin: .5rem 1.5rem;
}
.social-link > .fa {font-size: 1.5rem;}

/* Contact Us section
========================================================================== */	
.panel-contact { 
	background: #f2f3f5 url(../jpg/worldwide_officeshav2.jpg) top center no-repeat;
	padding-top:5em;
	padding-bottom:5em;
} 

/* Back to top button*/
.link-pagetop {
    position: fixed;
    bottom: 45%;
    right: 50px;
    background-color: rgba(153,153,153, 0.5);
    padding: 0.9em 1em;
    outline: medium none;
    border-radius: 4px;
    color: #fff;
    font-size: 1.5em;
	z-index: 999;
    display:none;
}
.link-pagetop:link,
.link-pagetop:hover,
.link-pagetop:focus { 
    color: #fff; 
}
.link-pagetop:hover { 
    background: #2185d0;
}

/* Components
========================================================================== */	

/***********************************
	   Equal Height Columns
/***********************************/

.row-fluid.row-table {
	display: table;
	table-layout: fixed;
	width: 100%;
}
.row.row-table {
	display: table;
	table-layout: fixed;
	width: calc(100% + 1.875rem);
}
.row.row-table:before,
.row.row-table:after,
.row-fluid.row-table:before,
.row-fluid.row-table:after {
  display: table;
  content: " ";
}

.row.row-table:after,
.row-fluid.row-table:after {
  clear: both;
}

.row.row-table > *,
.row.row-table > [class^='col-xs-'],
.row.row-table > [class^='col-sm-'],
.row.row-table > [class^='col-md-'],
.row.row-table > [class^='col-lg-'],
.row-fluid.row-table > *,
.row-fluid.row-table > [class^='col-xs-'],
.row-fluid.row-table > [class^='col-sm-'],
.row-fluid.row-table > [class^='col-md-'],
.row-fluid.row-table > [class^='col-lg-'] {
   float: none;
   display: table-cell;
   vertical-align: middle;
}

@media (max-width: 74.9em) {
	.row.row-table-lg,
	.row-fluid.row-table-lg {
		display: inherit ;
		table-layout: inherit;
	}
	.row.row-table-lg > [class^='col-lg-'],
	.row-fluid.row-table-lg > [class^='col-lg-'] {
		display: block;
	}
}

@media (max-width: 61.9em) {
	.row.row-table-md,
	.row-fluid.row-table-md {
		display: inherit ;
		table-layout: inherit;
	}
	.row.row-table-md > [class^='col-md-'],
	.row-fluid.row-table-md > [class^='col-md-'] {
		display: block;
	}
}


@media (max-width: 47.9em) {
	.row.row-table-sm,
	.row-fluid.row-table-sm {
		display: inherit ;
		table-layout: inherit;
	}
	.row.row-table-sm > [class^='col-sm-'],
	.row-fluid.row-table-sm > [class^='col-sm-'] {
		display: block;
	}
}


/***********************************
	   Column Layout
/***********************************/
.column-layout {
	width:100%;
	margin: 0;
	padding:0;
	font-size: 0;
	overflow:hidden;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

.column-layout > li,
.column-layout > div {
	font-size: inherit;
	display: inline-block;
	width:100%;
	vertical-align:top;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

.column-layout.column-two > li,
.column-layout.column-two > div { width: 49%; }

.column-layout.column-three > li,
.column-layout.column-three > div {	width: 32%; }

.column-layout.column-two .media > .pull-left,
.column-layout.column-three .media > .pull-left,
.column-layout.column-four .media > .pull-left,
.column-layout.column-five .media > .pull-left,
.column-layout.column-six .media > .pull-left {  }

.column-layout.column-four > li,
.column-layout.column-four > div { width: 23.5%; }

.column-layout.column-five > li,
.column-layout.column-five > div { width: 18.4%; }

.column-layout.column-six > li,
.column-layout.column-six > div { width: 15%; }

.column-layout.column-two div:nth-child(2n),
.column-layout.column-two li:nth-child(2n) { margin-right:0;  }

.column-layout.column-three div:nth-child(3n),
.column-layout.column-three li:nth-child(3n) { margin-right:0; }

.column-layout.column-four div:nth-child(4n),
.column-layout.column-four li:nth-child(4n) { margin-right:0; }

.column-layout.column-five div:nth-child(5n),
.column-layout.column-five li:nth-child(5n) { margin-right:0; }

.column-layout.column-six div:nth-child(6n),
.column-layout.column-six li:nth-child(6n) { margin-right:0; }
.ie-column { margin-right:0 !important; }
