body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-shadow: 0px 0px 1px rgba(255,255,255,1);
      -webkit-font-smoothing: antialiased !important;
      font-smooth: always;
      font-weight: bold;
      overflow-y:hidden;
       overflow-x:hidden;
      text-rendering: optimizeLegibility !important;
      font-family: BentonSans, arial;
    }

@font-face {
       font-family: BentonSans;
        src: url(BentonSans-Bold.woff);
        src: url('BentonSans-Bold.eot'); /* IE9 Compat Modes */
        src: url('BentonSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('BentonSans-Bold.woff') format('woff'), /* Modern Browsers */
        url(BentonSans-Bold.ttf)  format('truetype'), /* Safari, Android, iOS */
        url('BentonSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* the fix ! simply ADD this block BELOW the above block */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: BentonSans;
            src: url('BentonSans-Bold.svg#BentonSans') format('svg');
    }
}



    #fullBackgroundOne {
           width: 100%;
           height: 100%;
           position: absolute;
           background-color: white;
           opacity: 1;
    }


    #banner{
        display: block;
        opacity: 0;
        margin: auto;
        padding: 10px;
        height: 748px;
        width: 1206px; 
        position: absolute; 
        top:0;
        left:0;
        right:0;
        bottom:0;  
        
        -ms-transform: scale(0.85, 0.85); /* IE 9 */
        -webkit-transform: scale(0.85, 0.85); /* Safari */
        transform: scale(0.85, 0.85);
    }
    
    #banner img, #banner div{
        font-family: BentonSans;
        font-weight: bold;
        letter-spacing: 6px;
        opacity: 1;  
    }
    
    
    #banner #bgexit {
             position: relative;
             opacity: 1;
             top:28px;
             width: 96%;
             height: 94%;
             left: -11px;
             margin: auto;
    }

    #banner #backgroundOne{
    
    }
    #banner #enterFullScreen{
        top: 45px;
        position: absolute;
        width: 141px;
        cursor: pointer;
        right: 70px;
    }

    #banner #folioOne {
        position: absolute;
        background: url(assets/bacs1.png) left center; 
        width: 244px;
        height: 135px;
        top: 161px;
        left: 216px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioTwo  {
        position: absolute;
        background: url(assets/nato.png) left center; 
        width: 244px;
        height: 135px;
        top: 161px;
        left: 480px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioThree {
        position: absolute;
        background: url(assets/rapport.png) left center; 
        width: 244px;
        height: 135px;
        top: 161px;
        left: 743px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioFour {
        position: absolute;
        background: url(assets/nowtv.png) left center; 
        width: 244px;
        height: 135px;
        top: 316px;
        left: 216px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioFive {
        position: absolute;
        background: url(assets/ukti.png) left center; 
        width: 244px;
        height: 135px;
        top: 316px;
        left: 480px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioSix {
        position: absolute;
        background: url(assets/partners.png) left center; 
        width: 244px;
        height: 135px;
        top: 316px;
        left: 743px;
        cursor: pointer;
        border: 1px solid #ccc;
    }

    #banner #folioSeven {
        position: absolute;
        background: url(assets/cx.png) left center; 
        width: 244px;
        height: 135px;
        top: 470px;
        left: 340px;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    #banner #folioEight {
        position: absolute;
        background: url(assets/jurysinn.png) left center; 
        width: 244px;
        height: 135px;
        top: 470px;
        left: 605px;
        cursor: pointer;
        border: 1px solid #ccc;
    }






    #banner #folioBacsOne {
        position: absolute;
        width: 244px;
        height: 185px;
        top: 221px;
        left: 216px;
        cursor: pointer;
        border: 0px solid #ccc;
    }
   #banner #folioBacsTwo  {
        position: absolute;
       
        width: 244px;
        height: 185px;
        top: 161px;
        left: 480px;
        cursor: pointer;
        border: 0px solid #ccc;
    }
    #banner #folioBacsThree {
        position: absolute;
        
        width: 244px;
        height: 185px;
        top: 161px;
        left: 743px;
        cursor: pointer;
        border: 0px solid #ccc;
    }
    #banner #folioBacsFour  {
        position: absolute;
       
        width: 244px;
        height: 185px;
        top: 356px;
        left: 216px;
        cursor: pointer;
        border: 0px solid #ccc;
    }
    #banner #folioBacsFive {
        position: absolute;
        width: 244px;
        height: 185px;
        top: 356px;
        left: 480px;
        cursor: pointer;
        border: 0px solid #ccc;
    }
   #banner #folioBacsSix {
        position: absolute;
        width: 244px;
        height: 185px;
        top: 356px;
        left: 743px;
        cursor: pointer;
        border: 0px solid #ccc;
    }

    #banner #folioBacsSeven {
        position: absolute;
        width: 244px;
        height: 185px;
        top: 545px;
        left: 480px;
        cursor: pointer;
        border: 0px solid #ccc;
    }

    #banner #videoone {
        position: absolute;
        top: 100px;
        left: 150px;
        visibility: hidden;
    }

    #banner #videoone #myvideo {

    }


    #banner #backButton {
        position: absolute;
        background: url(assets/arrow.png) left center; 
        width: 30px;
        height: 93px;
        bottom: 390px;
        left: 70px;
        cursor: pointer;
    }



	#banner #logoSmall {
        position: absolute;
		right:70px;
		height:93px;
		width:180px;
		bottom:0px;
        background: url(assets/logo_end.png) left center; 
		z-index: 20;
		opacity: 0;
        cursor: pointer;
	}


	#banner #logoSmallLeft {
        position: absolute;
		left:0px;
		height:113px;
		width:175px;
		top:0px;
		z-index: 20;
		opacity: 1;
        -ms-transform: scale(0.7, 0.7); /* IE 9 */
        -webkit-transform: scale(0.7, 0.7); /* Safari */
        transform: scale(0.7, 0.7);
        opacity: 1;
	}

    #banner #videooneIntro {
        position: absolute;
        top: 100px;
        left: 105px;
        visibility: visible;
    }

    #banner #videooneIntro #myvideoIntro {

    }


    #banner #videooneIntroTwo {
        position: absolute;
        top: 100px;
        left: 105px;
        visibility: hidden;
    }

    #banner #videooneIntroTwo #myvideoIntroTwo {

    }


    #banner #enterButton {
            position: absolute;
            width: 155px;
            height: 87px;
            bottom: 50px;
            left: 535px;
            visibility: visible;
            cursor: pointer;
            -ms-transform: scale(0.5, 0.5); /* IE 9 */
            -webkit-transform: scale(0.5, 0.5); /* Safari */
            transform: scale(0.5, 0.5);
    }



