

@media screen and (max-height: 660px) and (min-width: 760px) {


		#intro .vierkantlogo img {

			margin-top: -70px !important;

	}
	
}


@media screen and (min-width: 1250px) {

	#logo_story a {

		width: 20px;

		background-image: url(../../img/storygraaf.png);

	}

}



@media (min-width: 768px) {

	#modal #3D printing .modal-dialog {

		width: 35% !important;

	}

}



@media (min-width: 768px) {

	#modal #VR_Pain_Treatment .modal-dialog {

		width: 50% !important;

	}

}





.link-hotspot-tooltip {

	opacity: 1;

}



.modern #modal #contact .modal-body {

	padding: 0px;

}



@media ( min-width : 768px) {

	#modal #contact .modal-dialog {

		width: 700px !important;

	}

}



/*.modern #contact .modal-dialog {

    height: 380px;

}*/

	

	

.modern #contact .info-text {

    width: 420px;

}

.modern #contact .info-block {

    margin-bottom: 25px;

}



.modern #contact #info {

    width: 180px;

	margin-top: 35px;

}



#info a, a:hover, a:active, a:visited .h4 {



	color: white !important;

	font-weight: bold !important;



}



.modern #contact .close {

	margin-right: 15px;

	margin-top: -20px;

}



.modern .close {

    color: white !important;

    float: right;

    margin-top: -15px;

    margin-bottom: 15px;

	font-size: 39px;

    font-weight: 200;

    text-shadow: 0 0px 0 #fff !important;

    filter: alpha(opacity=20) !important;

    opacity: 0.5 !important;

    font-family: 'Alegreya Sans', Lato, sans-serif;

}



.pulse-hotspot{

	width:90px;

	height:90px;

	margin-left: -42px;

    margin-top: -39px;

    z-index:999999;

	cursor:pointer;

	transform:rotateX(50deg);

}



.link-hotspot + .tooltip {

	margin-left:10px;

}





.image-hotspot{

	   z-index:1;

}



#labyrinth_2 {

	display:none!important;

}



.secondary_image #labyrinth_2 {

	display:block !important;

}



.secondary_image #labyrinth {

	display:none!important;

}



@media screen and (max-width: 660px) {

	.intro_menu {

    	width: 50% !important;

    	height: 100% !important;

    	border: 5px white solid !important;

	}

}



@media screen and (max-width: 660px) {

	.portrait .intro_menu {

    	width: 100% !important;

    	height: 50% !important;

    	border: 5px white solid !important;

	}

}





@media screen and (min-width: 660px) {

	.intro_menu {

		width: 50% !important;

    	height: 100% !important;

		}

}





.intro_menu {

    border-color: white;

    border-style: solid;

    float: left;

    position: relative;

    background-size: cover;

    cursor: pointer;

	background-position: center;

}



#intro_meeting{

    background-image: url(../img/meeting.jpg);

    border-left: 10px white solid;

    border-right: 5px white solid;

    border-bottom: 10px white solid;

    border-top: 10px white solid;

}



#intro_expo{

    background-image: url(../img/expo.jpg);

    border-left: 5px white solid;

    border-right: 10px white solid;

    border-bottom: 10px white solid;

    border-top: 10px white solid;

}





#intro_menu {

    width: 100%;

    height: 100%;

}



.intro_menu .text {

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    position: absolute;

    text-align: center;

    font-size: 25px;

    color: white;

    min-width: 435px;

	z-index: 999;

}



.intro_menu .text h2 {

    font-size: 40px;

    font-weight: bold;

    font-family: 'Roboto', sans-serif;

	color: #00A1DD;

}



@media (max-width : 768px) {

	.intro_menu .text h2 {

		font-size: 30px;

	}
	
	
	.modern #contact .modal-body{

	height: 1200px !important;

	}

	#modal #VR_Pain_Treatment .modal-dialog {
		
	width: 100% !important;
		
	}
	
	#modal #ligging .modal-dialog {
		
	width: 100% !important;
		
	}
}



