@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Regular.ttf');   font-weight: 400; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Italic.ttf');   font-weight: 400; font-style: italic;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Black.ttf');   font-weight: 900; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-BlackItalic.ttf');   font-weight: 900; font-style: italic;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Bold.ttf');   font-weight: 700; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-BoldItalic.ttf');   font-weight: 700; font-style: italic;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Medium.ttf');   font-weight: 500; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-MediumItalic.ttf');   font-weight: 500; font-style: italic;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Light.ttf');   font-weight: 300; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-LightItalic.ttf');   font-weight: 300; font-style: italic;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-Thin.ttf');   font-weight: 100; font-style: normal;}
@font-face { font-family: Roboto; src: url('../fonts/Roboto/Roboto-ThinItalic.ttf');   font-weight: 100; font-style: italic;}


body{ font-family: 'Roboto', sans-serif; -moz-osx-font-smoothing: grayscale; font-size: 20px}
body.blocked{ overflow: hidden; }

.container{ width: 100%; padding: 0;}
.maincontainer{ width: 100%; padding: 0; max-width: none;}

.imageholder{background-size: contain;background-repeat: no-repeat; background-position: center;}
.vl{ border-left: 1px solid white; height: 100% }

h1{font-family: 'Roboto'; font-size: 62px; font-weight: 900;  text-align: center;}
h2{font-family: 'Roboto'; font-size: 54px; font-weight: 500; }
h3{font-family: 'Roboto'; font-size: 42px; font-weight: 300; }
a{ transition: color 0.3s, background-color 0.3s }

.container.fixed-bg{ position: fixed; height: 100vh; z-index: -1; background-size: cover; background-position: top center;}

.separator-vertial-line{height: 100%; width: 2px; padding: 0}

#mobilenav{display: none;}

/* From Custom editor */
.oc-citrino-emphatic{ font-size: 120%; font-weight: bold; text-transform: uppercase; font-family: 'Roboto'; font-size: 18px; font-weight: 800; text-transform: uppercase;  }
.oc-citrino-label{ background-color: #000; color: #fff; display: inline-block; padding: 3px 10px }
.oc-citrino-caption{ font-size: 80%; font-style: italic;}
.oc-citrino-image{ margin: 0 0 0 0; background-color: #ccc; background-image: url('../images/image-placeholder.png'); background-position: center; }

.oc-citrino-image-box{ overflow: hidden; width: 100%; text-align: center; max-height: 330px;}
.oc-citrino-image-box .oc-citrino-image{ width: 100%; }

.oc-citrino-three-inline-box { display: flex; flex-direction: row; overflow: hidden;}
.oc-citrino-three-inline-box .oc-citrino-box{ width: 33%;text-align: center; border-width: 8px; border-style: solid ; margin: 0 5px; height: 300px; overflow:hidden;}
.oc-citrino-three-inline-box .oc-citrino-image-box {height: 200px; overflow: hidden; position: relative; }
.oc-citrino-three-inline-box .oc-citrino-image-box .oc-citrino-image{ display: none; height: auto; position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; transition: width 0.3s; }
.oc-citrino-three-inline-box .oc-citrino-image-box.image_in_div  { background-repeat: no-repeat; background-position:center; background-size: cover; transition: width 1s, height 1s, background-color 1s, transform 1s; filter 1s}
.oc-citrino-three-inline-box .oc-citrino-image-box.image_in_div .oc-citrino-image{ display: none;}
.oc-citrino-three-inline-box .oc-citrino-image-upper-text{ text-align: center; text-transform: uppercase; height: 87px; padding: 0 2px; line-height: 17px; vertical-align: middle; display: table-cell;text-align: center; text-transform: uppercase}
.oc-citrino-three-inline-box .oc-citrino-box:hover .oc-citrino-image-box.image_in_div{ transform:scale(1.2)}

.oc-citrino-inline-box { display: flex; flex-direction: row;}
.oc-citrino-inline-box .oc-citrino-box{ width: 50%; text-align: left; padding: 10px; }
.oc-citrino-inline-box .oc-citrino-image-box .oc-citrino-image{ margin: 5px 5px 0 5px }
.oc-citrino-inline-box .oc-citrino-box:first-of-type{ text-align: left; margin-left: 20px }
.oc-citrino-inline-box.imageleft { flex-direction: row-reverse;  }
.oc-citrino-inline-box.imageleft .oc-citrino-caption { text-align: right }

.oc-citrino-inline-title-highlight { display: flex; flex-direction: row; margin-top: 10px }
.oc-citrino-inline-title-highlight .oc-citrino-box.text-holder{ width: 33%; text-align: left; margin-right: 20px }
.oc-citrino-inline-title-highlight .oc-citrino-box.image-holder{  max-height: 370px; padding-top: 50px; width: 67%;}
.oc-citrino-inline-title-highlight .oc-citrino-image-box .oc-citrino-image{ margin: 5px }
.oc-citrino-inline-title-highlight .oc-citrino-box .oc-citrino-label{ margin-bottom: 30px }

.oc-citrino-three-inline-text-box { display: flex; flex-direction: row; overflow: hidden;}
.oc-citrino-three-inline-text-box .oc-citrino-box{ width: 33%; text-align: center; margin: 0 5px; height: 230px;}

.oc-citrino-three-inline-box .oc-citrino-box:hover .oc-citrino-image-box .oc-citrino-image{ width:110%; -webkit-transition: width 0.3s; transition: width 0.3s;}

.fr-fil{ float:left; margin: 10px; margin-left: 0 }
.fr-fir{ float:right; margin: 10px; margin-right: 0 } 


/*modal Menu*/
.modal { display: none;  position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.95); padding: 0 20px;}
.modal .close{ position: absolute; right:0; top: 0; opacity: 1}
.modal .close img{ cursor: pointer;}

.modal .container{ max-width: 600px; padding: 40px 10px;  position: relative; top: 10vh; }
.modal .cover { height: 240px; 	background-size:cover; background-repeat: no-repeat; background-position: top center; }
.modal .title h2{  text-align: center; font-size: 34px; }
.modal .info { margin: 10px 5px; display: block; text-align: right;}
.modal .info img{	height: 16px;	margin: 0 3px; vertical-align: middle;}
.modal img{ max-width: 100% }

/* showreel */
.wrap{ position: relative; overflow: hidden}
.showreel ul{ display: flex; flex-direction: row;  position: relative;padding: 0; margin: 0; transition: left,right 0.3s ease; right:0; }
.showreel ul li{ display: block; list-style: none; }
.showreel, .showreel ul.frame, .showreel ul.frame li, .wrap{  width: 100%; height: 100%;  }
.showreel ul.frame li div.container{ max-width: none; text-align: right; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.showreel .wrap.bulletscontainer{ height: auto; top: -60px; text-align: center;  }
.showreel .wrap ul.bullets{ display:inline-flex; top: width: auto; padding: 0 40px}
.showreel .wrap ul.bullets li a{ display: block; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; background-color: #fff }
.showreel ul.frame .description{position: relative; display: inline; top: 85%; padding: 10px 100px 10px 20px; background-color: #000000dd}

/* minifing menu */
#minifingmenublock.minified { position: fixed; top:0; z-index: 9}