﻿body {
    margin: 0;
}

/*RESPONSIVE*/
/* Small devices (small phones, 768px and up) */

#positioning_statement {
    display: block;
    box-sizing: border-box;
    border-bottom: 1px dotted #3a3a3a;
    padding: 5px 10px 10px 10px;
    font-family: OpSans;
    font-size: 16px;
    background-color: #e6e6e6;
    width: 100%;
}
.positioning_title_wr {
    display: block;
    font-family: OpSansLight;
    font-size: 30px;
    color: #e2007a;
}

.positioning_title {
    display: block;
    font-family: OpSansBold;
    font-size: 28px;
    line-height: 28px;
    color: #e2007a;
    margin-bottom: 6px;
}

#main_slideshow {
    display: block;
    position: relative;
    top: 0;
    right: 0;
    box-sizing: border-box;
    background-color: #c2c3c4;
    text-align: center;
    width: 100%;
    aspect-ratio: 828/514;
}

.main_slideshow_slogan {
    position: relative; 
    top: 20px; 
    left: 0; 
    width: 100%; 
    font-family: OpSansLight; 
    font-size: 68px;
    line-height: 68px;
    color: #fff;
}

.main_slideshow_slogan img {width: 40px;}

.main_slideshow_sign {
    position: relative;
    top: 30px;
    font-family: OpSans; 
    font-size: 16px;
    font-style: italic;
    color: #fff;
}

.main_slideshow_data {
    position: relative;
    top: 60px;
    /*left: 50px;
    display: table;*/
    font-family: OpSans;
    font-size: 32px;
}

    .main_slideshow_data div {
        display: table-cell; 
        border-left: 1px dotted #464646;
        font-family: OpSans;
        font-size: 20px;
        padding-left: 15px;
        padding-right: 40px;
        line-height: 110%
    }

        .main_slideshow_data div span {
            font-family: OpSansBold;
            color: #e2007a;
        }

.main_slideshow_band {
    position: relative; 
    top: 80px; 
    left: 0; 
    width: 100%; 
    height: 52px; 
    line-height: 52px; 
    background-color: #e2007a; 
    color: #fff; 
    font-family: OpSansLight; 
    font-size: 32px; 
}

.main_slideshow_last {
    position: relative;
    top: 45px;
    font-family: OpSans;
    font-size: 17px;
    color: #464646;
}


.slider_textbox, .slider_textbox_white1, .slider_textbox_white2 {
    position: absolute;
    font-family: OpSans;
    font-size: 13px;
    line-height: 110%;
    background-color: rgba( 0,0,0,0.4 );
    padding: 8px 10px 8px 10px;
}

.slider_textbox_white1, .slider_textbox_white2 {
    background-color: rgba( 255,255,255,0.4 );
}

.slider_textbox_white1 {
    bottom: 20px; 
    left: 50px; 
    width: 26%; 
    padding-left: 40px; 
    background-image: url('pics/quote_mark_magenta.png'); 
    background-position: top 6px left 4px; 
    background-size: 36px 24px; 
    background-repeat: no-repeat;
}

.slider_textbox_white2 {
    bottom: 40px;
    right: 60px;
    width: 32%;
    font-size: 17px;
    padding-left: 40px;
    background-image: url('pics/quote_mark_magenta.png');
    background-position: top 6px left 4px;
    background-size: 36px 24px;
    background-repeat: no-repeat;
}

.slider_qoutemark_white {
    width: 24px; 
    height: 18px; 
    vertical-align: middle;
}

.slider_text_white {
    color: #fff;
}

.slider_text_black {
    color: #3a3a3a;
}

#services_area {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px dotted #3a3a3a;
}

#news_area {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 120px;
    box-sizing: border-box;
}

.area_titles {
    position: relative;
    top: 0;
    left: 10px;
    font-family: OpSansBold;
    font-size: 20px;
    color: #e2007a;
    padding-bottom: 10px;
}

.article_titles {
    position: relative;
    top: 0;
    left: 0;
    font-family: OpSansBold;
    font-size: 20px;
    /*color: #e2007a;*/
    color:#464646;
}

.service_box {
    position: relative;
    top: 0;
    left: 0;
    float: none;
    box-sizing: border-box; 
    padding-left: 6px;
    border-left: 1px dotted #3a3a3a;
    font-family: OpSans;
}

.service_box iframe {width: 220px ; aspect-ratio: 280/156;}

.news_box {
    position: relative;
    top: 0;
    left: 0;
    float: none;
    box-sizing: border-box; 
    padding-left: 6px;
    font-family: OpSans;
    margin-bottom: 10px;
    padding-bottom: 2px;
    padding-right: 20px;
    color:#464646;
}

.news_pic {
    position: relative;
    top: 10px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}

.news_text {
    position: relative;
    top: 10px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #464646;
}

.news_title {
    display: block;
    font-family: OpSansBold;
    font-size: 20px;
    line-height: 100%;
    padding-bottom: 6px;
}

