/* @import url('http://example.com/example_style.css'); */

/**
 * CSS @imports must be at the top of the file.      
 * Add them above this section.                             
 */
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');


@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500&display=swap');
/* ==========================================================================
   HS COS Boilerplate v1.5.0                                
   ========================================================================== */


/* These includes are optional, but helpful. */

.page-center.navi {
    padding-left: 2%;
    padding-right: 2%
}


.body-container-wrapper {
    padding-top: 91px;
    
}

/* ==========================================================================
   Index:         ƒ
  1. BASE STYLES   
    - Variables
    - Macros
    - Base
    - Typography
  2. COS STRUCTURE
    - Structure
    - Header
    - Content
    - Footer
  3. MAIN NAVIGATION
    - Custom Menu Primary
    - Mobile Menu
  4. TEMPLATE MODULE CLASSES
    - Common Template Classes
    - Site Pages
    - Landing Pages
    - System Pages
  5. COS COMPONENTS
    - Blog
    - Forms
    - Buttons
  6. MISCELLANOUS
  7. MOBILE MEDIA QUERIES
   ========================================================================== */








/* ==========================================================================
   1. BASE STYLES                                             
   ========================================================================== */





/* ==========================================================================
   Variables                                               
   ========================================================================== */


/**
 * Find the most consistently used font styles, colors, and container widths 
 * for your site and assign them to the jinja variables below for easy use 
 * and reference. 
 *
 * Apply the variable as shown below.  Ignore the jingja comment tags.
 *
 * 
 */

/* Colors */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
    /*  */
 

/* Typography */
            /*  */

 
                         /*  */
                          /*  */
 /*  */

/* Containers */
 /* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */




/* ==========================================================================
   Macros                                                  
   ========================================================================== */


/** 
  * Create jinja macros for CSS3 properties that need browser prefixes.
  *
  * Apply the style as shown below on it's own CSS property line.  
  * Ignore the jinja comment tags. 
  *
  * 
  */

 


/** 
  * Example of how to apply the above macro (ignore the jinja comment tags):
  *
  * a {
  *   color: red;
  *   font-size: 12px;
  *    
  * }
  */



.header-container-wrapper{
background: rgba(39,55,62,0.82);}
/* ==========================================================================
   Base                                                    
   ========================================================================== */


/** 
 * Box Sizing
 * 
 * Applies a natural box layout model to all elements so that width and padding 
 * are essentially combined, making responsive styles easier to manage.
 */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
}

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
} 

/* Website background color and default font styles */
body {
  background: #fff;
  color: #c96465;
  font-family: 'Lato', sans-serif;;
  font-size: 16px;
  line-height: 1.4;
/*    display: none; */
}
.body-container{
    background-color: #fff !important;
    margin: 0 auto;
}
.container-fluid .row-fluid .page-center {
    float: none;
    max-width: 1157px;
    margin: 0 auto;
    padding: 0px 20px 0px 20px;
}
/**
 * Page Center
 *
 * Apply .page-center to full-width modules.
 */

.container-fluid .row-fluid .page-center {
  float: none;
  max-width: 1157px;
  margin: 0 auto;
 padding: 0px 20px 0px 20px;
}

