/* 
    Created on : Nov 19, 2016, 1:59:23 AM
    Author     : Miki
*/

/*

    ALL DEFAULT VALUES SHOULD BE DEFINED HERE, AND OVERRIDEN IF NECESSARY

*/

body
{
    /*max-width: 1000px;*/
    height:100%;
    margin: auto;
    background-color: whitesmoke;
    font-family:FrutigerNextPro-Regular, Arial,Helvetica, sans-serif;
    font-size:14px
}
a, a:visited
{
    color: #0e82b8;
    /*font-weight: bold;*/
    text-decoration: none;
}
a:hover
{
    /*text-decoration: underline;
    text-decoration-style: dashed;*/
}
.a_link, .a_link:visited
{
    color: #0681b7;     
    text-decoration: none;
}
.a_link:hover
{
    color: #0681b7;     
    text-decoration: underline;
    text-decoration-style:dashed;
}
h4
{
    font-family:Calibri;
}
.key_features
{
    margin-left:20px;
}
.key_features>p
{
    /*font-weight: bold;*/
    font-family: Calibri;
}
.key_features>ul
{
    list-style-type: circle;
}
#cookie_container
{
    width:100%;
    background-color:#f7f7f7;
    height:60px;    
    display: flex;
    position:fixed;
    bottom:0;
    margin:auto;
    z-index: 3000;
    border:1px solid black;
    align-content: space-around;
}
#cookie_container>div
{
    display:flex;
    margin:auto;
}
#cookie_text
{
    margin:0;
    flex:0 0 auto;
    align-self:center;
    text-align:center;
}
#cookie_button
{
    flex:0 0 30px;
    align-self: center;
    color: rgba(0,0,0,0.3);
    font-size: 1.4em;
    margin-left:40px;
    font-weight: bold;
}
#cookie_button:hover
{
    cursor:pointer;
    color:black;
}

#image_viewer_container
{
    display:none;
    position: fixed;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.7);
    top:0;
    left:0;
    z-index: 1000;
    cursor: pointer;
}
#image_viewer
{
    margin:auto;
    max-width: 80%;
    cursor:pointer;
}
#video_player_container
{
    flex-direction: column;
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    top:0;
    left:0;
    z-index: 1000;
}
#video_player_container p
{
    position:fixed;
    width:100%;
    margin:0;
    display:fixed;
    top:10px;
    color:white;
    font-size:1.7em;
}

#video_player
{
    margin:auto;
    max-width:90%;
    max-height:90%;
    display:flex;
    flex-direction: column;
    align-self: center;
    vertical-align: central;
}

#close_image
{
    /*border:1px solid white;*/
    position:absolute;
    right:5px;
    top:5px;
    width:60px;
    height:60px;
    color:gray;
    margin:auto;
    font-size:40px;
}
#close_image:hover
{
    color:white;
    cursor:pointer;
}
.viewed_image
{
    cursor: pointer;
}
#content
{
    max-width: 1000px;
    margin:auto;
    /*width: 100%;*/
    background-color: white;
}
.default_padding
{
    padding: 20px 25px 20px 25px;
}

/* Content */
.justified_text
{
    text-align:justify;
}
.display_flex
{
    display:flex;
}
.default_margin_left
{
    margin-left: 5px;
}
.default_margin_right
{
    margin-right: 5px;
}
.position_relative
{
    position: relative;
}
.position_absolute
{
    position: absolute;
}
#start_page_image
{
    position:relative;
    width: 100%;
    height:200px;
}
#start_page_slogan
{
    box-sizing: border-box;
    position: absolute;
    left:30px;
    top:0px;
    width: 310px;
    height: 100%;
    padding: 30px 0 0 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color:black;
    letter-spacing: 1px;
    font-family: Calibri;
    background:linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.4))
}
#start_page_slogan_main
{    
    font-size: 24px;
    font-weight: bold;
}
#start_page_slogan_small
{    
    font-size: 18px;
    font-weight: bold;
}

