/*
Theme Name: Don & Branco 2015
Theme URI: donbranco.fi
Author: Don % Branco
Author URI: donbranco.fi
Description: Don & Branco's website theme for 2015 ->
Version: 1.0
*/

/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

body * { box-sizing: border-box; max-width: 100%; }

/* TYPOGRAFIA
==============================================================================*/
body { font-family: 'Varela Round', sans-serif; color: #101e2c; font-size: 19px; line-height: 1.4; letter-spacing: 0.35px; }
h1, h2, h3, h4 { font-family: 'HurmeGeometricBlack'; margin-bottom: 20px; letter-spacing: 2px; line-height: 1; text-transform: uppercase; text-rendering: geometricPrecision; }
h1 { font-size: 450%; line-height: 110%; letter-spacing: 0px; }
h1::after { content: ""; display: block; width: 1.3em; height: 6px; background-color: #e06565; margin: 50px 0; }
h2 { font-size: 250%; }
h2::after { content: ""; display: block; width: 1.4em; height: 6px; background-color: #e06565; margin: 20px 0; }
h3 { font-size: 250%; }
h4 { font-size: 200%; }
h5 { font-size: 125%; font-family: 'HurmeGeometricBlack'; text-transform: uppercase; }
p, li { margin-bottom: 18px; }
a { text-decoration: none; color: #101e2c;  }

a:hover { color: #95c5c0; }
a:visited { color: #101e2c; }
a:visited:hover { color: #95c5c0; }

body.single-referenssi a, body.single-referenssi a:hover, body.single-referenssi a:visited  { color: #95c5c0; }
body.single-referenssi h6 { font-size: 14px; font-weight: lighter; }

.section-content a.button { margin-top: 50px; font-family: 'HurmeGeometricBold'; display: inline-block; padding: 10px 0; border: 4px solid #101e2c; text-transform: uppercase; letter-spacing: 2px; width: 360px; text-align: center; transition: all 0.3s; margin-right: 20px; }
.section-content a.button:hover { background-color: #101e2c; color: #fff; }
.white .section-content a.button { color: #fff; border-color: #fff; }
.white .section-content a.button:hover { background-color: #fff; color: #101e2c; }

#page-content p a { text-decoration: underline; }
#page-content .csColumn a { text-decoration: none; }

.white { color: #fff; }
.white h1::after { display: none; }

#page-header-container p { font-size: 24px; }


/* CLEARFIX
==============================================================================*/
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/* TOP WRAPPER
==============================================================================*/

/* ADMIN BAR FIX */
body.logged-in #top-wrapper { top: 32px; }
body.logged-in .close { top: 110px; }
body.logged-in #down { bottom: 20px; }
body.logged-in #main-menu #some-wrapper { top: 120px; }

#fader { position: fixed; top: 80px; left: 0; width: 100%; background-color: #fff; z-index: 999999; }
#top-wrapper { position: fixed; z-index: 99999; top: 0; left: 0; height: 80px; width: 100%; background-color: #101e2c; -webkit-transform: translateZ(0); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
#branding { position: relative; text-align: center; }
#logo { display: inline-block; height: 80px; width: 200px; background-image: url(img/logo.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; visibility: visible; opacity: 1; transition: opacity 0.3s; }
#menu-toggle { cursor: pointer; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background-color: #95c5c0; -webkit-transition: background 0.3s; transition: background 0.3s; }
#menu-toggle span { display: block; position: absolute; top: 36px; left: 18px; right: 18px; height: 8px; background: white; }
#menu-toggle span::before,
#menu-toggle span::after { position: absolute; display: block; left: 0; width: 100%; height: 8px; background-color: #fff; content: ""; }
#menu-toggle span::before { top: -14px; }
#menu-toggle span::after { bottom: -14px; }
#menu-toggle span { -webkit-transition: background 0 0.6s; transition: background 0 0.3s; }
#menu-toggle span::before,
#menu-toggle span::after { -webkit-transition-duration: 0.6s, 0.6s; transition-duration: 0.6s, 0.6s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0; }
#menu-toggle span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
#menu-toggle span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }
#menu-toggle.active { background-color: #e06565; }
#menu-toggle.active span { background: none; }
#menu-toggle.active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#menu-toggle.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
#menu-toggle.active span::before,
#menu-toggle.active span::after { -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s; }


/* MENU TOGGLE ARTICLE */
#menu-toggle-article { cursor: pointer; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background-color: #95c5c0; -webkit-transition: background 0.3s; transition: background 0.3s; }
#menu-toggle-article span { display: block; position: absolute; top: 36px; left: 18px; right: 18px; height: 8px; background: white; }
#menu-toggle-article span::before,
#menu-toggle-article span::after { position: absolute; display: block; left: 0; width: 100%; height: 8px; background-color: #000; content: ""; }
#menu-toggle-article span::before { top: -14px; }
#menu-toggle-article span::after { bottom: -14px; }
#menu-toggle-article span { -webkit-transition: background 0 0.6s; transition: background 0 0.3s; }
#menu-toggle-article span::before,
#menu-toggle-article span::after { -webkit-transition-duration: 0.6s, 0.6s; transition-duration: 0.6s, 0.6s; -webkit-transition-delay: 0.3s, 0; transition-delay: 0.3s, 0; }
#menu-toggle-article span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
#menu-toggle-article span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }
#menu-toggle-article.active { background-color: #fff; }
#menu-toggle-article.active span { background: none; }
#menu-toggle-article.active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#menu-toggle-article.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
#menu-toggle-article.active span::before,
#menu-toggle-article.active span::after { -webkit-transition-delay: 0, 0.3s; transition-delay: 0, 0.3s; }

.menu-paavalikko-container { margin-top: 0; }
.menu-paavalikko-container { height: 100%; }
#main-menu .content-container a { margin-top: 2%; }
#main-menu .content-container { max-width: 60%; }
#main-menu { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; background-color: rgba(20,21,22,0.9); -webkit-transform: translateZ(0); }
#main-menu a { line-height: 125%; font-family: 'HurmeGeometricBlack'; color: #fff; text-transform: uppercase; font-size: 400%; outline: 0; }
#main-menu a:hover { color: #95c5c0; }
#main-menu .content-container { margin: 0 auto; }

#main-menu #some-wrapper { position: fixed; right: 0; top: 80px; }
#main-menu a.some { display: block; width: 80px; height: 80px; margin: 0; font-size: 160%; text-align: center; line-height: 80px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
#main-menu a.some:hover { color: #fff; }
#main-menu a.some.fb:hover { background-color: #3B5998; }
#main-menu a.some.in:hover { background-color: #007bb6; }
#main-menu a.some.ig:hover { background-color: #517fa4; }


/* ETUSIVU
==============================================================================*/
.home.top #fader { top: 0; }
.home.top #top-wrapper { background-color: transparent; }
.home.top #top-wrapper #logo { visibility: hidden; opacity: 0; }
.home.top #menu-toggle { background-color: transparent; } 
.home.top #menu-toggle.active { background-color: #e06565; }

#overlay-logo { position: absolute; top: 0; left: 0; width: 100%; background-image: url(img/logo-slogan.png); background-size: 400px; background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; transition: opacity 0.3s; }
.home.top #overlay-logo { opacity: 1; }
#youtube { position: absolute; left: 0; bottom: 0; }
#youtube { display: block; color: #fff; width: 80px; height: 80px; margin: 0; font-size: 160%; text-align: center; line-height: 80px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
#youtube i { margin: 30% -9% 0 0; }
#youtube:hover { background-color: #e06565; color: #fff; }
#watch-text { position: absolute; bottom: 23px; left: 100px; width: 80px; text-transform: uppercase; font-family: 'HurmeGeometricBlack'; color: #FFF; line-height: 1.2; display: block; font-size: 14px; opacity: 0; transition: opacity 0.3s; letter-spacing: 1.2px; text-align: left; }
#youtube:hover #watch-text { opacity: 1; }

#movie-wrapper { width: 100%; overflow: hidden; background-color: rgb(20,21,22); margin-top: -80px; background-size: cover; background-position: 50% 50%; }
#movie { min-width: 100%; min-height: 100%; z-index: -100; max-width: none; }

#logokuvat { text-align: left; margin-top: 50px; }
#logokuvat img { height: 75px; width: auto; display: inline-block; vertical-align: middle; margin: 20px 24px; }

.page-id-52 .content-container { margin: 0 auto; }
.section { padding: 200px 0; background-size: cover; background-position: 50% 50%; }

#movie-wrapper video { margin-left: 0px !important; }


/* PAGE YLEINEN
==============================================================================*/
#page-header { width: 100%; position: relative; color: #fff; background-size: cover; }
#page-header-container { width: 100%; position: absolute; bottom: 0; padding-bottom: 50px; }
#down { position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; background-image: url(img/nuolialas.png); background-size: 27px 18px; background-repeat: no-repeat; background-position: 50% 50%; visibility: hidden; opacity: 0; transition: all 0.3s; }
.top #down { visibility: visible; opacity: 1; cursor: pointer; }
.top #down:hover { background-color: #95c5c0; }
#page-header-container h1 { margin-bottom: 10px; line-height: 100%; }
.page-header-title::after { display: none; }
#page-wrapper { padding-top: 80px; }
.content-wrapper { position: relative; padding: 110px 0; width: 100%; margin: 0 auto; }
.no-padding { padding: 0 !important; }
.content-container { width: 1040px; max-width: 90%; margin: 0 0 0 170px; }
#page-abstract { background-color: #F4F4F4; padding: 200px 0; font-size: 150%; line-height: 170%; text-align: center;  font-style: italic; }
.page-id-2083 .csColumn { margin: 0px; padding: 0px; padding-right: 60px; text-align: left !important; float: left; width: 50%; }
.page-id-1421 .csColumn { margin: 0px; padding: 0px; padding-right: 60px; text-align: left !important; float: left; width: 50%; }

/* PALVELUT
==============================================================================*/
.csColumn a { display: block; }
.csColumn a::before { content: "» "; }
.csColumn a:hover { color: #95c5c0; }

.page-id-8 #page-header .content-container { width: 55%; }
.page-id-8 .content-container { width: 80%; }
.parent-pageid-8 .content-container { max-width: 60% }
.page-id-8 h3 { font-size: 200%; }

.csColumnGap:first-child { display: none; }
.csColumnGap:nth-child(7) { display: none; }
.page-id-8 .csColumn { min-height: 280px; padding: 10px 0 0 40px !important; margin: 0 30px 0 0 !important; width: 31% !important; }
.page-id-8 .csColumn:nth-child(2) { width: 23% !important; padding: 10px 0 0 0 !important; }
.page-id-8 .csColumnGap { border-left: 5px solid #ededed; min-height: 280px; }

/* REFET
==============================================================================*/
#refe-grid { /*margin: 40px 0;*/ }
.refe-cell { width: 33.3%; float: left; margin-top: 20px; height: 450px; }
.refe-container { margin-right: 20px; }
.refe-kuva { background-size: cover; }
.refe-kuva.square { background-position: center; }
.refe-header { font-family: 'HurmeGeometricBold'; margin-top: 20px; min-height: 110px; }

.page-id-56 #page-header-container .content-container { margin: 0 0 0 170px; }
.page-id-56 .content-container { width: 1040px;  margin: 0 auto; }
.single-referenssi #page-header-container p { font-size: 19px; }
.single-referenssi h1 { font-size: 250%; }
.refe-cell h2 { font-size: 170%; }

.refevideo-container { padding: 100px 5% 0 5%; text-align: center; }
.refevideo { width: 1200px; max-width: 100%; height: auto; }


/* HENKILÖSTÖ
==============================================================================*/
#hefe-grid { margin: 40px 0; }
.hefe-cell { width: 33.3%; float: left; margin-top: 20px; }
.hefe-container { margin-right: 20px; }
.hefe-kuva { background-size: cover; }
.hefe-header { font-family: 'HurmeGeometricBold'; margin-top: 20px; margin-bottom: 5px; font-size: 170%; }
.hefe-header::after { display: none; }
.hefe-teksti::after { content: ""; display: block; width: 20%; height: 6px; background-color: #e06565; margin: 20px 0; }
  
.page-id-58 #page-header {  background-position: 50% 100%; }
.page-id-58 .content-wrapper .content-container { margin: 0 auto; }


/* REKRY
==============================================================================*/
.page-id-750 #page-header-container h1 { font-size: 300%; }
.page-id-714 .content-wrapper { margin: 0 auto 230px auto !important; }

/* LOMAKE
==============================================================================*/
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea
{ background-color: #e6e6e6; color: #7c7b7b; width: 100%; border: none; height: 54px; font-family: 'Varela Round', sans-serif; font-size: 18px; padding: 15px; float: left; margin-bottom: 20px; }

.wpcf7 textarea
{ background-color: #e6e6e6; color: #7c7b7b; width: 50%; border: none; height: 202px; float: right; font-family: 'Varela Round', sans-serif; font-size: 18px; padding: 15px; }
.contact-form-left { float: left; width: 46%; }
.contact-form-right { float: right; width: 46%; margin-bottom: 50px; }
input, select { float: right; }
.wpcf7 input[type="submit"] { margin-top: 5px; font-family: 'HurmeGeometricBold'; display: inline-block; padding: 10px 0; border: 4px solid #101e2c; text-transform: uppercase; letter-spacing: 2px; width: 180px; text-align: center; transition: all 0.3s; font-size: 18px; background-color: #fff; margin-bottom: 100px; }

div.wpcf7-mail-sent-ok { border: none; max-width: 700px; padding: 12px 20px 12px 20px; margin-left: 0px; }
div.wpcf7-validation-errors { display: none !important; }
span.wpcf7-not-valid-tip { color: #e06565; }

/* HUBSPOTIN LOMAKE
==============================================================================*/

.hbspt-form { margin-top: -30px; }
.hbspt-form .hs-form-field .input { height: 54px; background-color: #e6e6e6; }
.hbspt-form .hs-form-field .input input { background-color: #e6e6e6; color: #000; width: 100%; border: none; height: 54px; font-family: 'Varela Round', sans-serif; font-size: 18px; padding: 15px; float: left; margin-bottom: 20px; }
.hbspt-form .hs-form-field .input select { background-color: transparent; color: #000; width: 96%; border: none; height: 54px; font-family: 'Varela Round', sans-serif; font-size: 18px; float: left; margin: 0 0 20px 8px; }
.hbspt-form .hs-form-field .hs-error-msgs li { font-style: italic; color: #e06565; list-style-type: none; }
.hbspt-form .hs_submit .actions input { -webkit-appearance: none; margin-top: 5px; font-family: 'HurmeGeometricBold'; display: inline-block; padding: 10px 0; border: 4px solid #101e2c; text-transform: uppercase; letter-spacing: 2px; width: 180px; text-align: center; transition: all 0.3s; font-size: 18px; background-color: #fff; float: left !important; }

/* IN ENGLISH
==============================================================================*/
.page-id-444 .content-container { margin: 0 auto; }


/* SINGLE REFE
==============================================================================*/
.single-referenssi #page-header-container { width: 100%; margin-left: 0%; background-color: rgba(0,0,0,0.5); padding: 40px; }
.slide { width: 100%; background-position: 50% 50%; background-size: cover; color: #fff; margin-bottom: 5px; position: relative; }
.refekuva { margin: 0 auto; width: 100%; }

.close { position: fixed; top: 80px; right: 0; z-index: 999; }
.close a { display: block; width: 80px; height: 80px; background-color: rgba(255,255,255,0.9); -webkit-transition: background-color 0.6s; transition: background-color 0.6s; }
.close a span { display: block; position: absolute; top: 36px; left: 18px; right: 18px; height: 8px; background-color: transparent; }
.close a span::before,
.close a span::after { position: absolute; display: block; left: 0; width: 100%; height: 8px; background-color: rgb(20,21,22); content: ""; -webkit-transition: background-color 0.6s; transition: background-color 0.6s; }
.close a span::before { top: -14px; }
.close a span::after { bottom: -14px; }
.close a span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.close a span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.close a:hover { background-color: #e06565; }
.close a:hover span::before,
.close a:hover span::after { background-color: #fff; }
  

/* MEDIA QUERYT
==============================================================================*/
@media screen and (max-width: 1280px) {
  .page-id-8 h3 { font-size: 170%; }
  .wpcf7-form { width: 85%; }
}

@media screen and (max-width: 1200px) {
   h3 { font-size: 200%; } 
   .parent-pageid-8 .content-container { max-width: 75%; }
   .content-container { margin: 0 0 0 130px; }
  .page-id-58 #page-header-container .content-container { margin: 0 0 0 130px; }
  .page-id-56 #page-header-container .content-container { margin: 0 0 0 130px; }
   #page-abstract { padding: 150px 0; }
  .page-id-8 h3 { font-size: 150%; }
  #main-menu a { font-size: 400%; }
  .menu-paavalikko-container { margin-top: 95px; }
  #movie-wrapper video { margin-left: -100px !important; }
  div.wpcf7-mail-sent-ok { max-width: 400px; font-size: 15px; }
}

@media screen and (max-width: 1100px) {
  #movie-wrapper video { margin-left: -150px !important; }
}

@media screen and (max-width: 1024px) {
  .page-id-8 h3 { font-size: 130%; }
  .page-id-8 p { font-size: 90%; }
  #page-content p,h3 { text-align:left !important; margin-left: 0% !important;}
  #main-menu a { font-size: 350%; }
  .parent-pageid-8 .content-container { max-width: 80%; }
  .content-container { margin: 0 0 0 80px; }
  .page-id-58 #page-header-container .content-container { margin: 0 0 0 80px; }
  .page-id-56 #page-header-container .content-container { margin: 0 0 0 80px; }
  #page-abstract { padding: 120px 0; }
  .page-id-8 #page-header-container { width: 80%;}
  .page-id-8 #page-header .content-container { width: 75%; }
  .page-id-8 .content-wrapper { padding: 110px 0 0 30px; }
  #page-abstract .content-container { margin: 0 0 0 50px; }
  .page-id-52 .section { background-position: 65% 50%; }
  .page-id-8 #page-header { background-position: 50% 50%; }
  .page-id-56 #page-header { background-position: 70% 100%; }
  .page-id-16 #page-header { background-position: 85% 50%; }
  .page-id-14 #page-header { background-position: 85% 50%; }
  .page-id-26 #page-header { background-position: 85% 50%; }
  .page-id-32 #page-header { background-position: 85% 50%; }
  .page-id-20 #page-header { background-position: 85% 50%; }
  .page-id-590 #page-header { background-position: 37% 100%; }
  .page-id-18 #page-header { background-position: 37% 100%; }
  .page-id-10 #page-header { background-position: 37% 100%; }
  .page-id-30 #page-header { background-position: 37% 100%; }
  .page-id-28 #page-header { background-position: 50% 100%; }
  .page-id-22 #page-header { background-position: 50% 100%; }
  .page-id-34 #page-header { background-position: 50% 100%; }
  .page-id-24 #page-header { background-position: 50% 100%; }
  .menu-paavalikko-container { margin-top: 0px; }
  #movie-wrapper video { margin-left: -135px !important; }
  .page-id-714 #page-header { background-position: 50% 50%; }

  .wpcf7 textarea { width: 100%; }
  .contact-form-left { float: left; width: 100%; }
  .contact-form-right { float: right; width: 100%; }
  .wpcf7-form { margin-right: 20px; }
  div.wpcf7-mail-sent-ok { max-width: 100%; margin-top: 60px; }
  .postid-2101 .slide { background-position: 20% 50%; }
}

@media screen and (max-width: 970px) {
  .csColumnGap:nth-child(3) { display: none; }
  .csColumnGap:nth-child(5) { display: none; }
}  
  
@media screen and (max-width: 900px) {
  h3 { margin-top: 40px; }
  h2 { font-size: 210%;}
  .content-container { width: 100% !important; }
  .page-id-8 #page-header-container { width: 90%;}
  .parent-pageid-8 .content-wrapper { width: 100%; margin-left: 0%; padding: 40px 0 }
  .parent-pageid-8 #page-header-container { margin-left: 0%; }
  .content-container { margin: 0 0 0 50px; }
  .page-id-28 #page-header { background-position: 80% 50%; }
  .page-id-22 #page-header { background-position: 80% 50%; }
  .page-id-34 #page-header { background-position: 80% 50%; }
  .page-id-24 #page-header { background-position: 80% 50%; }
  .page-id-58 #page-header { background-position: 12% 50%; }
  .parent-pageid-8 .content-container { max-width: 90%; }
  .page-id-8 #page-header { background-position: 50% 50%; }

  .page-id-8 .csColumn { padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; width: 100% !important; min-height: 0%; }
  .page-id-8 .csColumn:nth-child(2) { width: 100% !important; padding: 0 0 0 0 !important; min-height: 0%; }
  .page-id-8 .csColumn:nth-child(3) { padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; width: 100% !important; min-height: 0%; }
  .page-id-8 .csColumn:nth-child(5) { padding: 0 0 0 0 !important; margin: 0 0 0 0 !important; width: 100% !important; min-height: 0%; }
  .page-id-8 p { font-size: 120% }
  #movie-wrapper video { margin-left: -235px !important; }
  .page-id-714 .csColumn { margin-left: 0% !important; }
  .page-id-714 .content-wrapper { margin: 0 auto 40px auto !important; }
  .single-article { max-width:90%!important; margin-bottom: 50px!important; }
  .blogi { max-width: 90%!important; }
  .post-divider { margin: -2em 0em 2em 4.5em!important; height: 58px!important; }


  .author-outro { min-height: 125px!important; }
  .single-sidebar { width: 90%!important; margin-left: 25px!important;}
  .blog-divider { margin: 0em 0em 2em 6.6em!important; }
  .thedate { font-size: 70%!important; }
}


  
@media screen and (max-width: 769px) {
  #logo { margin-left: 5%; width: 40px; background-position: 0% 50%; background-image: url(img/donbranco-and.png); }
  #movie-wrapper { background-image: url(img/db_mobiilikuva.jpg); background-position: 50% 60%; }
  #movie, #youtube { display: none; }
  #overlay-logo { background-position: 50% 90%; background-size: 380px; }
  #main-menu a.some { height: 60px; font-size: 240%; }
  #main-menu #some-wrapper { top: 90px; }
  
  body { font-size: 80%; }
  p, li { font-size: 140%; }
  .page-id-8 p { font-size: 150%; }
  .page-id-8 h3 { font-size: 230%; margin-top: 60px; }
  #main-menu a { font-size: 400%; }
  h1 { font-size: 370%; }
  
  .content-container { margin: 0 0 0 25px; }
  .page-id-58 #page-header-container .content-container { margin: 0 0 0 25px; }
  .page-id-56 #page-header-container .content-container { margin: 0 0 0 25px; }
  #branding { text-align: left; }
  .section { padding: 140px 0; }
  .refe-cell, .hefe-cell { width: 50%; }
  .refe-cell { height: 410px; }
  .page-id-56 #page-header { background-position: 80%; }
  .page-id-58 #page-header { background-position: 40% 100% }
  #page-abstract .content-container { margin: 0 0 0 30px; }
  .page-id-52 #down { display: none; }
  .wpcf7-form { width: 95% !important; }

  .thedate { font-size: 100%!important; }
  .post-divider { height: 40px!important; margin: -2em 0em 2em 6.5em!important; }

  blockquote { font-family: 'Slabo 27px', serif; font-size: 20px!important; border-left: 5px solid rgb(241,86,88); margin: 0.5em 0px; padding: 0px 15px; }

  .hbspt-form { margin-top: -30px; }
}

@media screen and (max-width: 700px) {
  .csColumn { width: 100%; float: none; }
  .page-id-8 .content-wrapper { margin-left: -30px !important; }
  #page-abstract { padding: 100px 0; }
  #overlay-logo { background-position: 50% 90%; background-size: 250px; } 
  #main-menu a.some { height: 80px; font-size: 160%; }
  #main-menu #some-wrapper { top: 80px; }
  .page-id-8 p { font-size: 100%; }
  .page-id-8 h3 { font-size: 150%; margin-top: 50px; }
  .page-id-714 #page-header { background-position: 57% 50%; }
  .page-id-2083 .csColumn { margin-left: 3% !important; margin-right: 0% !important; width: 95% !important; padding-right: 0px !important; }
  .page-id-1421 .csColumn { margin-left: 3% !important; margin-right: 0% !important; width: 95% !important; padding-right: 0px !important; }
}
  
@media screen and (max-width: 600px) {
  #main-menu .content-container { margin: 0 10%; }
  .postid-108 .slide { background-position: 50% -32%; !important; background-repeat: no-repeat; background-size: 150%; !important; }
  .author-meta { font-size: 140%; padding-top: 5px; }
  .single-article { margin-bottom: 0px; }
  .thedate { font-size: 70%!important; }

}

@media screen and (max-width: 480px) {
  .page-id-58 #page-header { background-position: 15% 100% }
  #main-menu a { font-size: 300%; }
  .refe-cell, .hefe-cell { width: 75%; }
  #page-header-container { width: 95%; margin-left: 0%; padding-bottom: 10px; }
  .page-id-8 .content-wrapper { margin-left: 0%; }
  #page-header { background: 64% 50%; }
}

@media screen and (max-width: 450px) {
  h1 { font-size: 310%; } 
  h2, h3, h4 { letter-spacing: 1px; }
  .section-content a.button { font-size: 80%; }
  #page-header-container p { font-size: 15px; }
  #main-menu a { font-size: 250%; } 

  #logokuvat img { height: 55px; margin: 6px 20px; }
  #page-abstract { text-align: center; font-size: 100%; padding: 70px 13px; }
  .section { padding: 70px 0; }
  #fader { top: 60px; }
  #down { width: 60px; height: 60px; }
  #logokuvat { text-align: center; margin-top: 0px; }
  #top-wrapper { height: 60px; }
  #page-wrapper { padding-top: 60px; }
  #movie-wrapper { margin-top: -60px; }
  #menu-toggle { width: 60px; height: 60px; }
  #menu-toggle span { top: 25px; left: 12px; right: 12px; height: 7px; }
  #menu-toggle span::before, #menu-toggle span::after { height: 7px; }
  #menu-toggle span::before { top: -12px; }
  #menu-toggle span::after { bottom: -12px; }

  #menu-toggle-article { width: 60px; height: 60px; }
  #menu-toggle-article span { top: 25px; left: 12px; right: 12px; height: 7px; }
  #menu-toggle-article span::before, #menu-toggle span::after { height: 7px; }
  #menu-toggle-article span::before { top: -12px; }
  #menu-toggle-article span::after { bottom: -12px; }

  #page-abstract .content-container { margin: 0px 0 0 16px; }
  #logo { width: 30px; height: 60px; }
  .close { top: 60px; }
  .close a { width: 60px; height: 60px; }
  .close a span { top: 25px; left: 12px; right: 12px; height: 8px; }
  #main-menu #some-wrapper { top: 70px; }
  #main-menu a.some { width: 60px; height: 50px; line-height: 60px; }
  .page-id-8 #page-header { background-position: 15% 50%; }
  .parent-pageid-8 #page-header-container { padding-bottom: 30px; }
  .refe-cell { width: 100%; height: 475px; }
  .page-id-58 .refe-cell, .hefe-cell { height: 475px; }
  .hefe-cell { width: 100%; height: 520px; }
  .page-id-56 .refe-cell { width: 100%; height: 400px; }
  .refe-kuva.square { height: 320px !important; }
  .single-referenssi #page-header-container { padding: 20px 0px; }
  .page-id-52 .hefe-cell { height: 125px; }
  .page-id-52 .section { background-position: 47% 50%; }
  .page-id-444 .hefe-cell { height: 125px; }
  .page-id-56 .content-wrapper { padding: 55px 0; }
  .page-id-58 .content-wrapper { padding: 55px 0; }
  .section-content a.button { margin-top: 30px; margin-right: 0px; }
  .hefe-container, .refe-container { margin-right: 0; }

  .blog-divider {height: 15px!important; margin: 0em 0em 2em 6.6em!important; }
  .thedate { font-size: 70%!important; }
  .postid-2200 .slide { background-position: 0% 50%; }
}

@media screen and (max-width: 376px) {
  h1 { font-size: 250%; }
  .single-referenssi #page-header-container p { font-size: 11px !important; }
  .postid-198 .slide { background-position: 48% 100%; !important; background-repeat: no-repeat; background-size: 250%; !important; }
  .postid-407 .slide { background-position: 50% 100%; !important; background-repeat: no-repeat; background-size: 210%; !important; }
  .page-id-8 .content-wrapper { padding: 60px 0 0 30px; }
  #page-abstract { text-align: center; font-size: 90%; padding: 70px 10px; }
  #main-menu a { font-size: 200%; } 


}

@media screen and (max-width: 321px) {
  .hefe-cell { width: 100%; height: 495px; }
  #page-abstract { text-align: left; font-size: 100%; padding: 70px 0; }
  .page-id-56 .refe-cell { width: 100%; height: 360px; }
  .refe-kuva.square { height: 280px !important; }
  #page-abstract { text-align: left; padding: 70px 0; }
  #logokuvat img { height: 49px; margin: 6px 20px; }
  #main-menu a { font-size: 160%; } 
  .menu-paavalikko-container { margin-top: 90px; }
  #main-menu a.some { width: 60px; height: 30px; margin-right: 0px; margin-top: 15px; }
  #main-menu #some-wrapper { top: 48px; }
  #page-header-container p { font-size: 15px; }
  .refe-cell, .hefe-cell { width: 100%; height: 305px; }
  .page-id-58 .hefe-cell { height: 475px; }
  .page-id-52 .refe-cell, .hefe-cell { height: 125px; }
}

@media screen and (max-height: 900px) {
  #main-menu a { font-size: 200%; }
}

/* ----------- iPad 1 and 2 and mini ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #youtube { display: block; }
    #movie { display: none; }
    #movie-wrapper { background-image: url(img/etusivu_fallback.jpg); }
  	#main-menu a { font-size: 200%; }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
    #youtube { display: block; }
    #movie { display: none; }
    #movie-wrapper { background-image: url(img/etusivu_fallback.jpg); }
  	#main-menu a { font-size: 200%; }
}

/* Blog stuff */

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

.blogi { width: 100%; }

}

blockquote {
  font-family: 'Slabo 27px', serif;
  font-size: 27px;
  border-left: 5px solid rgb(241,86,88);
  margin: 0.5em 0px;
  padding: 0px 15px;
}
blockquote:before {
  color: rgb(241,86,88);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}


/* Article toggle */

#article-toggle span::before, #article-toggle span::after { background-color: black; }

.single-post h3 { margin-bottom: 30px; font-size: 26px; }
.single-post { margin-bottom: 50px; }
.single-post p { margin-bottom: 45px; }
.single-article { max-width: 50%; float: left; margin-bottom: 100px;}
.single-article h1 { margin-top: 45px; margin-bottom: 45px; }
.single-article h3  { margin-top: 30px; margin-bottom: 30px; font-size: 26px; letter-spacing: 0px; }
.single-article p a { color:#95c5c0; }
.single-article p a:hover { text-decoration: underline!important; }
.single-sidebar { float: left; margin-left: 50px; width: 30%; margin-top: 3em; }
.single-sidebar a { font-size: 16px; }
.single-sidebar ul li { list-style: none; }
.single-sidebar ul { padding: 10px 0px 10px 0px; }
.sidebar-header { font-size: 20px; margin-bottom: 25px; font-family: 'HurmeGeometricBlack'; text-transform: uppercase; }

.sharer { margin-top: 75px; margin-bottom: 75px; }
.sharer a { margin-left: 5px; margin-right: 5px; }
.author-data { position: relative; margin-bottom: 45px; }
.author {  position: absolute; margin-left: 20px; font-size: initial; margin-top: 0.6em; }
.author-meta-outro {  position: absolute; margin-left: 25px; font-size: initial;}
.author-meta { padding 5px; }
.avatar { float: left; border-radius: 100%; }
.post-divider { display: block; height: 20px; border: 0; border-bottom: 1px solid #ccc; padding: 0; margin: 0em 0em 2em 4.3em;  }
.blog-divider { display: block; height: 58px; border: 0; border-bottom: 1px solid #ccc; padding: 0; margin: 0em 0em 2em 4.3em;  }
.author-outro { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; min-height: 100px; padding: 20px 20px 20px 0px; position: relative; }
.thedate { font-size: 70%; margin-left: 20px; position: absolute; margin-top: 2.3em; }
.moretext { text-transform: uppercase; color: #95c5c0; margin-top: 25px; margin-bottom: 25px; font-family: 'HurmeGeometricBlack'; }
.blogi { max-width: 60%; }

/* Cookie consent box */
body #db-gdpr-cookie-consent { background-color: #101e2c; border-top: 1px solid #101e2c; color: #fff; }
body #db-gdpr-cookie-consent .right-column .button { border: 4px solid #fff; background-color: #101e2c; font-family: 'HurmeGeometricBlack'; text-transform: uppercase; letter-spacing: 2px; }
body #db-gdpr-cookie-consent .right-column a:nth-child(2) { border: 4px solid #999; color: #999; }