/*IPAD LANDSCAPE MODE*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */

    
     #banner #bgexit {
        height: 100%;
         left: 18px;
    }
    #banner #logoSmall {
        bottom: 0px;
        right: 100px;
    }
    
    #banner #enterFullScreen{
        width: 288px;
        opacity: 0;
        visibility: hidden;
    }
    
    #banner {
        position: fixed;
        -ms-transform: scale(0.81, 0.81); /* IE 9 */
        -webkit-transform: scale(0.81, 0.81); /* Safari */
        transform: scale(0.81, 0.81);
        top:-80px;
        left:-90px;
    }
    
    
    
    #banner #backButton {
        bottom: 380px;
        left: 50px;
        opacity: 1;
    }
    #banner #videoone {
        position: absolute;
        top: 100px;
        left: 130px;
        visibility: hidden;
    }
    
    #banner #logoSmallLeft {
		left:-20px;
        top:0px;
	}
    
}
/*IPAD LANDSCAPE MODE*/




#container:fullscreen {
     background-color: #fff !important;
}
#container:-webkit-full-screen {
     background-color: #fff !important;
}
#container:-moz-full-screen {
    background-color: #fff !important;
}

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: #fff !important;
}

html {
    background-color: #fff !important;
    /* Or any color / image you want */
}

      body:-moz-full-screen {
        background-color: #fff !important;
      }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ 
        #banner #logoSmall {
        bottom: -170px;
        right: 200px;
    }
    
    #banner #bgexit {
        top:-10px;
        height: 128%;
        width: 65%;
        left: 23px;
    }
    
        #banner #enterFullScreen{
        opacity: 0;
            visibility: hidden;
    }
    
#banner {
        position: fixed;
        -ms-transform: scale(0.75, 0.75); /* IE 9 */
        -webkit-transform: scale(0.75, 0.75); /* Safari */
        transform: scale(0.75, 0.75);
        top:-20px;
        left:-220px;
    }


       #banner #backButton {
        bottom: -180px;
        left: 160px;
        opacity: 1;
    } 
    
    #banner #logoSmallLeft {
		left:120px;
	}
    
    #banner #videoone {
        left: 115px;
    }

    #banner #videoone #myvideo {

    }
}


/* IPHONE  PORTRAIT*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 667px) 
and (orientation : portrait) {

    #banner {
        position: absolute;
         top: -105px;
         left: -420px;
        -ms-transform: scale(0.4); /* IE 9 */
        -webkit-transform: scale(0.4); /* Safari */
        transform: scale(0.4);
    }

    #banner #enterButton {
            position: absolute;
            left: 520px;
            -ms-transform: scale(1); /* IE 9 */
            -webkit-transform: scale(1); /* Safari */
            transform: scale(1);
    }
    
    #banner #logoSmall {
        right: 240px;
	}

    
    #banner #logoSmallLeft {
            position: absolute;
        left: 140px;
	}
    
    
    #banner #backButton {
                    position: absolute;
        left: 140px;
    }
    
    
    #banner #videooneIntro #myvideoIntro,  #banner #videooneIntroTwo #myvideoIntroTwo {
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari */
        transform: scale(0.9);
    }

    #banner #videoone #myvideo {
        position: absolute;
        left: -40px;
        -ms-transform: scale(0.8); /* IE 9 */
        -webkit-transform: scale(0.8); /* Safari */
        transform: scale(0.8);
    }
    /* STYLES GO HERE */
}



/* IPHONE  6 plus PORTRAIT*/
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 667px) 
and (orientation : portrait) {

    #banner {
         top: -235px;
         left: -445px;
            -ms-transform: scale(0.4); /* IE 9 */
        -webkit-transform: scale(0.4); /* Safari */
        transform: scale(0.35);
    }
    
}




/* IPHONE  LANDSCAPE  6*/
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 736px) 
and (orientation : landscape)  { 
    #banner {
        position: absolute;
         top: -15px;
         left: -240px;
        -ms-transform: scale(0.5); /* IE 9 */
        -webkit-transform: scale(0.5); /* Safari */
        transform: scale(0.5);
    }
    
    #banner #logoSmallLeft {
        top: 100px;
	}
        #banner #logoSmall {
        bottom: 5px;
	}
    
    
    #banner #videoone #myvideo {
        position: absolute;
        top: 30px;
    }
    
    
    
}
/* IPHONE  LANDSCAPE  6*/