a { color: #c96465; }
a:hover, a:focus { color: #000; }

hr {
  color: #ccc;
  background-color: #ccc;
  height: 1px;
  border: none;
}

/* Highlighted Text */
::-moz-selection {
  color: #fff;
  background: #c96465;
  text-shadow: none;
}
::selection {
 
  background: #c96465;
  text-shadow: none;
}

/* Corrects width issues in table elements created via the wysiwyg editor */
table tr td img {
    max-width: initial;
}
.row-fluid [class*="span"] {
    min-height: 0px;
}


/* ==========================================================================
   Typography
   ========================================================================== */


/* Basic text */
p {
     margin: auto;
     font-family:'Lato', sans-serif;;
      word-wrap: break-word;
      -ms-word-break: break-word; 
   color: #27373e;
    font-family: 'Lato',sans-serif;
    font-size: 16px;
    line-height: 1.4;
  font-weight: 500;
}

small {}
strong {}
em {}
cite {}
code {}
pre {}

sup, sub {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* Headings */
h1, h2, h3, h4, h5, h6 {}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {}

h1 {font-family: 'Exo', sans-serif !important;font-weight: 400;margin: auto;font-size: 49px;color: white;word-break: break-word;-ms-word-break: break-word;color:#27373E;}
h2 {font-family: 'Exo', sans-serif;font-weight: 400;margin: auto;	font-size: 30px;word-break: break-word;-ms-word-break: break-word;color:#27373E;margin-bottom:16px;}
h3 {font-family: 'Exo', sans-serif;margin: auto;font-size: 1.5rem;font-weight: 400;word-break: break-word;-ms-word-break: break-word;color:#27373E;margin-bottom:16px;}
h4 {font-family: 'Exo', sans-serif;font-weight: 400;word-break: break-word;-ms-word-break: break-word;color:#27373E;margin-bottom:16px;}
h5 {font-family: 'Exo', sans-serif;word-break: break-word;-ms-word-break: break-word;font-weight: 400;margin: 0 auto;}
h6 {font-family: 'Exo', sans-serif;}

strong {
    font-weight: 600;
}


/* Lists */
ul, ol {}
ul ul, ul ol, ol ol, ol ul {}
li {}

ul.unstyled, ol.unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Quotes */
blockquote {}
blockquote p {}
blockquote small {}
blockquote small:before {}

q:before, q:after, blockquote:before, blockquote:after {}



 blockquote.icon-quotes-left:before{
  content: "\e977";
  font-size: 60px;
  right:66px;
}


.icon-quotes-left:before {
  content: "\e977";
}
blockquote {
    text-align: left;
     line-height: 1.6;
    font-size: 1.1rem;
    font-weight: 600;
    padding-left: 30px;
}

 blockquote:after {
    content: none;
    
}




img {
 
    max-width: 100%;
    height: auto;
}

.landin-page a{
    white-space: normal;
    
    text-decoration: underline;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    
    color: ;
}




/* ==========================================================================
 kari halme modul                                           
   ========================================================================== */
.sidebar-authorImage {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    overflow: hidden;
    border: 7px solid  #a01d21;
}

.sidebar-authorImage.big {
    width: 250px;
    height: 250px;
}
.sibar-imagetext {
    text-align: center;
}

.text-sidebar{
    text-align: center;
    display: block;
    float: left;
    width: 100%;
    background: #f2f2f2;
    padding: 4% 5% 4% 5%;
}


.text-sidebar.whitesmoke {
    background: #f2f2f2;
}

.text-sidebar.white {
    background: white;
}
/* ==========================================================================
   2. COS STRUCTURE                                            
   ========================================================================== */





/* ==========================================================================
   Structure                                               
   ========================================================================== */


/* The outer wrappers of your website */
.header-container-wrapper, 
.body-container-wrapper, 
/*.footer-container-wrapper {}*/
.footer-container-wrapper {
    border-top: #27373e 1px solid;
  background: #4e5b61!important;
}
/* The inner wrappers of your website */
.header-container, 
.body-container, 
.footer-container {}




/* ==========================================================================
   Header
   ========================================================================== */


.header-container-wrapper {}
.header-container {}

/* Logo styling */
.header-container .hs_cos_wrapper_type_logo {}
.header-container .hs_cos_wrapper_type_logo a {}
.header-container .hs_cos_wrapper_type_logo a img {}




.header-container-wrapper .site-header {
    max-width: 1440px;
    margin-left: auto !important;
    margin-right: auto!important;
    float: none;
}

.hs-banner-title {
    text-align: center;
    padding: 2%;
}
.site-header-wrapper{
    background: rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   
}

.header-container-wrapper {
    position: absolute;
    z-index: 10;
}


.header-center {
    padding-left: 7%;
    padding-right: 7%;
}
 .header-center-center {
    padding-left: 4%;
    padding-right: 4%;
}



.header-container-wrapper {
    background: #4e5b61;
}

.header-container-wrapper {
    position: absolute;
    width: 100%;
}


/* ==========================================================================
   end                                                
   ========================================================================== */
/* ==========================================================================
   Content                                                 
   ========================================================================== */


.body-container-wrapper {}
.body-container {

background-color:#fff !important;
}


/* Unique Pages
   ========================================================================== */

/* Homepage */
.hs-banner-title {
    text-align: center;
    padding: 2%;
}
.hs-banner-title h1 {
    font-size: 49px;
    color: white;
    margin: auto;
    text-shadow: 0px 1px 3px #000000;
}
.hs-banner-title h2 {
    font-size: 35px;
    color: white;
    margin: auto;
    text-shadow: 0px 1px 3px #000000;
}
.twin-text h2{
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    margin: auto;
    font-size: 35px;
    color: white;
    text-shadow: 0px 1px 3px #000000;
}
.hs-banner-title.blog h2{
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    margin: auto;
    font-size: 35px;
    color: white;
    text-shadow: 0px 1px 3px #000000;
    
}




@media screen and (max-width: 800px){
   .hs-banner-title h1 {
    font-size: 40px;
 
  }
}
.surf-logo {
    margin-top: 30px;
}

.white-center {
    padding:4% 4% 4% 4%;
}


.logo.dimension {
    text-align: center;
    
}




/* BUTTON */


button, button::after {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
button {
	background: none;
	border: 3px solid #fff;
	border-radius: 0px;
	color: #fff;
	display: block;
	font-family: Lato;
	font-size: 1.3rem;
	font-weight: 400;
	margin: 1em auto;
	margin: 1em auto;
	padding: 1em 6em;
	position: relative;
	text-transform: uppercase;
}
 

button.btn-2::before, button.btn-2::after{
  background: #fff;
	content: '';
	position: absolute;
	z-index: -1;
}

button.btn-2, button.btn-2::after {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

button.btn-2:hover {
	color: #4a4a4a !important;
	z-index: 5 !important;
}
/* BUTTON 1 */

.btn-1::after {
	height: 0;
	left: 0;
	top: 0;
	width: 100%;
}
.btn-1:hover:after {
	height: 100%;
}
/* BUTTON 2 */

.btn-2::after {
	height: 100%;
	left: 0;
	top: 0;
	width: 0;
}
.btn-2:hover:after {
	width: 100%;
}
/* BUTTON 3 */

.btn-3::after {
	height: 0;
	left: 50%;
	top: 50%;
	width: 0;
}
.btn-3:hover:after {
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}
/* BUTTON 4 */

.btn-4::before {
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}
.btn-4::after {
	background: #2ecc71;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}
.btn-4:hover:after {
	height: 0;
	left: 50%;
	top: 50%;
	width: 0;
}
/* BUTTON 5 */

.btn-5 {
	overflow: hidden;
}
.btn-5::after {
	/*background-color: #f00;*/
	height: 100%;
	left: -35%;
	top: 0;
	transform: skew(50deg);
	transition-duration: 0.6s;
	transform-origin: top left;
	width: 0;
}
.btn-5:hover:after {
	height: 100%;
	width: 135%;
}
.left-btn, .right-btn {
	display: inline-block;
}
.left-btn {
	padding: 0 10px 0 0;
}
.right-btn {
	padding: 0 0 0 10px;
}
.twin-buttons>div>a {
	text-decoration: none;
}
@media screen and (max-width: 800px){
button {
    padding: 1em 2em;
    font-size: 1.0rem;
    }
  .left-btn {
	padding: 0 0px 0 0;
  }
  .right-btn {
    padding: 0 0 0 0px;
  }
}



/* end */


a, a:hover, a:active {
	text-decoration: none;
	color: ;
	transition: color 0.3s ease;
}
.product-card {
	position: relative;
	z-index: 1;
	display: block;
	background: #ffffff;
	
	box-shadow: -3px 2px 20px 0px rgba(46, 61, 73, 0.15);
	border-radius: 0.375rem;
	transition: all 0.3s ease;
}
.product-card:hover {
	box-shadow: 6px 3px 8px 0px rgba(46, 61, 73, 0.2);
}
.product-card .card-thumbnail {
	overflow: hidden;
}
.product-card .card-thumbnail.img-responsive {
  border-radius: 17px 17px;
	display: block;
	width: 100%;
	-webkit-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
	-o-transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
	transition: all 0.3s cubic-bezier(0, 0.5, 0.5, 1);
}
.product-card:hover .card-thumbnail.img-responsive  {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
	opacity: 0.3;
}
.fa-send:before {
	color: #fff;
	position: absolute;
	top: 15px;
	left: 13px;
}
.product-card .card-content {
	position: absolute;
	bottom: 0;
	background: #ffffff;
	width: 100%;
	padding: 20px 30px;
	-webkti-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
	-moz-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
	-ms-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
	-o-transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
	transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;
}
.product-card .card-content .send {
	position: absolute;
	top: -60%;
	right: 35%;
	cursor: pointer;
	transition: all 1s ease;
	transition-delay: 0.3s;
	opacity: 0;
	background: transparent!important;
	border: 3px solid #46585e;
	color: #46585e;
	font-weight: 800;
	font-family: Lato;
	display: inline-block;
	text-decoration: none;
	padding: 10px 40px;
  border-radius: 5px;
}
.product-card:hover .card-content .send {
	opacity: 1;
}
.product-card .card-content .card-title {
	margin: 0;
	padding: 0 0 10px;
	color: #333333;
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
}
.product-card .card-content .card-sub-title {
	margin: 0;
	padding: 0 0 20px;
}
.product-card .card-content .description {
	display: none;
	/* height: 0px; */
}
.product-card .card-content .post-meta {
	margin: 30px 0 0;
	color: #999999;
}
.product-card .card-content .post-meta .time-stamp {
	margin: 0 80px 0 0;
}
.product-card .card-content .post-meta a {
	color: inherit;
	text-decoration: none;
}
.product-container {
	width: 100%;
	margin: 0 auto;
	display: block;
	float: left;
	padding: 0% 4% 0% 4%;
}
.container {
	width: 45%;
	display: block;
	float: left;
	margin-right: 10%;
}
.container.bgd {
	margin-right: 0%;
}
img.img-responsive {
	min-height: 500px;
}
p.description {
	padding-bottom: 40px;
	text-align: center;
}
p.tes {
    margin: auto;
}
.uk-link:hover, a:hover {
    color:black ;
}

.container a,.containera a:hover, .containera a:active{
    color:black;
}
.container.uk-link:hover, .container a:hover {
    color:black ;
}

h3.card-sub-title {
	line-height: 1em;
	font-size: 1.5em;
	
	font-weight: 400;
	text-align: center;
}
.container.one {
	margin: 0 auto;
	float: none;
}
.card-title h2 {
	font-size: 35px;
	
}
p.card-text {
	padding-top: 1%;
}
.card-title {
	display: block;
	text-align: center;
	padding: 0% 5% 2% 5%;
}
.card-Background {
	display: block;
	float: left;
	width: 100%;
}
.card-Background.whitesmoke {
	background: #f2f2f2;
}
.card-Background.white {
	background: white;
}
@media screen and (max-width: 1200px) {
	.container {
		width: 49%;
		display: block;
		float: left;
		margin-right: 2%;
	}
	.container.bgd {
		margin-right: 0%;
	}
	.product-card .card-content .send {
		right: 35%;
	}
	h3.card-sub-title {
		font-size: 1.2em;
	}
}
@media screen and (max-width: 800px) {
	.container {
		width: 100%;
		display: block;
		float: left;
		margin-right: 0%;
		margin-bottom: 2%;
	}
	p.description {
		padding-bottom: 0px;
	}
	.product-card .card-content .send {
		right: 40%;
	}
	.product-container {
	padding: 0% 2% 0% 2%;
}
.card-title {
	padding: 0% 2% 2% 2%;
}
}
@media screen and (max-width: 550px) {
	.product-card .card-content .send {
		position: absolute;
		top: -70%;
		right: 25%;
		cursor: pointer;
		transition: all 1s ease;
		transition-delay: 0.3s;
		opacity: 0;
		background: transparent!important;
		border: 3px solid #fff;
		border-radius: 0;
		color: #fff;
		font-weight: 800;
		font-family: Lato;
		display: inline-block;
		text-decoration: none;
		padding: 10px 40px;
	}
}

/*****************************************/
/*  end*/
/*****************************************/

/*****************************************/
/*  Surf 2018 download */
/*****************************************/
.download {
	min-height: 200px;
	display: block;
	float: left;
	width: 100%;
}
.download-center {
	display: block;
	float: left;
	width: 100%;
}
.download-image img {
	max-width: 100%;
	float: left;
	display: block;
	height: auto;
	margin: 0 auto;
}
.text-download {
	width: 70%;
	float: right;
	display: block;
	padding-left: 20px;
	margin: 0 auto;
	color: white;
}
.download-image {
	display: block;
	float: left;
	width: 30%;
}
.download-center p, .download-center li {
	line-height:1.5;
	font-weight: 500;
  color:white;
}
.download-center h2 {
	font-weight: 400;
	font-size: 35px;
	color:white;
}
.download-center h3 {
	
	color:white;
}
.download-center h3 {
	font-weight: 400;
	font-size: 35px;
	color:white;
}
.cta-button {
	display: block;
	float: right;
	margin: 0 auto;
	padding-top: 2%;
}
.download-center {
	
  padding: 50px 0px 50px 0px;
}
@media screen and (max-width: 768px) {
	.text-download {
		width: 100%;
		float: none;
		display: block;
		padding-left: 0px;
		margin: 0 auto;
		color: white;
	}
	.download-center {
		display: block;
		float: left;
	}
	.download-image {
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}
	.cta-button {
		display: block;
		float: none;
		margin: 0 auto;
		padding-top: 2%;
		text-align: center;
	}
	.download-center {
	padding: 2% 2% 2% 2%;
}
}


/*****************************************/
/*  end */
/*****************************************/


/*****************************************/
/*  Surf 2018 Title and normal text */
/*****************************************/

ol {
    color: #27373e;
    /* margin-bottom: 10px; */
}
.text-blue h2 {
	font-weight: 400;
	
	

}
.text-blue ul li {
    
    color: #27373e;
    
}

.text-blue ul li:before {
   
}
.blue-title.whitesmoke {
	background: #f2f2f2;
}
.blue-title.white {
	background: white;
}
.text-blue p  {
 margin-bottom: 10px;
}


.blue-title.red {
    background: #a01e21;
}


.blue-title.red  .text-blue h2 {
	color: white;

}
.blue-title.red .text-blue h3, .blue-title.red .text-blue h4 {
	color: white;
	
}

.blue-title.red  .text-blue p {
    color: white;
    font-weight: 900;
    
}
 @media screen and (max-width: 799px) {
     .text-blue {
	
   }
   .text-blue {
    padding-top: 20px;
    padding-bottom: 20px;
}
 }
/*****************************************/
/*  end */
/*****************************************/

/*****************************************/
/* Surf 2018 carusel up */
/*****************************************/

.titlecarousel {
	text-align: center;
	padding: 2%;
	float: none;
    max-width: 1240px;
    margin: 0 auto;
    top: 40%;
    position: relative;
}



.titlecarousel h1 ,.titlecarousel h2 {
	font-size: 49px;
	color: white;
	margin: auto;
	text-shadow: 0 1px 3px #000;
}
button.btn-2.center {
	text-align: center;
	margin: 0 auto;
	margin-top: 4%;
	font-weight: 800;
}

/*****************************************/
/*  end */
/*****************************************/

/*****************************************/
/* Surf 2018 two text box */
/*****************************************/



@media screen and (min-width: 600px) {
	.two-text {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin: 0rem 0 2rem;
		text-decoration: none;
		color: black;
		margin-bottom: 0px;
	}
	.left-one, .right-one {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
	}
	.left-one li:before {
  }
	.two-text-title h2 {
		text-align: center;
	}
}
@media screen and (max-width: 599px) {
	.left-one {
		padding-bottom: 2%;
	}
}
.two-text-title h2 {
	font-weight: 400;
	font-size: 35px;
	
	margin-bottom: 20px;
}
.left-one h2, .right-one h2 {
	font-weight: 400;
	font-size: 35px;
	margin-bottom: 10px;
}
.two-text-color {
	
}
.two-text-color.whitesmoke {
	background: #f2f2f2;
	border-bottom: 1px solid #cec7c740;
	border-top: 1px solid #cec7c740;
}
.two-text-color.white {
	background: white;

}

 @media screen and (max-width: 799px) {
     .two-text-color {

   }
 }
/*****************************************/
/*  end */
/*****************************************/


/*****************************************/
/* Surf 2018 Brochure */
/*****************************************/
.big-banner-container{
    background: white;
    display: block;
 	float: left;
 	width: 100%;
}

.brochure-wrapper {
 	display: block;
 	float: left;
 	width: 100%;
 }
 .lifted-product-wrapper-two {
 	margin: 1%;
 	padding: 1% 6%;
 	width: 31.3%;
 	display: block;
 	float: left;
 	text-align: center;
 }
 .brochure-wrapper a {
 	text-decoration: none;
    color: #85c9ee;
    cursor: pointer;
    font-weight: 800;
 }
 .lifted-product-image {
 	-webkit-box-flex: 0;
 	-ms-flex: 0 1 100%;
 	flex: 0 1 100%;
 	height: 15rem;
 	background-size: 100%!important;
 	background-size: cover !important;
 	background-position: center !important;
 	background-repeat: no-repeat !important;
 	position: relative;
 }
 .button-center {
 	display: block;
 	margin: 0 auto;
 	text-align: center;
 	margin-top: 2%;
 }
 .buttonblue {
 	background: #46585E;
  border-radius: 5px;
 	color: white;
 	cursor: pointer;
 	font-weight: 400;
 	text-align: center;
 	display: inline-block;
 	padding:10px 5px;
 }
 .brochure-title h3 {
 	text-align: center;
 	color: #85c9ee;
 	font-weight: 400;
 	margin-top: 2%;
 }
 p.brochure-little {
 	text-align: center;
 }
 .product-text-title h2 {
 	display: block;
 	text-align: center;
 	margin-top: 20px;
 	font-weight: 800;
 	font-size: 35px;
 	;
 }
 .product-text-title {
 	display: block;
 	float: none;
 	margin-right: 5%;
 	margin-left: 5%;
 }

 @media screen and (max-width: 1500px) {
 	.lifted-product-wrapper-two {
 		padding: 2% 2%;
 	}
 }
 @media screen and (max-width: 1000px) {
 	.lifted-product-wrapper-two {
 		width: 100%;
 	}
 	.brochure-wrapper img {
    margin: 0 auto;
    text-align: center;
    display: block;
  }
 }
 @media screen and (max-width: 799px) {
 	.lifted-product-image {
 		min-height: 300px;
 		background-size: 100%!important;
 		background-size: cover !important;
 		background-position: center !important;
 		background-repeat: no-repeat !important;
 		position: relative;
 	}
 	.lifted-product-wrapper {
 		width: 70%;
 		display: block;
 		margin: 0 auto;
 		margin-top: 5%;
 	}
 	.brochure-wrapper {
 		display: block;
 		width: 100%;
 		float: none;
 		margin: 0 auto;
 	}
 
 	.product-text-title {
 	margin-right: 2%;
 	margin-left: 2%;
 }
 .lifted-product-wrapper-two {
 	margin: 0%;
 }
 
.brochure-wrapper img {
    margin: 0 auto;
    text-align: center;
    display: block;
  }
 }
 
 @media screen and (max-width: 500px) {
 	.lifted-product-wrapper {
 		width: 100%;
 		display: block;
 		margin: 0 auto;
 		margin-top: 5%;
 	}
 	.lifted-product-wrapper-two {
 		margin: 0%;
 	}
 }


/*****************************************/
/* end*/
/*****************************************/

/*****************************************/
/* Form modul*/
/*****************************************/

.orange-button {
  	font-size: 15px;
  	font-family: 'Roboto Slab', sans-serif;
  	background: #fa6e0a;
  	color: #fff;
  	padding: 5px 37px 8px;
  	display: inline-block;
  	vertical-align: top;
  	cursor: pointer;
  	border: 0;
  	text-decoration: none;
  	-webkit-appearance: none;
  	-webkit-transition: all .3s ease;
  	-moz-transition: all .3s ease;
  	-ms-transition: all .3s ease;
  	-o-transition: all .3s ease;
  	transition: all .3s ease;
  }
  p.orange-button:hover {
  	background: #444;
  }
  .cell-wrapper.investi {
  	padding-left: 1.5%;
  }
  div.panel, p.flip {
  	margin: 0px;
  	padding: 5px;
  	text-align: center;
  }
  div.panel {
  	width: 100%;
  	display: none;
  }
  .flip.button {
  	background: #c96465;
  	color: white;
  	cursor: pointer;
  	font-family: 'Lato', sans-serif;
  	font-weight: 800;
  }
  .flip.button.contact {
  	margin-bottom: 2%;
  	width: 15%;
  	margin: 0 auto;
  	margin-bottom: 2%;
  	text-align: center;
  	padding: 0.5%;
    margin-top: 2%;
  }
  .text-form {
  	text-align: center;
  	padding-top: 2%;
  }
  .text-form h2 {
  	padding: 0 0 10px;
  	margin: 0 0 10px;
  }
  .form-box {
  	text-align: center;
  	display: block!important;
  	margin: 0 auto!important;
  	max-width: 500px!important;
  	float: none !important;
  }
  .intro-text h2 {
  	padding: 0 0 10px;
  	margin: 0 0 10px;
  }
  .middle.box {
  	padding: 3%;
  }
  .intro-text {
  	padding: 2%;
  	color: white;
  }
  .middle-big {
  	padding-left: 1.5%;
  	padding-right: 1.5%;
  }
  .middle-big.gray {
  	background: #d9d9d9;
  	padding-top: 2%;
  }
  .intro-text h2 {
  	text-align: center;
  }
  .flip.button.contact {
  	display: block;
  	float: none;
  }

  .form-color{
    display: block;
    float: left;
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
  }

.form-color.white{
   background: white;
  }
  
 .form-color.whitesmoke{
    background: #f2f2f2;
}
body input[type="text"], body input[type="password"], body input[type="datetime"], body input[type="datetime-local"], body input[type="date"], body input[type="month"], body input[type="time"], body input[type="week"], body input[type="number"], body input[type="email"], body input[type="url"], body input[type="tel"], body input[type="color"], body input[type="file"], body textarea, body select {
    width: 100%;
    font-family: 'Lato', sans-serif!important;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    -ms-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
    padding: 4px 6px;
    font-size: 18px;
    line-height: 20px;
    color: #555;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
    border-radius: 0px;
}
body .hs-form-field {
    margin-bottom: 15px;
}

a.hs-button.large.primary {
    background: #D8C090 !important;
    border: 0px solid  #D8C090;
    border-radius: 5px;
    color: white;
    display: block;
   	font-family: 'Lato', sans-serif;
    font-weight: 800;
    margin: 1em auto;
    padding: 15px 30px;
    display: inline-block;
    text-decoration: none;
     text-transform: uppercase;
    font-size: 16px;
    
}


input.hs-button.primary.large {
    background: #D8C090 !important;
    border: 0px solid  #85c9ee;
    border-radius: 5px;
    color: white;
    display: block;
   	font-family: 'Lato', sans-serif;
    font-weight: 800;
    margin: 1em auto;
    padding: 15px 30px;
    display: inline-block;
    text-decoration: none;
     text-transform: uppercase;
     font-size: 16px;
}
@media screen and (max-width: 768px) {
    .flip.button.contact {
  	width: 100%;
  	margin-top: 2%;
  	margin-bottom: 4%;
  	text-align: center;
  	padding: 2%;
  
  
  }
}
/*****************************************/
/* end*/
/*****************************************/


/*****************************************/
/* Surf 2018 video and image text*/
/*****************************************/

@media screen and (min-width: 800px) {
	.blogi-landing {
    display: block;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin: 0rem 0 2rem;
		text-decoration: none;
		color: black;
		margin-bottom: 0px;
	}
	.landingtext {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
		padding: 1rem 1rem 1rem;
		padding-top: 0px;
		padding-bottom: 0px;
    display:block;
    width: 49%;
    float: right;
     display: block;
	}
	.landingtext h2 {
		font-weight: 400;
		
		margin-bottom: 20px;
	}
	.landing-image-ty {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
     width: 49%;
    float: left;
     display: block;
	}
  
 .landing-image-ty img {
    max-width: 100%;
    height: auto;
    width: 100%;
   border-radius: 5px;
}
	.video {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 50%;
		flex: 1 1 50%;
	}
	.text-box-color {
		display: block;
		float: left;
		width: 100%;
	
	}
	.text-box-color.whitesmoke {
		border-bottom: 1px solid #cec7c740;
		border-top: 1px solid #cec7c740;
		background: #f2f2f2;
	}
	.text-box-color.white {
	    background: white;
	    
	}   
	.landing-image-ty {
		
	}
}
@media screen and (max-width: 799px) {
	.landingtext {
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.landing-image-ty {
		
	}
	
	.landing-image-ty {
		background-position: center !important;
		background-repeat: no-repeat !important;
		background-size: cover !important;
	}
	.landingtext h2 {
		
	}
	.blogi-landing {
		padding: 2%;
	}
	.text-box-color.whitesmoke {
		border-bottom: 1px solid #cec7c740;
		border-top: 1px solid #cec7c740;
		background: #f2f2f2;
	}
	.text-box-color.white {
	   background:white;
	}
}




/*****************************************/
/* end*/
/*****************************************/



/*****************************************/
/* Surf 2018 Box pinnat three */
/*****************************************/


.image-background {
 	height: 253px;
 }
 .blue-box {
 	display: block;
 	float: left;
 	width: 28.7%;
 	margin-right: 2%;
 	-webkit-box-shadow: 0px 1px 17px 4px rgba(0, 0, 0, 0.19);
 	box-shadow: 0px 1px 17px 4px rgba(0, 0, 0, 0.19);
 	margin-top: 2%;
 	background: white;
 }
 .blue-box.one {
 	margin-left: 5%;
 }
 a .blue-box {
 	color: black;
 }
 .box {
 	padding: 4%;
 	text-align: center;
 	padding-bottom: 10%;
 }
 h3.text-box {
 	display: block;
 	position: relative;
 	margin-top: -20px;
 	font-size: 15px;
 	text-align: center;
 	padding: 2%;
 	background: #c96465;
 	text-transform: uppercase;
 	font-weight: 700;
 	margin-left: 15%;
 	margin-right: 15%;
   color:white;
 }
 .ttl h2 {
 	text-align: center;

 	
 	font-weight: 400;
 	font-size: 35px;
 }
 .blue-box:hover {
 	opacity: .8;
 	transition: opacity .2s ease-in-out;
 	-webkit-transition: opacity .2s ease-in-out;
 	-moz-transition: opacity .2s ease-in-out;
 	-ms-transition: opacity .2s ease-in-out;
 	-o-transition: opacity .2s ease-in-out;
 }
 .txt, .ttl {
 	margin-left: 5%;
 	margin-right: 5%;
 }
 
 .txt{ 
     margin-top: 10px;
 
 }
 
 .big-banner-container.whitesmoke {
 	background: #f2f2f2;
 	display: block;
 	float: left;
 	width: 100%;
 }
 .big-banner-container.white {
 	background: white;
 	
 }
 .big-banner-container.lightbrown {
 	background: #F6F0E3;
 	
 }

 @media screen and (max-width: 678px) {
 	.blue-box {
 		width: 96%;
 		margin-right: 2%;
 		margin-left: 2%;
 		background: white;
 	}
 	.blue-box.one {
 		margin-left: 2%;
 	}
 	.txt, .ttl {
 	margin-left: 2%;
 	margin-right: 2%;
 }
 }


/*****************************************/
/* end*/
/*****************************************/



/*****************************************/
/* Surf 2018 Box pinnat two*/
/*****************************************/


.blue-box.big {
    width: 44.5%;
    margin-right: 1%;
    min-height: 600px;
}

.blue-box.big.bg {
    margin-left: 5%;
}
.image-background.big {
    height: 400px;
}
@media screen and (max-width: 678px) {
.blue-box.big {
    width: 96%;
    margin-right: 1%;
    min-height: 600px;
}
  .blue-box.big.bg {
    margin-left: 2%;
    margin-right: 2%;
}
}



/*****************************************/
/* end*/
/*****************************************/

/*****************************************/
/* Surf 2018 Classes modul. Left image and right text*/
/*****************************************/
.blog-card {
	transition: height 0.3s ease;
	-webkit-transition: height 0.3s ease;
	background: #fff;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 17px 4px rgba(0, 0, 0, 0.19);
	box-shadow: 0px 1px 17px 4px rgba(0, 0, 0, 0.19);
	margin: 0 auto 1.6%;
	overflow: hidden;
	position: relative;
	line-height: 1.45em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-bottom: 0px;
}
.blog-card a {
  color:#27373E;
	
}
.blg-title h2 {
	text-align: center;
	font-weight: 400;
	font-size: 35px;
	padding-bottom: 2%;
  color: #27373E;
}
.blog-card .photot {
	height: 200px;
	position: relative;
}

.blog-card .details {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	background: rgba(0, 0, 0, 0.6);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #fff;
	list-style: none;
	margin: 0;
	padding: 10px 15px;
	height: 200px;
	/*POSITION*/
	position: absolute;
	top: 0;
	left: -100%;
}
.blog-card .details li:before, .blog-card .details .tags ul:before {
	font-family: FontAwesome;
	margin-right: 10px;
	vertical-align: middle;
}
.blog-card .description {
	padding: 3%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
.blog-card .description h3 {
	line-height: 1em;
	margin: 0 0 10px 0;
	font-weight: 400;
	font-size: 1.5em;

}
.blog-card .description p {
	position: relative;
	margin: 0;
	padding-top: 20px;
}
.blog-card .description p:after {
	content: "";
	
	height: 6px;

	/*POSITION*/
	position: absolute;
	top: 6px;
	left: 0;
}
.blog-card .description a {
	color: ;
	margin-bottom: 10px;
	float: left;
}
.blog-card .description a:after {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	content: "\f061";
	font-family: FontAwesome;
	margin-left: -10px;
	opacity: 0;
	vertical-align: middle;
}
.blog-card .description a:hover:after {
	margin-left: 5px;
	opacity: 1;
}
.blg.whitesmoke {
	background: #f2f2f2;
}
.blg.white {
	background: white;
}
.blg {
	padding-bottom: 1%;
	padding-top: 1%;
	display: block;
	float: left;
	width: 100%;
}
.blg-text {
	text-align: center;
	padding-bottom: 2%;
}
p.small-title {
	padding-bottom: 2%;
}
.blg {
    padding-left: 2%;
    padding-right: 2%;
}
h4.read.more {
    color: ;
    float: left;
    font-size: 18px;
    margin: auto;
     margin-top: 10px;
    padding: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}


@media screen and (min-width: 700px) {
	.blog-card {
		height: 300px;
		max-width: 90%;
	}
	.blog-card:hover .photot {
		-webkit-transform: rotate(5deg) scale(1.3);
		transform: rotate(5deg) scale(1.3);
	}
	.blog-card:hover.alt .photot {
		-webkit-transform: rotate(-5deg) scale(1.3);
		transform: rotate(-5deg) scale(1.3);
	}
	.blog-card.alt .details {
		padding-left: 30px;
	}
	.blog-card.alt .description {
		float: right;
	}
	.blog-card.alt .description:before {
		-webkit-transform: skewX(5deg);
		transform: skewX(5deg);
		right: -15px;
		left: inherit;
	}
	.blog-card.alt .photot {
		float: right;
	}
	.blog-card .photot {
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		float: left;
		height: 100%;
		width: 39.5%;
	}
	.blog-card .details {
		width: 40%;
	}
	.blog-card .description {
		float: left;
		width: 60%;
		z-index: 0;
		height: 300px;
	}
	.blog-card .description:before {
		-webkit-transform: skewX(-8deg);
		transform: skewX(-8deg);
		content: "";
		background: #fff;
		width: 100%;
		z-index: -1;
		/*POSITION*/
		position: absolute;
		left: -21px;
		top: 0;
		bottom: 0;
	}
	h4.read.more {
		color: ;
		margin-bottom: 10px;
		float: left;
        font-size: 18px;
      
	}
	.blog-card .description h4.read.more:after {
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		
		margin-left: -10px;
		opacity: 0;
		vertical-align: middle;
	}
	.blog-card .description h4.read.more:hover:after {
		margin-left: 5px;
		opacity: 1;
	}
	.blg-text {
		text-align: center;
		padding-bottom: 2%;
		margin-left: 5%;
		margin-right: 5%;
	}
	.blg-title {
		margin-left: 5%;
		margin-right: 5%;
	}
	.blg {
    padding-left: 0%;
    padding-right: 0%;
  }
}

/*****************************************/
/* end*/
/*****************************************/
/*****************************************/
/*Surf 2018 carusel center*/
/*****************************************/

.carousel-wrap {
	margin: auto;
	width: 100%;
	position: relative;
}
/* fix blank or flashing items on carousel */

.owl-carousel .item {
	position: relative;
	z-index: 100;
	-webkit-backface-visibility: hidden;
}
/* end fix */

.owl-nav>div {
	margin-top: -26px;
	position: absolute;
	top: 50%;
	color: #cdcbcd;
}
.owl-nav i {
	font-size: 52px;
}
.owl-nav .owl-prev {
	left: 65px;
}
.owl-nav .owl-next {
	right: 65px;
}
.carousel-up {
	height: 100vh;
}
.facialimage {
	height: 130px;
	width: 130px;
	margin-right: 40px;
  border-radius: 100%;

}
.text-boxit {
	max-width: 880px;
	margin: auto;
	float: none;
}
.text {
	display: inline-block;
	width: 76%;
	margin-left: 45px;
	margin-top: 40px;
	padding: 1%;
}
.nametitle {
	color: #333;
	font-size: 15px;
	line-height: .9;
	float: left;
	width: 100%;
	display: block;
	margin-left: 1%;
}
span.star {
}

h2.title {
	text-align: center;
	font-weight: 400;
	padding-top: 20px;
	padding-bottom: 20px;
}
.owl-carousel.owl-drag .owl-item a {
	text-decoration: none;
}
a h2.title {
	text-decoration: none !important;
}
a .carousel {
	text-decoration: none;
}


h2.title.white {
    background: white;
    
}
h2.title.whitesmoke {
    background: #f2f2f2;
}




/*****************************************/
/* end*/
/*****************************************/

/*****************************************/
/* Surf new Carousel 2018*/
/*****************************************/

.carousel-wrap {
	margin: auto;
	width: 100%;
	position: relative;
}

/* fix blank or flashing items on carousel */

.owl-carousel .item {
	position: relative;
	z-index: 100;
	-webkit-backface-visibility: hidden;
}
/* end fix */

.owl-nav>div {
	margin-top: -26px;
	position: absolute;
	top: 50%;
	color: #cdcbcd;
}
.owl-nav i {
	font-size: 52px;
}
.owl-nav .owl-prev {
	left: 65px;
}
.owl-nav .owl-next {
	right: 65px;
}
.carusell {
	min-height: 560px;
}
.text-boxit {
	max-width: 880px;
	margin: auto;
	float: none;
}
.text {
	display: inline-block;
	width: 76%;
	margin-left: 45px;
	margin-top: 40px;
	padding: 1%;
}
.nametitle {
	color: #333;
	font-size: 15px;
	line-height: .9;
	float: left;
	width: 100%;
	display: block;
	margin-left: 1%;
}
span.star {
	color: #85c9ee;
}

.white-box {
    width: 100%;
    display: block;
    float: left;
    min-height: 200px;
    bottom: 0;
}
.white-box p{
	font-size:18px;
}
h2.title {
	text-align: center;
	font-weight: 400;
	
	font-size: 35px;
}
.owl-carousel.owl-drag .owl-item a {
	text-decoration: none;
}
.title-carusel {
	margin: 0 auto;
	text-align: center;
	position: relative;
	top: 40px;
	z-index: 999;
	color: white;
}
a h2.title {
	text-decoration: none !important;
}
a .carusell {
	text-decoration: none;
}


h3.compani {
    text-align: center;
    padding-top: 4%;
    color: white;
    padding-right: 1%;
    padding-left: 1%;
}
@media screen and (max-width: 800px) {
    .white-box {
    width: 100%;
    display: block;
    float: left;
    min-height: 350px;
    vertical-align: bottom;
    position: relative;
    bottom: 0;

}

.text {
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-top: 20px;
    padding: 2%;
    text-align: center;
}

.nametitle {
    color: #333;
    font-size: 15px;
    line-height: .9;
    float: none;
    width: 100%;
    display: block;
    margin-left: 1%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
}

/*****************************************/
/* end*/
/*****************************************/
/*****************************************/
/*Surf 2018 icons modul*/
/*****************************************/
.big-icons {
    display: block;
    float: left;
    width: 100%;
}
.icons-moduli-center {
   margin: 1%;
    width: 31.3%;
    display: block;
    float: left;
    text-align: center;
    padding-left: 6%;
    padding-right: 6%;
}

.icons-modul {
    height: 80px;
}

.icons-modul .fa{
    font-size: 60px;
    ;
}

.icons-colors {
    display: block;
    width: 100%;
    float: left;
    background: #f2f2f2;
}

.icons-colors.whitesmoke{
     background: #f2f2f2;
}
.icons-colors.white{
     background: white;
}

.icons-image {
    height: 240px;
}

h3.icons-title {
   text-align: center;
   padding-left: 4%;
    padding-right: 4%;
    
}
span.icons-text {
    padding-top: 20px;
    display: block;
}

@media screen and (max-width: 1000px) {

.icons-moduli-center {
    margin: 0%;
    width: 100%;
    display: block;
    float: left;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
}

h3.icons-title {
   text-align: center;
   padding-left: 2%;
    padding-right: 2%;
    
}
}





/*****************************************/
/* end*/
/*****************************************/




/*****************************************/
/* footer*/
/*****************************************/

.footer {
	background: #f2f2f2;
}
.footer p{
    font-size:14px;
	
}
.footer a {
	color: #333;
	text-decoration: none;
}
.footer ul {
	list-style: none;
	padding: 0px;
	font-size: 14px;
}
.footer .puh {
	padding-top: 2%;
}
.footer-color .icon {
	float: right;
	text-align: end;
}
.footer-color {
	background: #d8d8d8;
}
.second {
	padding: 1% 4% 1% 4%;
}
.vipu {
	margin-top: 10px;
}
.footer h3 {
    font-family: 'Lato', sans-serif;
    margin: auto;
    font-size: 1.1rem;
    font-weight: 400;
    color: black;
}
.circle-bg {
	border-radius: 50%;
	border: 1px solid #4a4a4a;
	width: 40px;
	height: 40px;
	display: inline-block;
	float: left;
	margin: 0 10px 0 0;
	text-align: center;
	background: #4a4a4a;
	font-size:27px;
	color: #f2f2f2;
}
.circle-bg .svg-inline--fa {
	position: relative;
	top: 7px;
	color: #f2f2f2;
	text-decoration: none;
}
.social-media-icons {
	display: inline-block;
	float: right;
}
.contact-ass {
	float: right;
	display: block;
	margin: 0 auto;
}
.page-center.form-center {
	padding: 2%;
}



/*Test*/


.rotate {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.fa-chevron-down {
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display: inline-block;
}



/*blog  code listing page*/

/* Blog Listing */
body.hs-blog-listing .row-fluid .listingFull { width:100%; margin-left:0; }
body.hs-blog-listing .row-fluid .listingHide { display:none; }
.hs-banner-title.blog {
    margin-top: 260px;
}


body.hs-blog-listing .row-fluid .listingFull {
    width: 100%;
    margin-left: 0;
}
 .container-fluid .row-fluid .wrapper {
    float: none;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 4%;
    padding-right: 4%;
}


.postListing {
   
    display: block;
}
.hs-banner-image.blogit {
    height: 50vh;
}
.page-center.blogit {
    position: relative;
    top: 40%;
}
.postListing .itemWrap {
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
    margin-right: -4px;
    padding: 15px;
}

.postItem {
    position: relative;
    width: 100%;
    display: block;
}

.postItem .ListingImage {
    position: relative;
    width: 100%;
    display: block;
    padding-bottom: 69%;
    overflow: hidden;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    -ms-transition: all ease .4s;
    transition: all ease .4s;
}
.set-bg, .bg, .overlay {
    background-size: cover;
    background-position: center;
    position: relative;
  
}

.clearfix p a{
    color:black;
}

.postItem:hover {
   background: white;
    -webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
}


.postItem:hover .ListingImage:before {
    opacity: 0;
}
.postItem .ListingImage:before {
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    opacity: .5;
    z-index: 1;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    -ms-transition: all ease .4s;
    transition: all ease .4s;
}
.postItem .listingContent {
    text-align: left;
    padding: 30px 25px;
    border: 1px solid #eaeaea;
}
.postItem .listingContent h3 a{
    color:black;
  
}
.font14 p{
    font-size: 18px;
     
}

.listingBody.clearfix p{
    font-size: 18px;
   
     font-weight: 300;
}

.listingContent.font14 h3 a{
    
     font-size: 20px;
     font-weight: 400;
     
}

a.topic-link {
    font-size: 14px;
    font-weight: 300;
     
     color:black;
}

.postItem .ListingImage p.readMore {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    z-index: 5;
    border-color: #fff;
    opacity: 0;
}

.buttoni a, a.buttoni, p.readMore{
    padding: 10px 30px 10px;
    background: #4095b0;
    text-decoration: none;
    border: 2px solid #4095b0;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 400;
}
.buttoni a:hover, a.buttoni:hover, .buttoni.opposite a, a.buttoni.opposite, p.readMore {
    background: transparent;
}

.postItem:hover .ListingImage p.readMore {
    opacity: 1;
   
}
.postItem .ListingImage p.readMore {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    -o-transform: translate3d(-50%,-50%,0);
    -ms-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    z-index: 5;
    border-color: #fff;
    opacity: 0;
}
.button a:hover, a.button:hover, .button.opposite a, a.button.opposite {
    background: transparent;
}

.postItem .ListingImage:hover:after {
    content: '';
    width: 100%;
    height: 100%;
   background: rgba(39,55,62,0.82);
    left: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
    opacity: 2.1;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -o-transition: all ease .4s;
    -ms-transition: all ease .4s;
    transition: all ease .4s;
}


.blogPagination {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: block;
}
.pt40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.text-center {
    text-align: center;
}


.blogPagination li a {
    width: 30px;
    height: 30px;
    text-align: center;
    text-decoration: none;
    color: black;
    line-height: 30px;
    display: block;
}

.blogPagination li {
    display: inline-block;
}
.blogPagination li.disabled {
    display: none;
}

.icon-tag:before {
    content: "\e91b";
    color: #a02023;
}

 
 @media (max-width: 991px) {
.postListing .itemWrap {
    width: 50%;
}
}

@media (max-width: 600px){
.postListing .itemWrap {
    width: 100%;
   
}
}
/*test end*/


 /*blog drop menu;*/
.mobile-menun {
    top: 0px;
    position:relative;
    color: white;
    width: 280px;
     background: ;
}
.mobile-menun {
    margin: 0 auto;
    text-align: left;
    float: left;
}


.languagepickeri {
	background-color: ;
	/*display: inline-block;*/
	padding: 0;
	
	vertical-align: top;
	float: left;
	width: 100%;
   position: absolute;
    /*border:1px solid ;*/
    font-weight: 600;
    z-index:11;
    margin-top: 0px;
     padding-bottom: 10px;
      background: ;
    
}

.languagepickeri{
	display:none;
}

.languagepickeri a{
	text-decoration: none;
}

.languagepickeri li {
	display: block;
	padding: 0px 20px;
    line-height: 22px;
	font-size: 24px;
	background:#27373e;
	font-family: 'Work Sans', sans-serif;
}
.languagepickeri li a{
   color:white;
}

a.dropdown-linki {
    padding: 0px 20px;
    color:white;
    background: #27373e;
    font-weight: 600;
    font-size: 24px;
    font-family: 'Work Sans', sans-serif;
}

.dropdown-linki {
    padding: 0px 20px;
    color:white;
    background: #27373e;
    font-weight: 600;
    font-size: 24px;
    font-family: 'Work Sans', sans-serif;
}
.dropdown-linki > .icon-chevron-down {
    position: relative;
    top: 5px;
}

.languagepickeri ul{
    padding:0px;
   background: #a02023;

}

 .dropdown-linki i.icon-caret-down {
    float: right;
    padding-right: 10px;
  
}
.dropdown-linki .icon-caret-down:before {
    content: "\e91d";
    color: white;
    font-size:16px;
}

.topic-listing {
    padding-top: 60px;
    padding-bottom: 40px;
}

.post-topic {
   
    padding-bottom: 40px;
}

 @media (max-width: 991px) {
  .post-topic {
   padding-top: 20px;
    padding-bottom: 20px;
   }
  .container-fluid .row-fluid .wrapper {
    padding-left: 2%;
    padding-right: 2%;
   }
   .page-center.blogit {
    top: 61%;
}
}
 
/*end*/
/*referensi navi*/

.three-long-menu li.hs-menu-item.hs-menu-depth-1 {
    display: inline-block;
    margin: 1px 1px;
    text-decoration: none;
    padding: 0px 60px;
    color: white;
    background: #cb8587;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Work Sans', sans-serif;
    text-align: center;
    float: left;
    text-transform: uppercase;

}
.three-long-menu li.hs-menu-item.hs-menu-depth-1.active.active-branch {
     background: ;
}

.red-menu ul {
    float: left;
    padding: 0px;
    margin: 0 auto;
    width: 100%;
    display: block;
}
.red-menu {
     padding-top: 60px;
    padding-bottom: 43px;
    display: block;
    float: left;
}
  

@media (max-width: 767px){
.three-long-menu li.hs-menu-item.hs-menu-depth-1 {
 width: 100%;

}

}


/*end*/



.related-title h3 {
    font-family: 'Work Sans', sans-serif;
    margin: auto;
    font-size: 16px;
    font-weight: 400;
    color: #7d7d7d;
    word-break: break-word;
    -ms-word-break: break-all;
    margin-bottom: 10px;
}
.related-image {
    display: block;
    float: right;
    width: 49%;
    margin-bottom: 10px;
     margin-left: 1%;
     margin-top: 10px;
    
}
.related-post-item {
    display: block;
    width: 100%;
    float: left;
    margin-bottom: 1%;
}

.image.post-blog {
    width: 35%;
    float: right;
    padding: 0 5px 0 0;
     font-family: 'Work Sans', sans-serif;
}

img.hs-featured-image-blog {
    width: 100%;
}

.posti-image {
    height:300px;
    margin-bottom:20px;
}


@media (max-width: 768px){
    .posti-image {
    height: 200px;
    margin-bottom:25px;
     
  }
  .page-center.blog h1{
      font-size:35px;
  }
 }

a.author-link {
    color: white;
    font-weight: 800;
}
.post-border {
    margin-bottom: 23px;
    padding-bottom: 23px;
    border-bottom: 1px solid #d4d4d4;
    display: block;
    float: left;
    width: 100%;
}

.related-title h3 {
   width: 65%;
    float: left;
    padding: 0px 5px 0 5px;
    line-height: 1.4;
}

.section-heading-line h2 {
    font-size: 20px;
    margin-bottom: 10px;
}
.font24 {
    font-size: 19px;
    color: white;
}


.font24 h2, .font24 h3, .font24 h3{
    color: white;
   
}


.surf-blog-email.widget-type-blog_subscribe input[type=email] {
   font-family: 'Work Sans', sans-serif;
    padding: 6px;
    width: 100%;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 1px;
    background-color: whitesmoke;
    font-size: 14px;
    font-size: .875rem;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow:none;
    /* box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); */
    -webkit-transition:none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition:none;
}

.hs-input.invalid.error {
    background-color: rgba(240,99,98,0.25) !important;
}

.surf-blog-email.widget-type-blog_subscribe form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
     
}

.surf-blog-email ul.inputs-list.hs-error-msgs {
    position: absolute;
    background-color: #a01d21;
    -webkit-border-radius: .25rem;
    border-radius: .25rem;
    padding: 5px 10px;
    padding: .3125rem .625rem;
    list-style: none;
    margin: 0;
    font-size: 12px;
    font-size: .75rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 10px;
    margin-top: .625rem;
    z-index: 2;
}


.section.post-body blockquote:before{
  content: "\e977";
  font-size: 60px;
  right:66px;
  font-family: 'swag-icon' !important;
  
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
      position: relative;
    top: 36px;
}



i.icon-quotes-left:before{
  content: "\e977";
  font-size: 60px;
  right:66px;
  font-family: 'swag-icon' !important;
  
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}



.section.post-body blockquote {
    text-align: left;
     line-height: 1.6;
    font-size: 1.2rem;
    font-weight: 600;
    
    padding-left: 30px;
}

.section.post-body blockquote:after {
    content: none;
    
}

.section.post-body p{
    line-height: 1.6;
    font-size: 1.1rem;
}

.section.post-body a {
    white-space: normal;
    text-decoration: underline;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    font-weight: 600;
    
  padding: 15px 0 15px;

}

sup {
    display: block;
    float: left;
     line-height: 1.6;
    font-size: 1.1rem;
    border-left: 2px solid ;
    margin-left: 30px;
    padding-left: 20px;
    font-weight: 800;
    padding-right: 10%;
}

.surf-blog-email ul.inputs-list li {
    display: inline-block;
    
}
.surf-blog-email ul.inputs-list.hs-error-msgs:before {
    content: "";
    height: 0;
    width: 0;
    border: 10px solid transparent;
    position: absolute;
    border-bottom-color: #a01d21;
    bottom: 100%;
}


.surf-blog-email input.hs-button.primary.large {
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
   font-size: 12px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0 none;
    color: #fff;
    margin-top: 10px;
    margin-top: .625rem;
    padding: 10px 20px;
    text-transform: uppercase;
}
.hs-form-field {
    flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
}


.span8.socialSharing {
    padding-top: 20px;
    padding-bottom: 5%;
}
ul.inputs-list label {
    margin: 0;
}

.surf-blog-email h3 {
    font-size: 1.1rem;
    
}

/*end*/

/*custom modul*/

.referensi-box {
    display: block;
    float: left;
    background:#eaf3df;
    padding: 3%;
    width: 100%;
    margin-bottom: 20px;
    margin-top: 0px
}
.referensi-box li{
    font-size:14px;
   color: #27373e;
   
    
}
span.arkkitehti {
    font-weight: 800;
}
.referensi-box h3 {
    font-size:20px;
   color: #27373e;
    margin-left: 25px;
}

.referensi-box li.diamond:before {
   
     
     position: relative;
    margin-left: -19px;
    margin-right: 6px;
    top: 0px;

}    


.referensi-box ul, .referensi-box ol {
    padding-left: 25px;
}


@media (max-width: 678px){
    .referensi-box {
    margin-bottom: 20px;
    margin-top: 20px
}

}


/*end*/


/*Blog referensi custom modul*/
    .row-padding{
    padding: 0 8px;
    padding-bottom: 20px;
    display: block;
    float: left;
}


.col, .half, .third, .twothird, .threequarter, .quarter {
    float: left;
    width: 100%;
}
@media (min-width: 601px){
.col.m4, .third {
    width: 33.33333%;
    display: block;
    float: left;
    margin: 0 auto;

}
}

.container-box {
   text-align: center;
   padding-bottom: 30px;
   padding-top: 30px;
}


img {
    vertical-align: middle;
}
img {
    border-style: none;
}
.modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
img#img01 {
    cursor:pointer;
} 
 
.animate-zoom {
    animation: animatezoom 0.6s;
}
@media (min-width: 993px){
.modal-content {
    width: 900px;
}
}
.modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}

@media (max-width: 768px){
.modal-content {
    width: 500px;
}
}
@media (max-width: 600px){
.modal-content {
    margin: 0 10px;
    width: auto!important;
}
}
.modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}
 .w3-hover-opacity:hover{
    opacity: 0.60;
}

.box-lightbox {
    display: block;
    float: left;
    background: #f2f2f2;
    padding-bottom: 40px;
}

.white-centerline {
    display: block;
    float: left;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    background: white;
}
/*end*/

/*referenssit menu*/

.three-long-menu li.hs-menu-item.hs-menu-depth-1 {
  display: inline;
    margin: 1px 1px;
    text-decoration: none;
    padding: 0px 60px;
    color: white;
    background: #cb8587;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Work Sans', sans-serif;
    text-align: center;
    float: left;
    text-transform: uppercase;

}
.three-long-menu li.hs-menu-item.hs-menu-depth-1 a{
    color:white;
  

}
.three-long-menu li.hs-menu-item.hs-menu-depth-1.active.active-branch {
     background: ;
}
.red-menu ul {
    float: left;
    padding: 0px;
    margin: 0 auto;
}

.red-menu {
    padding-top: 60px;
    padding-bottom: 43px;
    display: block;
    float: left;
}
  

@media (max-width: 767px){
.three-long-menu li.hs-menu-item.hs-menu-depth-1 {
 width: 100%;

}

}
/*end*/

/*Langing page */



.landin-page {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 4%;
    padding-bottom: 4%;
}
.input {
    margin-top: 5px;
}

.landing-title h2, .landing-title h3{
    color:black;
}

.hs-banner-title.landing {
    margin-top: 200px;
}

 
p.border {
    display: block;
    background-color: #ACCF81;
    width: 10em;
    height: 3px;
    margin: 20px 0 20px 0px;
    border: none;
}

.landin_form .hs-input {
       background: #fff;
}

.landin_form .hs-fieldtype-text label, .contact_card_form_white .hs-fieldtype-textarea label {
    position: relative;
    top: 4px;
    left: 10px;
   
    color: #A3ACAF;
}

.landin_form input:not([type="submit"]), .contact_card_form_white textarea, .contact_card_form_white select {
    margin: 5px 0;
      border: 1px solid #D8C090;
    outline: 0;
   
    border-radius: 8px;
    padding: 10px 22px 10px;
   -webkit-appearance: none;
    -moz-appearance:none;
}

.landin_form textarea {
    resize: vertical;
    padding: 22px;
   
}

.landin_form [type="submit"] {
   /* padding: 15px 70px;
    background: #EE8062;
    border-radius: 24px;
    font-family: Lato;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 19px;
    border: 0;
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    color: #fff;
	  cursor:pointer;
    width: 200px;
    margin-top: 30px; */
  margin-top: 10px;
  border: 10px solid black;
  color: #fff;
  background: #EE8062;
  padding: 18px 40px;
	text-decoration: none;
	font-size: 1.4rem;
	font-family: Lato;
	font-weight: 700;
	border-radius: 44px;
	text-transform: uppercase;
 	transition:.3s all ease;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.landin_form .hs-button:hover{
/*	opacity:.8;
	position:relative;
	transition:.3s ease all; */
  box-shadow: 0px 0px 11px rgba(50, 50, 255, .5);
	transition:.3s all ease;
}
.landin_form label a{
	color:#646464;
  text-align: left;
  line-height:1.5;
  padding-top:10px;
    padding-bottom:10px;
  
}
.landin_form .hs-error-msg {
color: #ff5454 !important;
top: 3px !important;
}


.page-center.landin-page ul {
    padding-left: 15px;
}
.input.hs-button.primary.large{
background: #D8C090 !important;
}




/*custom modul 2018 two box ty */
 .featured-posts {
    width: 100%;
    display: block;
    float: left;
    margin: 0 auto;
}
 .post-boxes {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.12);
    background: #fff;
    display: block;
    width: 35%;
    float: left;
    margin-left: 13%;
}
.post-boxes.item-2 {
    margin-left: 0%;
    float: right;
     margin-right: 13%;
}
.featured-posts .post-boxes .background-container {
    background-size: cover;
    height: 180px;
    background-position: center center;
}
.featured-posts .post-boxes .item-wrapper {
    margin: 0;
    padding: 25px;
}
p.author-link-cta {
    margin-top: 20px;
}
.post-boxes a {
    text-decoration: none;
    color:black;
}

.post-boks-title {
    margin-left: 13%;
    margin-right: 13%;
    text-align: center;
}

.post-boks-title h2 {
    margin-bottom: 10px;
}
.post-boks-title p {
    margin-bottom: 10px;
}
@media (max-width: 850px){
    .post-boxes.item-2 {
    margin-left: 0%;
    float: right;
     margin-right: 2%;
}
.post-boxes {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.12);
    background: #fff;
    display: block;
    width: 46%;
    float: left;
    margin-left: 2%;
}

.post-boks-title {
   padding-top:20px;
}
}
@media (max-width: 600px){
    
.post-boxes {
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.12);
    background: #fff;
    display: block;
    width: 100%;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
}
.post-boxes.item-2 {
    margin-left: 0%;
    float: left;
    margin-right: 0%;
    margin-left: 0%;
    margin-top: 2%;
}
}
/*end*/

/*custom modul 2018 Surf Background image*/

.wl-col.ml {
    width: 100%;
    float: left;
    display: block;
}

@media (min-width: 700px){
.wl-col.ml  {
    width: 33.333333%;
}
.wl-col  {
    float: left;
    width: 100%;
}
.two.ml {
    width: 50%;
    display: block;
    float: left;
}
}


/* custom modul Surf 2018 download card*/


.download-card-big {
    display: block;
    float: left;
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}
.download-card-box {
    width: 22.7111%;
    display: block;
    float: left;
    margin-right: 2%;
    background: white;
    transition: all 0.3s ease;
   
   
  box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.15);
border-radius: 17px;
}

.download-card-box img {
  
  border-radius: 17px 17px 0px 0px;

}
    

.download-card-box:hover {
  webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    -ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
    box-shadow: 0 0 30px 0 rgba(0,0,0,0.25);
}
.download-card-box.three {
    margin-right: 0%;
}
.container-card {
   padding: 5px 20px;
   text-align: center;
   
}
.download-card-big.whitesmoke{
    background: #f2f2f2;
}
.download-card-big.white {
    background: white;
}
p.buttonblue.lp {
    margin-top: 20px;
    margin-bottom: 20px;
    background: ;
    color:white;
}
p.buttonblue.lp.j {
    margin-top: 0px;
}
a .container-card p{
    color: black;
  
}
.download-card-title {
    display: block;
    float: left;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

@media screen and (max-width: 700px){
.download-card-box {
    width: 100%;
    display: block;
    float: left;
    margin-right: 0%;
    background: white;
    transition: all 0.3s ease;
    border: 1px solid #eaeaea;
    margin-bottom: 1%;
    margin-left: 0%;
}
}

/*end*/



/*header modul*/

    .hs-banner-image.clearfix.efekti {
    background-position: center!important;
    background-repeat: no-repeat!important;
    background-size: cover!important;
}
 

.page-center.header{
    top: 40%;
    position: relative;
}

/*end*/


/*landin page menu*/


.three-long-menu-ladattava .hs-menu-flow-horizontal>ul li a {
    color: #fff;
    font-size: 14px;
    
}

.three-long-menu-ladattava .hs-menu-flow-horizontal>ul li{
     display: inline;
    margin: 1px 1px;
    text-decoration: none;
    padding: 10px 60px;
    color: white;
    background: #cb8587;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    float: left;
 }   
 ul.three-long-menu-ladattava {
    padding: 0px;
}
 
 
.three-long-menu-ladattava .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    float: left;
}
.three-long-menu-ladattava .hs-menu-wrapper ul {
    padding: 0;
}

.three-long-menu-ladattava .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    list-style: none;
    margin: 0;
}

.three-long-menu-ladattava  .hs-menu-wrapper.hs-menu-flow-horizontal>ul {
    display: inline-block;
}
div#hs_menu_wrapper_FI-_Surf__Ladattava_2018 {
    text-align: center;
}
.three-long-menu-ladattava li.hs-menu-item.hs-menu-depth-1.active.active-branch {
    background: ;
}
@media (max-width: 767px){
.menu-ladatta ul, .menu-ladatta ol {
    padding: 0px;
}
.three-long-menu-ladattava .hs-menu-flow-horizontal>ul li {
    display: inline;
    margin: 1px 0px;
    text-decoration: none;
    padding: 10px 60px;
    color: white;
    background: #cb8587;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    width: 100%;
}
}
/*end*/

/*custom modul 2018 Surf two tekniset tiedot*/

    .download-card-box.big {
    width: 30%;
    margin-left: 19%;
    margin-right: 2%;
}

.download-card-box.big.right {
    margin-left: 0%;
     margin-right: 19%;
}
.download-card-box.big.only {
    margin-left: 35%;
    margin-right: 35%;
}

@media screen and (max-width: 700px){
    .download-card-box.big {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
   }
.download-card-box.big.only {
    margin-left: 0%;
    margin-right: 0%;
  }
  .download-card {
    display: block;
    float: left;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
  }
}
/*end*/

/*contact-us page*/
.form-new span.hs-form-required {
    display: none;
}


.widget-type-form.form-new  body input[type="text"], body input[type="password"], body input[type="datetime"], body input[type="datetime-local"], body input[type="date"], body input[type="month"], body input[type="time"], body input[type="week"], body input[type="number"], body input[type="email"], body input[type="url"], body input[type="search"], body input[type="tel"], body input[type="color"], body input[type="file"], body textarea, body select{
    font-size:18px !important;
}

.form-new  input.hs-button.primary.large {
    padding: 10px 45px;
   
}

/*end*/

/*custom modul 2018 */
.download-card-big-blue{
    background: #85c9ee;
    width: 100%;
    float: left;
    display: block;
    color: white;
    padding: 4% 5% 4% 5%;
     font-weight: 800;
    

}
.contact-as.modul {
    width: 100%;
    float: left;
    display: block;
    color: white;
     font-weight: 800;
}


.contact-as.modul h2, .contact-as.modul h3,.contact-as.modul h4 {
    color: white;
}
.contact-as.modul p {
    font-weight: 800;
}
@media (max-width: 767px){
.arkkitehti-modul {
    text-align: center;
}

.form-new input.hs-button.primary.large {
    padding: 10px 45px;
    margin: 0 auto;
    display: block;
}
}



/*2018 surf image one*/

   
.surf-image-box {
    display: block;
    float: left;
    width: 30%;
     margin-right: 20px;
    margin-left: 0px;
     margin-top: 20px;
    
}

.surf-image-box.center {
    margin: 0px;
}


@media screen and (max-width: 1190px) {
.surf-image-box {
    display: block;
    float: left;
    width: 48.0%;
    margin-right: 20px;
    margin-left: 0px;
    margin-top: 20px;
}
}


@media screen and (max-width: 1139px) {
    
.surf-image-box {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    float: none;
    margin-bottom: 20px;
}
.surf-image-box.center {
     margin: 0 auto;
     margin-bottom: 20px;
}
}

/*end*/

li.coin-dollar:before {
    content: "\e93b";
      font-family: 'swag-icon';
}

li.diamond:before {
    content: "\f111";
     font-family: 'font-awesome';
     position: relative;
    margin-left: -23px;
    margin-right: 6px;
    top: 2px;

}

li.shield-cash:before{
    font-family: 'swag-icon';
        content: '\f111';
}

.right-one > ul > li:before{
    
    color: #D8C090;
    display: inline-block;
    margin-right: 6px;
    margin-left: -22px;
    font-size: 10px;
    margin-right: 8px;
    top: 0px;
    position: relative;
    content: "\f111";
    font-family: 'fontawesome';
    font-size: 16px;
}
   

.left-one > ul > li{
  list-style-type: disc;
  font-size: 16px;
     
}

.text-description > ul > li{
    
     
   list-style-type: disc;
  font-size: 16px;
}
.text-description > ul {
    margin-top: 5px;
    margin-bottom: 5px;
   list-style-type: disc;
  font-size: 16px;
}

.text-description > ul > li::marker {
    content:none;
   
  
    /* top: -30px; */
}

.text-description li:before {
    color: #D8C090;
    display: inline-block;
    margin-right: 6px;
    margin-left: -22px;
    font-size: 10px;
    margin-right: 8px;
    top: 0px;
    position: relative;
    content: "\f111";
     font-family: 'fontawesome';
     font-size: 16px;
}
.text-description li.diamond ul li:before {
    display: inline-block;
    margin-right: 8px;
    content: "\f111";
     font-family: 'fontawesome';
  
}


.hs-banner-image.clearfix.puucomp {
    height: 100vh;
}
@media screen and (max-width: 768px) {
.cta-blue {
    font-size: 12px;
 }
 .hs-banner-image.clearfix.puucomp {
    height: 150vh;
}
}





.columnin {
    float: left;
}

.columnin {
    float: left;
    width: 33.33%;
   padding-right: 10px;
   
}
.columnin.one {
    width: 15%;
   display: block;
}
.columnin.two {
    width: 14%;
   display: block;
    margin-right: 1%;
}
.footer-color-two{
background: #d8d8d8;
}
.columnin.three {
    width: 70%;
    display: block;
   padding-right: 0px;
}
.rowing:after {
    content: "";
    display: table;
    clear: both;
}
.new-footer-color {
    background: #f2f2f2;
  display: block;
  float: none;
}
.columnin-small {
    width: 40%;
    display: block;
    float: left;
}

.icon {
    display: inline-block;
   
    width: 60%;
}


a .circle-bg {
    border-radius: 50%;
    border: 1px solid #4a4a4a;
    width: 40px;
    height: 40px;
    display: inline-block;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
    background: #4a4a4a;
    font-size: 27px;
    color: #f2f2f2;
}

.columnin {
    float: left;
}
@media screen and (max-width: 800px) {
    .columni, .icon, .columnin-small, .columnin.three, .columnin.two, .columnin.one{
        width: 100%;
       float: left;
    }
}
.owl-nav {

}
    button.owl-dot {
    display: none;
}


.span12.widget-span.widget-type-custom_widget.panel.text-center {
    display: none;
}

.hsg-page-width-normal{
    box-sizing: content-box !important;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    margin: 0px auto !important;
    float: none !important;
}

.container-fluid.row-fluid.page-center.no-color {
    max-width: 620px;
    padding: 0 20px;
}
/*  */
.hero-image-big img{
    max-width: 100%;
   
    text-align: center;
    margin: 0 auto;
    display: block;
}
.hero-wrapper {
    /* padding-top: 133px; */
    position: relative;
    padding-top: 180px;
    
}


.hsg-page-width-normal.hero-wrapper h1 {
    color: black;   
}


.hsg-page-width-normal.new.whitesmoke {
    background: #f2f2f2;
    
}

.header.landing h1,.header.landing h2,.header.landing h3  {
text-align: center;
  color: black;
  margin-top: 13px;
  margin-bottom: 13px;
}

.widget-type-custom_widget.hero-image img {
    display: none;
}

.hero-banner {
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box !important;
    background-attachment: scroll;
   
}

.image-galleria .slick-slider{
  margin-bottom: 0;
}
.ListingfeaturedImage.pb20 img {
    width: 100%;
}



.slider-header h3, .slider-header h2, .slider-header h4{
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.innerpage-herobanner {
    min-height: 400px;
    display: block;
    float: left;
    width: 100%;
}


.container-fluid.row-fluid.page-center.no-color h2 {
    color: white;
    margin: auto;
    text-shadow: 0px 1px 3px #000000;
}

.container-fluid.row-fluid.page-center.no-color .hs-form-field {
    margin-bottom: 15px;
    color: white;
    font-weight: 600;
}

 .actions {
    text-align: center;
}
.container-fluid.row-fluid..container-fluid .row-fluid .page-center.no-color .hs-form-field a, a:hover, a:active {
    text-decoration: none;
    transition: color 0.3s ease;
}
.button-red {
    padding: 20px;
    background: #a01f21;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 43%;
  font-weight: bold;
}
a.button-red  {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}
a.red-nappi {
    color: white;
    display: block;
}

.darkblue-cta-bg {
    background-color: rgb(197 175 112 / 85%);
}

h1.block-title {
  color: #27373e!important;
  
}
p.block-description{
   color: #27373e!important;

}

.personnel_block img {
  
    border: none!important;
}
@media screen and (max-width: 700px) {
  h1 {font-family: 'Exo', sans-serif !important;font-weight: 400;margin: auto;font-size: 30px!important;color: white;word-break: break-word;-ms-word-break: break-word;color:#27373E;}
h2 {font-family: 'Exo', sans-serif;font-weight: 400;margin: auto;	font-size: 25px!important;;word-break: break-word;-ms-word-break: break-word;color:#27373E;}
h3 {font-family: 'Exo', sans-serif;margin: auto;font-size: 1.3rem!important;;font-weight: 400;word-break: break-word;-ms-word-break: break-word;color:#27373E;}
h4 {font-family: 'Exo', sans-serif;font-weight: 400;word-break: break-word;-ms-word-break: break-word;color:#27373E;margin-bottom:16px;}
h5 {font-family: 'Exo', sans-serif;word-break: break-word;-ms-word-break: break-word;font-weight: 400;margin: 0 auto;}
 	
 }
 }



label {
    color: #172e37;
}

 @media screen and (max-width: 799px) {
     .text-blue {
	
   }
   .text-blue {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}
   .blog-cards .descriptiont {
   padding-top: 20px!important;
    padding-bottom: 20px!important;
}
   .hero-ctas .cta_button {
    
    margin: 0 auto!important;
  
   
}
   .blog-cards .descriptiont h1 {
    
    padding-top: 0px; 
    position: relative;
}
   
 .column {
     padding-top: 0px!important;
    padding-bottom: 0px!important;
}
   
  .container-fluid .row-fluid .page-center {
       padding-top: 20px!important;
    padding-bottom: 20px!important;
}

@media (max-width: 900px){
.text_area {
    text-align: center;
    margin-bottom: 20px;
    padding: 0px;
}
  .text_area h2 {
    width: 100%;
    text-align: left;
    line-height: 1.5;
}
  .description_video p {
    width: 100%;
    text-align: left;
}
.description_video {
    margin: 0px 0 0;
    
}
  .wood_bg {
    padding: 20px 0 20px 0;
}
  .module_text {
    padding-top: 0px;
    flex: 0 40%;
}
  
  .puucopm-pint {
    padding-top: 0px;
    padding-bottom: 0px;
  
}
  .recipes_button-more {
    
    margin-bottom: 0px;
    font-size: 18px;
    margin-top: 00px !important;
   
}
  .puucomp-textpinterest {
    text-align: left;
    flex: 0 50%;
    margin: 0 auto;
    width: 100%;
}
  .box-area {
    flex-direction: column;
    margin: 0 0 0px;
}
  .big-banner-container{
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}
  .li_rt_container {
    padding: 0px!important;
}
 .blg {
   padding-top: 0px!important;
    padding-bottom: 0px!important;
}
.module_recipes {
    
    padding: 0px 0px 0px 0px;
}
h2.title {
 padding-top: 20px!important;
}
  .blue-box {
    
    margin-top: 30px;
    
}
  .wood-image{
    padding-bottom: 0px!important;
    padding-top: 0px!important;
}
}
 
/**
/*
 * 
 * 
 * @media screen and (max-width: 700px) {
 	
 }
 }
 * 
 * list-style: none;.flip.button.contact
 * 
 * button-red {
    padding: 20px;
    background: #a01f21;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 43%;
}
 * 
 * 
 *  
.delay{
  display: none ;
} */