.intro_menu .text h3 {

    font-size: 30px;

    font-family: 'Roboto', sans-serif;

	color: #00A1DD;

}



#introtext h1 {

	

	font-family: 'Roboto', sans-serif;

	font-weight: bold;

}



#infomodal {

    top: 15px;

    left: 50%;

    transform: translateX(-50%);

    position: absolute;

    z-index: 999;

}



#introtext p {



	font-family: 'Roboto', sans-serif;

}



.modal-body-text p {

	font-family: 'Roboto', sans-serif;

	font-size: 16px;

	opacity: 0.9;

}



.modal-body-text h4 {

	

	font-family: 'Roboto', sans-serif;

	font-size: 22px;

	text-align: center;

	padding-bottom: 10px;

}





.video-3 {

	

	opacity: 0.8;

}

/*

.video-15 {

	

	opacity: 0.8;

}

*/



#modal.modern .modal-header {

    display: none !important;

}



#modal.modern .modal-content {

	border: none;

	background-color: rgba(0,0,0,0.8) !important;

}

}



.info-hotspot .info-hotspot-header {

     margin-left: -25px;

     margin-top: -25px;

}





.info-hotspot .info-hotspot-title-wrapper {

     margin-left: -25px;

     margin-top: -25px;

	height: 86px !important;

}



video::-webkit-media-controls-panel {











	opacity: 0 !important;

	

	display:none  !important;

	

	





}



#modal .modern .modal-body {

    background-color: rgba(0,0,0,0) !important;

    color: white;

    border-radius: 5px;

}





.intro_button {

	

	width: 290px;

	font-family: 'Roboto', sans-serif;

	letter-spacing: 1px;

	

}



.modern #contact .modal-body{

height: 430px;

}



#showmenu {

    top: 50%;

    position: absolute;

    width: 55px;

    height: 55px;

    margin-left: 15px;

    transform: translateY(-50%);

}



.intro_menu:after {

content: '\A';

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

opacity: 0;

transition: all 1s;

-webkit-transition: all 1s;

}



#intro_expo:after {

background-color: rgba(0,161,221,0.8);

}



#intro_meeting:after {

background-color: rgba(0,161,221,0.8);

}



.intro_menu:hover:after {

opacity: 1;



}



.intro_menu:hover .text h2 {



color: white;

z-index: 999;

}



.modal-body-text p{

	margin-top:30px;

}





.desktop .info-hotspot.visible .info-hotspot-title-wrapper, .desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper

	{



	width: 297px ;



}



.desktop.no-touch .info-hotspot .info-hotspot-header:hover {

    width: 339px;

}



.init .playpause,

.play .playpause{

    background-image:url(../../img/play_white.png);

        -webkit-transition: opacity 1s ease-in-out;

    -moz-transition: opacity 1s ease-in-out;

    -ms-transition: opacity 1s ease-in-out;

    -o-transition: opacity 1s ease-in-out;

    opacity: 0;

}



.pause .playpause{

	background-image:url(../../img/pause_white.png);

	    -webkit-transition: opacity 1s ease-in-out;

    -moz-transition: opacity 1s ease-in-out;

    -ms-transition: opacity 1s ease-in-out;

    -o-transition: opacity 1s ease-in-out;

    opacity: 0;

}



.init .playpause{

	    opacity: 1;

}


.desktop .pause:hover .playpause{

	    opacity: 1;

}




.play:hover .playpause{

	    opacity: 1;

}







.playpause {



    pointer-events: fill;

    user-drag: none;

    background-repeat:no-repeat;

    width: 30%;

    height: 30%;

    opacity: 0.6;

    position:absolute;

    left:0%;

    right:0%;

    top:0%;

    bottom:0%;

	margin:auto;

  /*  Indien in het midden

    width:50%;

    height:50%;

    margin:auto;

    */

    background-size:contain;

    background-position: center;

}





@media screen and (min-height: 600px){

.sgfont.action {

    font-size: 2em !important;

}

}



@media screen and (max-height: 600px){

.sgfont.action {

    font-size: 1.5em !important;

}

}





    