#start_page_promo
{
	border-radius:10px;
	overflow:hidden;
	background-color:#eeeeee;
}
#start_page_promo p
{
	color:white;
	font-size:1.3em;
	text-align:center;
	padding:5px;
}
#start_page_promo input
{
	position:absolute;
	left:20px;
	width:110px;
	bottom:15px;
	height:24px;
	font-size:1.3em;
}
#promo_user_button
{
	color:#0e82b8;
	background-color:white;
	border:1px solid #b1c8e2;
}
#promo_user_button:hover
{
	border:0px;
	color:white;
	background-color:#0e82b8;
	
}
#promo_user_button:active
{
	outline:0;
	transform: translateY(4px);
}
#promo_user_button:focus
{
	outline:0;
}
.promo_button
{
	position:absolute;
	right:0px;
	bottom:auto;
	/*width:50px;*/
	height:30px;
	border:none;
	color:white;
	background-color:#0e82b8;
	border-radius:5px;
	transition:0.3s;
}
.promo_button:hover
{
	color:#0e82b8;
	background-color:white;
	cursor:pointer;
	/*padding:1px;*/
}
.promo_tab
{
	overflow:hidden;
	/*border:1px solid #ccc;*/
	/*background-color:#f1f1f1;*/
}
.promo_tab button
{
	float:left;
	border:1px solid #cccccc;
	cursor:pointer;
	padding:7px 8px;
	transition:0.3s;
	background-color:white;
}
.promo_tab button:focus
{
	outline:0;
}
.promo_tab button:hover
{
	background-color:#6fa0cc;
	border-color:#6fa0cc;
}
.promo_tab button.active
{
	background-color:#0d82b8;
	border-color:#0d82b8;
	color:white;
}
.promo_tab_content
{
	display:none;
	padding:6px 12px;
	border:1px solid #b1c8e2;
	/*border-top:none;*/
}
#promo_demo_btn
{
	border-radius:10px 0 0 0;
}
#promo_broschure_btn
{
	border-radius:0 10px 0 0;
}


.text_title
{
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
}

video
{
    width:100%;
}


.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 5px solid black;
  display:inline-block;
  vertical-align: middle;
}


.flex_child_left
{
    flex: 1 1 auto;
    width: 50%;
    margin-right: 5px;
}

.flex_child_right
{
    flex: 1 1 auto;
    width: 50%;
    margin-left: 5px;
}

.flex_child_right img
{
    display:block;
    margin:auto;
    /*width: 200px;*/
    
}


.navigation_box
{
    width: 250px;
    height:120px;
    border: 1px solid #b2c8e2;
    border-radius: 15px;
    overflow: hidden;
    margin:auto;
    margin-bottom: 20px;
}
.navigation_box:hover
{
    transition:0.4s;
    /*color:white;*/
    /*background-color:#0e82b8;*/
    box-shadow: 0px 0px 9px 3px #888888;
}
.navigation_box_image
{
    /*width:100%;*/
    height:90px;
    /*flex-basis: auto;*/
}
.navigation_box_text
{
    width: 100%;
    height: 30px;
    padding:0;
    margin:0;
    text-align: center;
    /*flex: 1 1 auto;*/
}

/* NEWS */

.news_container *
{
    box-sizing:  border-box;
}
.news_container{
	/*border:2px solid #0581B7;*/
        box-shadow:0 0px 10px 1px rgba(128, 128, 128, 0.5);
	border-radius:5px 5px 0 0px;
	margin:0 auto 10px;
	overflow:hidden;
        flex:0 1 30%;
        
	/*max-width:280px;/* For some reason table_news width is ignored, and it extends and shrinks instead of being fixed. */
}
.news_container_header_height
{
    min-height:76px;
}
.news_header{
	margin:0 !important;
	padding:8px 4px;
	text-align:center;
	background-color:#0581B7;
	color:white;
        font-size: 1.2em;
}
.news_headline{
	margin:8px;
	font-weight:bold;
}
.news_content{
	margin:8px 8px 0 8px;
}
.news_more
{
    /*border-top:1px solid #ababab; */
    background-color: #eee;
    margin:0; 
    padding: 10px 5px; 
    text-align: center;
    display:block;
}
.news_more:hover
{
    text-decoration: underline;
}

/* WAITING DIALOG (duplicate from customer/default.css )*/
#waiting_dialog_fullscreen
{
    position:fixed;
    top:0;
    background:rgba(0,0,0,0.8);
    display:none; 
    justify-content: center;
    height:100%;
    width:100%;
    z-index: 5000;
}
#waiting_dialog_fullscreen button
{
    margin:auto;
}
#waiting_dialog_animation_container
{
    align-self: center;
}
#waiting_dialog_animation_container p
{
    margin:auto;
    padding-top:20px;
    font-size: 2em;
    color:white;
}
.waiting_dialog_animation
{
    margin:auto;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#waiting_dialog_notification_container
{
    display:none;
    flex-direction: column;
    align-self: center;    
}
#waiting_dialog_notification_container p
{
    font-size:1.5em;
    color:white;
}