/* Medium devices (phones, tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    .service_box {
        float: none;
        left: 10px;
        min-width: 80%;
        height: auto;
        min-height: 100px;
        margin-bottom: 10px;
        padding-bottom: 2px;
        padding-right: 20px;
        font-size: 16px;
    }

    .news_box {
        float: none;
        left: 10px;
        min-width: 80%;
        height: auto;
        min-height: 100px;
        margin-bottom: 10px;
        padding-bottom: 2px;
        padding-right: 20px;
        font-size: 16px;
    }

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .positioning_title_wr {
        font-size: 24px;
    }

    .positioning_title {
        font-size: 22px;
        line-height: 22px;
    }

   /* #positioning_statement {
        width: 28%;
        border-bottom: none;
        font-size: 14px;
    }*/

    /*#main_slideshow {
        width: 68%;
    }*/

    .slider_textbox_white1 {
        bottom: 20px;
        left: 50px;
        width: 22%;
        font-size: 14px;
        padding-left: 30px;
        background-size: 24px 16px; 
    }

        .slider_textbox_white1 img {
            width: 24px;
            height: 16px;
        }

    .slider_textbox_white2 {font-size: 15px;}

    #services_area {
        height: 380px;
        min-height: 0;
    }

    #news_area {
        height: 160px;
    }

    .service_box {
        float: left;
        min-width: 0;
        width: 230px;
        height: 300px;
        margin-left: 0;
        font-size: 11px;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-right: 0;
    }

    .news_box {
        float: left;
        min-width: 0;
        width: 310px;
        height: 120px;
        margin-left: 10px;
        border-left: 1px dotted #3a3a3a;
    }

    .news_pic {
        position: absolute;
        top: 0;
        left: 6px;
        width: 38%;
    }

    .news_title {
        font-size: 13px;
    }

    .news_text {
        position: absolute;
        top: 0;
        right: 0;
        left: unset;
        width: 58%;
        font-size: 11px;
        line-height: 110%;
    }

    .news_box_right {
        width: 300px;
    }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    #positioning_statement {
        width: 366px;
        border-bottom: none;
        font-size: 15px;
    }

    .positioning_title_wr {
        font-size: 24px;
    }

    .positioning_title {
        font-size: 20px;
        line-height: 20px;
    }

    #main_slideshow {
        width: 828px;
        height: 510px;
    }

    .slider_textbox {
        font-size: 16px;
    }

    .slider_qoutemark_white {
        width: 30px; 
        height: 22px; 
    }

    .slider_textbox_white1 {
        bottom: 20px;
        left: 50px;
        width: 26%;
        padding-left: 40px;
        background-size: 36px 24px; 
        font-size: 15px;
    }

        .slider_textbox_white1 img {
            width: 36px;
            height: 24px;
        }

    .slider_textbox_white2 {font-size: 17px;}

    #services_area {
        height: 400px;
        min-height: 0;
    }

    #news_area {
        height: 155px;
        min-height: 0;
    }

    .area_titles {
        font-size: 22px;
    }

    .service_box {
        width: 290px;
        height: 350px;
        margin-left: 0;
        margin-right: 10px;
        font-size: 13px;
    }

    .service_box iframe {width: 280px;}

    .news_box {
        width: 390px;
        height: 116px;
        margin-left: 10px;
    }

    .news_box_right {
        width: 380px;
    }

    .news_title {
        font-size: 15px;
    }

    .news_text {
        font-size: 12px;
    }

} 

/*SLIDESHOW*/
.sliders {
    display: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*Dots*/
.dot {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 2px;
  background-color: none;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
    background-color: #e2007a;
}

/* Next & previous buttons */
.prev, .next {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: 50px;
  height: 14%;
  margin-top: -4.5%;
  color: white;
  transition: 0.6s ease;
  background-image: url('pics/slider_arrow_left.png');
  background-repeat: no-repeat;
  background-position: center center;
}

/* Position the "next button" to the right */
.next {
  right: 4px;
  background-image: url('pics/slider_arrow_right.png');
}

/*.next:hover, .prev:hover {
    opacity: 1;
}*/

/* A Partnerlogo slide-hoz */
#partner_slideshow {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: table;
    height: 50px;
    border-bottom: 1px dotted #3a3a3a;
    overflow: hidden;
}

#mask-gallery {
    /*display: table-cell;
    vertical-align: middle;*/
	overflow:hidden;	
}

#slider {

	/* You MUST specify the width and height */
	width: 945px;
	height: 50px;
	position:relative;	
	overflow:hidden;
}

#partner_slide_prev, #partner_slide_next {
    display: table-cell;
    width: 20px;
    cursor: pointer;
}

#gallery {
	
	/* Clear the list style */
	list-style:none;
	margin:0;
	padding:0;
	
	z-index:0;
	
	/* width = total items multiply with #mask gallery width */
	width: 945px;
	overflow:hidden;
}

	#gallery li {

		
		/* float left, so that the items are arrangged horizontally */
		float:left;
	}

