
/* ---------- DETAIL-ANSICHT ---------- */

@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 100; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-100.woff2') format('woff2'),  url('./addon/googlefonts/releway/raleway-v28-latin-100.woff') format('woff');  }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 200; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-200.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-200.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 300; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-300.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-300.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 400; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-regular.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-regular.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 500; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-500.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-500.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 600; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-600.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-600.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 700; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-700.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-700.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 800; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-800.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-800.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: normal; font-weight: 900; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-900.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-900.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 100; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-100italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-100italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 200; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-200italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-200italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 300; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-300italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-300italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 400; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 500; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-500italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-500italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 600; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-600italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-600italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 700; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-700italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-700italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 800; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-800italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-800italic.woff') format('woff'); }
@font-face { font-display:swap; font-family: 'Raleway'; font-style: italic; font-weight: 900; src: local(''), url('./addon/googlefonts/releway/raleway-v28-latin-900italic.woff2') format('woff2'), url('./addon/googlefonts/releway/raleway-v28-latin-900italic.woff') format('woff'); }

.os_main_left_td { display:none }
.os_main_shop { width:100% ; margin:0 ; padding:0 15px }

/* HEAD-BLOCK */

.os_head_detailmain { }
.os_main_left_td { margin-top:-20px }
.os_main_left_contentbox { padding-top:20px }
.os_content_all { padding-top:14px }

/* NAVI */

.os_detail_navi_na { color:#e1e1e1 }

/* Detailansicht - Innenbereich */

.os_detail_status h1 { font-size:1.5em ; color:#000 ; font-weight:bold  } 

.os_detail_maindiv { padding-top:10px }
.os_detail_maindiv h1 { font-weight:bold ; font-size:1.5em ; margin: 0 0 25px 0 ; line-height:1.6 } 
.os_detail_maindiv h2 { font-weight:bold ; font-size:1.5em ; margin: 0 0 25px 0 ; line-height:1.6 } 
.os_detail_maindiv .os_detail_boxscart .os_detail_aktion { font-size:0.417em ; font-weight:bold ; color:#9E233E ; text-transform:none }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv { margin:0 }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv a {  }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv input { color:#000 ; background:#fff }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv select { color:#000 ; background:#fff }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv .os_detail_boxscarthead { line-height:30px }
.os_detail_maindiv .os_detail_boxscart .os_detail_boxscartdiv .os_detail_boxscartklarna { padding:15px ; background:#f2f2f2 ; border-top:1px solid #d7d7d7 ; border-bottom:1px solid #d7d7d7 }
.os_detail_maindiv .os_detail_boxgallery .os_detail_picbigdiv { text-align:center }
.os_detail_maindiv .os_detail_boxgallery .os_detail_picbigdiv .os_detail_pic { width:100% ; max-width:450px ; height:auto ; margin-bottom:25px }
.os_detail_maindiv .os_detail_boxgallery .os_detail_picgaldiv {  }
#os_detail_amountscart { padding:2px ; margin-right:10px ; width:40px ; text-align:center }
#detailtmpdel { margin-bottom:15px ; line-height:18px }
#detailtmpdel img { display:none }
#detailtmpcon { padding-top:15px ; max-width:170px ; margin: 0 auto }
#detailtmpcon span{ height:27px }
#detailtmpbut { padding-top:15px }

.os_detail_toptable {  border-width:1px ; border-style:solid ; border-color:#e1e1e1 } 
.os_detail_toptabletd { padding:4px ; padding-left:10px ; padding-right:10px ; font-weight:bold }
.os_detail_galpic { border:1px solid #E1E1E1 ; margin-bottom:6px }
.os_detail_galpicact { border:1px solid #547EB3 ; margin-bottom:6px }

.os_detail_price { font-size:1.333em ; font-weight:600 }
.os_detail_oldprice { padding-bottom:15px }
.os_detail_oldprice strike { color:#990000 }
.os_detail_oldprice img { margin: -5px 0 0 15px ; vertical-align:middle }
.os_detail_tax { padding-top:5px ; font-size:0.833em }
.os_detail_tax a { text-decoration:none }
.os_detail_tax span { display:inline !important }
.os_detail_sprice table { border:0 ; border-collapse:separate ; border-spacing:2px }
.os_detail_sprice td { background:#e1e1e1 ; padding:3px }
.os_detail_pricetab { padding:15px 0 20px 0 ; margin-top:10px ; line-height:18px ; border-top:1px dotted #e1e1e1 }
.os_detail_pricetab span { display:block }
.os_detail_pricetab .pricetab td { padding:4px 30px 4px 0 }
.os_detail_var1box .var1tit { padding:10px 0 6px 0 ; font-weight:600 }
.os_detail_var2box .var2tit { padding-bottom:6px ; font-weight:600 }
.os_detail_varprice { margin:8px 0 0 0 ; font-weight:600 }
.os_detail_vartab .var1tit { padding: 8px 30px 8px 0 ; font-weight:600 }
.os_detail_vartab .var2tit { padding: 8px 30px 8px 0 ; font-weight:600 }
.os_detail_shipping { margin-bottom:8px }
.os_detail_linktab { margin-top:20px }
.os_detail_linktab a { display:block ; padding:8px 0 8px 0 ; border-top:1px dotted #e1e1e1 }
.os_detail_linktab a:hover { font-weight:600 }
.os_detail_functab { padding: 15px 0 ; margin-top:30px ; border-top:1px dotted #d7d7d7 }
.os_detail_functab img { vertical-align:middle }
.os_detail_functab .social a { text-decoration:none ; padding-left:22px ; margin-right:20px }
.os_detail_functab .social .mail { background:url(./../icon_detail_mail.png) no-repeat left center }
.os_detail_functab .social .print { background:url(./../icon_detail_print.png) no-repeat left center }
.os_detail_functab .social .send { background:url(./../icon_detail_send.png) no-repeat left center ; margin-right:10px }
.os_detail_functab .social .save { background:url(./../icon_detail_save.png) no-repeat left center }
.os_detail_functab .social .social { padding:0 ; margin:0 0 0 10px ; display:inline-block ; width:32px ; height:32px ; vertical-align:middle }
.os_detail_functab .social .socmail { background:url(./../main/detail_social_mail.png) no-repeat left top }
.os_detail_functab .social .socfbook { background:url(./../main/detail_social_facebook.png) no-repeat left top }
.os_detail_functab .social .socgplus { background:url(./../main/detail_social_gplus.png) no-repeat left top }
.os_detail_functab .social .soctwitter { background:url(./../main/detail_social_twitter.png) no-repeat left top }
.os_detail_functab .social .socprinterest { background:url(./../main/detail_social_pinterest.png) no-repeat left top }
.os_detail_options { width:200px ; padding:5px ; -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px }
.os_detail_options_input { width:200px }
#os_detail_butscart , #os_detail_amountscart { display:inline ; vertical-align:middle }
.os_detail_cross { border:0 ; border-top:1px dotted #e1e1e1 ; border-collapse:separate ; border-spacing:0 ; width:100% }
.os_detail_cross td { border-bottom:1px dotted #e1e1e1 ; padding:3px ; line-height:18px }
.os_detail_stock3 ul { }
.os_detail_stock3 li { padding: 3px 0 3px 2px ; line-height:1.3 }

/* Detailansicht - Reiter */

.os_detail_descdiv { margin-top:20px ; margin-bottom:15px }
.os_detail_descdiv .nav-pills { border-collapse:collapse }
.os_detail_descdiv .tab-content .active { border:1px solid #e1e1e1 ; border-top:0 ; padding:30px ; margin-top:-1px }
.os_detail_descdiv .nav-pills li { border:1px solid #e1e1e1 }
.os_detail_descdiv .nav-pills li a { font-size:1.167em ; -webkit-border-radius:0px ; -moz-border-radius:0px ; border-radius:0px }
.os_detail_descdiv .nav-pills li.active a { color:#000 ; background:#fff ; font-weight:bold }
.os_detail_descdiv .nav-pills li.active { border-bottom:1px solid #fff }
#os_dettab_desc1 { font-size:1.167em ; line-height: 1.6; color:#363232 }
#os_dettab_desc1 a { text-decoration:underline }
#os_dettab_dollinfo a { text-decoration:underline }

.os_detail_offerwrapper { border:1px solid #e1e1e1 ; padding:15px 30px 30px 30px }
.os_detail_offerwrapper h4 { color:#000 ; margin: 0 0 25px 0 ; margin-top:2em }
.os_detail_offerwrapper .nav-pills { border-collapse:collapse }
.os_detail_offerwrapper .tab-content .active { border:1px solid #e1e1e1 ; border-top:0 ; padding: 25px 10px 25px 10px ; margin-top:-1px }
.os_detail_offerwrapper .nav-pills li { border:1px solid #e1e1e1 }
.os_detail_offerwrapper .nav-pills li a { -webkit-border-radius:0px ; -moz-border-radius:0px ; border-radius:0px }
.os_detail_offerwrapper .nav-pills li.active a { color:#000 ; background:#fff ; font-weight:bold }
.os_detail_offerwrapper .nav-pills li.active { border-bottom:1px solid #fff }

/* HACK : http://stackoverflow.com/questions/31472946/displaying-single-bxslider-within-bootstrap-tabs */
.os_detail_offerwrapper .tab-content > .tab-pane , .os_detail_offerwrapper .nav-pills > .pill-pane { display:block ; height:0 ; overflow-y:hidden }
.os_detail_offerwrapper .tab-content > .active , .os_detail_offerwrapper .nav-pills > .active { height:auto } 

.os_detail_offerwrapper .listwrap { text-align:center ; width:240px }
.os_detail_offerwrapper .listwrap .listthumb { margin:0 10px 10px 10px }
.os_detail_offerwrapper .listwrap .listtitle { width:80% ; height:60px ; overflow:hidden ; font-weight:600 }
.os_detail_offerwrapper .listwrap .listprice { padding-top:10px }
.os_detail_offerwrapper .listwrap .listpold { color:#990000 ; font-weight:normal ; display:inline-block ; padding-left:15px }
.os_detail_offerwrapper .thumb { width:80% ; height:auto }

/* Detailansicht - Rating */

.os_detail_ratewrapper .os_detail_ratelist { border-top:1px dotted #e1e1e1 ; padding:25px 0 12px 0 ; margin:18px 0 0 0 }
.os_detail_ratewrapper .os_detail_ratelist img { vertical-align:middle }
.os_detail_ratewrapper .os_detail_rateform td { padding:4px 5px 3px 0 }
.os_detail_ratewrapper .os_detail_ratecomall { display:block ; margin-top:10px ; font-style:italic }
.os_detail_ratewrapper .os_detail_ratecomall .os_detail_ratecomtit { font-weight:600 }

/* Detailansicht - Eingepackt-Meldung bei nicht-Ajax-Einpacken */

#os_detail_message { margin-bottom:15px ; color:#008000 ; font-weight:bold ; border:1px solid #008000 ; background:#D9FFD9 ; text-align:center  }
#os_detail_message a { display:block ; text-decoration:none ; color:#008000 ; padding:15px } 

/* SPEZIAL : Rückgabeseite nach Einpacken ohne Ajax (shop_scart_status.html) */

.os_detail_status_left { float:left ; width:400px }
.os_detail_status_left img { padding-left:30px }
.os_detail_status_right { float:right  ; width:500px ; padding-top:15px }

/* SPEZIAL : Youtube-Video responsive */

.os_detail_youtube { position:relative ; padding-bottom:56.25% ; height:0 ; overflow:hidden ; width:100% ; height:auto }
.os_detail_youtube iframe { position:absolute ; top:0 ; left:0 ; width:100% ; height:100% }
.os_detail_youtube.ratio4x3 { padding-bottom:75% }

/* SPEZIAL : Grössen Slider */

.os_detail_sizestab .stit h4 { margin: 2em 0 20px 0 }
.os_detail_sizestab th { border: 1px solid #e1e1e1 ; padding: 3px 6px ; font-size:0.8em ; font-weight:600 ; white-space:nowrap }
.os_detail_sizestab td { border: 1px solid #e1e1e1 ; padding: 3px 6px ; font-size:0.8em ; white-space:nowrap }
.os_detail_sizestab a { text-decoration:none !important }
.os_detail_sizestab a::before { font-family:FontAwesome ; content:"\f08e" ; margin-right:4px }
.os_detail_sizestab .table-responsive { border:0 }
.os_detail_sizestab .v1sel td { background:#f9f9f9}
.os_detail_sizeswrap p { font-size:1.3em }
.os_detail_sizeswrap .slicksizes { text-align:center }
.os_detail_sizeswrap .slicksizes > div img { width:100% }

@media ( min-width:992px ) {

	.os_detail_sizeswrap { margin-top:65px }
}

/* SPEZIAL : Varianten-Plugin */

#os_detail_konfigwrapper h1 { margin: 15px 0 }
#os_detail_konfigwrapper .os_head_detailmain { border-bottom: 1px solid #d7d7d7 ; padding-bottom:20px }
#os_detail_konfigwrapper .logo { float:right }
#os_detail_konfigwrapper .logo img { width:95px ; height:auto }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper { margin: 10px 0 15px 0 }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline { border-bottom: 1px solid #d7d7d7 ; padding-bottom:20px ; margin-bottom:20px }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline b { background:#fff ; padding: 5px 5px 5px 0 ; font-weight:600 ; font-size:1.50em }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline b.tit { padding:0 ; font-weight:normal ; font-size:1em  }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline .vrtext { font-size:1.125em ; margin: 15px 0 25px 0 }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline img { display:inline-block ; width:100% ; height:auto ; margin: 5px 0 }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label { float:left ; width:170px ; text-align:center ; cursor:pointer ; border: 3px solid #fff }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label.vractive { border: 3px solid #E4261D }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label div { font-weight:normal ; margin-bottom:10px ; margin-top:10px }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label div table { margin: 0 auto }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label div td { padding: 2px 3px ; color:#808080 }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline .vrcontent { text-align:center }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline .vrcontent span { display:block ; font-weight:normal }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline .bx-wrapper { margin:0 !important }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline .slick-track { margin:0 !important }
#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline input[type="radio"] { display:none }
#os_detail_konfigwrapper .konfigscart { z-index:200 ; position:fixed ; left:0 ; bottom:0 ; width:100% ; background:#f1f1f1 ; padding-top:30px ; padding-bottom:30px ; border-top: 3px solid #000 }
#os_detail_konfigwrapper .konfigscart .konfigship { font-size:1.5em ; color:#000 }
#os_detail_konfigwrapper .konfigscart .konfigship img { display:none }
#os_detail_konfigwrapper .konfigscart .konfigprice { font-size:1.5em ; color:#000 }
#os_detail_konfigwrapper .konfigscart .konfigsubmit { font-size:1.5em ; color:#fff ; background:#008000 ; border:0 ; padding: 10px 20px }

@media ( max-width:767px ) {

	#os_detail_konfigwrapper .logo img { width:65px }
	#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label { width:155px }
}

@media ( min-width:992px ) {
	
	#os_detail_konfigwrapper .os_detail_pluginvarradion_wrapper .vrline label { margin-right:9px ; margin-bottom:12px }
}

/* SPEZIAL : Weitere Bilder */

.os_detail_moregallery img { margin: 0 5px 5px 0}

/* SPEZIAL : Desc-Gallery */

.tpe-puppen-auswahl img { margin-right:15px ; margin-bottom: 15px;  }
.tpe-puppen-haarfarbe img { margin-right:15px ; margin-bottom: 15px; }
.tpe-puppen-hautfarbe img { margin-right:15px ; }

.tpe-puppen-auswahl { clear:both ; }
.tpe-puppen-haarfarbe  { clear:both ;  height:170px }
.tpe-puppen-haarfarbe-einreihig  { clear:both ;  height:173px }
.tpe-puppen-hautfarbe  {clear:both;  height:268px  }
.tpe-puppen-augenfarbe  {clear:both;  height:210px  }
.tpe-puppen-koepfe  {clear:both ;  height:344px  }
.tpe-puppen-koepfe-einreihig  {clear:both ;  height:173px  }
.tpe-puppen-koepfe-dreireihig  {clear:both ;  height:495px  }
.tpe-puppen-koepfe-sechsreihig  {clear:both ;  height:1023px  }
.tpe-puppen-fingernaegel  {clear:both ;  height:160px }
.tpe-puppen-fussnaegel  {clear:both ;  height:150px }
.tpe-puppen-intimbehaarung  {clear:both;  height:170px  }


div.capty-caption {
	background-color: #fff;
	color: #000;
	font-weight:bold;
	padding-left: 14px;
	padding-top: 1px;
	text-shadow: 1px 1px 0 #e5e5e5;
	font-size: 12px ;
	
height: 45px;
opacity: 0.6;
position: relative;
top: -45px;
}




div.capty-caption a {
	color: #318DAD;
	
	text-decoration: none;
	text-shadow: none;
}

div.capty-wrapper {
  margin-right:3px ; float:left ;
}




.sonderaktion2 { margin:0 0 40px 0 ;  }
.sonderaktion > h3 { color:#363232; font-weight:600 ; margin:2px 0 2px 0 ;  }

.os_kasten { background: #F8F8F8; padding:18px; margin-bottom:50px;   }

@media screen and (min-width: 480px) {

.os_aktion 
{ background-color: #F8F8F8 ;
 background-image: url(/images/dollpark-aktion-banderole.png) , url(/images/dollpark-aktion-frau.png) ;
 background-repeat: no-repeat, no-repeat;    
 background-size:auto, auto; 
 background-position: left top, left bottom ;
min-height:320px ;
  }

.sonderaktion { margin-left:120px } 	


}
 
 

 
 .dollsizetable td {  text-align:center  }
 
 @media (min-width: 992px) {  .dollsizetable { width:60%  }  }
 
 
@media(max-width:991px){
	 
	 .panel-wrapperx {
  position: relative;
}

.btnx, .btnx a , .btnx a:link, .btnx a:hover {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none !important; 
    margin-top: -550px;
}
.showx, .hidex {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
  margin-bottom: 18px;
  
}

.hidex {display: none;}
.showx:target {display: none;}
.showx:target ~ .hidex {display: block;}
.showx:target ~ .panelx {
   max-height: 3500px; 
}
.showx:target ~ .fadex {
  margin-top: 0;
  height: 50px;
}

.panelx {
  position: relative;
  margin: 2em auto;
  width: 100%;
  max-height: 250px;
  overflow: hidden;
  transition: max-height 1s ease;
  
}
.fadex {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 75%);
  height: 250px;
  margin-top: -250px;
  position: relative;
}


	 
	 }

	 
@import "bourbon";


/* colors */
$blue: #428BFF;
$red: #FF4A53;
$dark: #333;

$accent: $blue;
$accent-inactive: desaturate($accent, 85%);
$secondary: $accent-inactive;


/* tab setting */
$tab-count: 4;
$indicator-width: 50px;
$indicator-height: 4px;

/* breakpoints */
$breakpoints: (
  medium: #{$tab-count*250px},
  small: #{$tab-count*150px}
);


/* selectors relative to radio inputs */
$label-selector: "~ ul > li";
$slider-selector: "~ .slider";
$content-selector: "~ .content > section";

@mixin tabs(
  $label-selector: $label-selector,
  $slider-selector: $slider-selector,
  $content-selector: $content-selector) {
    
  @for $i from 1 through $tab-count {
    &:nth-of-type(#{$i}):checked {
      #{$label-selector}:nth-child(#{$i}) {
        @content;
      }

      #{$slider-selector} {
        transform: translateX(#{100% * ($i - 1)});
      }

      #{$content-selector}:nth-child(#{$i}) {
        display: block;
      }
    }
  }
}



.tabs {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  background: white;
  padding: 50px;
  padding-bottom: 80px;
  width: 70%;
  height: 250px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  border-radius: 5px;
  min-width: #{$tab-count * 60px};
  input[name="tab-control"] {
    display: none;
  }
  
  .content section h2,
  ul li label {
    font-family: "Montserrat";
    font-weight: bold;
    font-size: 18px;
    color: $accent;
  }
  
  ul {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    
    li {
      box-sizing: border-box;
      flex: 1;
      width: #{100%/$tab-count};
      padding: 0 10px;
      text-align: center;
      
      label {
        transition: all 0.3s ease-in-out;
        color: $secondary;
        padding: 5px auto;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        white-space: nowrap;
        -webkit-touch-callout: none;
        @include user-select(none);
        
        br {
          display: none;
        }
        
        svg {
          fill: $secondary;
          height: 1.2em;
          vertical-align: bottom;
          margin-right: 0.2em;
          transition: all 0.2s ease-in-out;
        }
        
        &:hover,
        &:focus,
        &:active {
          outline: 0;
          color: lighten($secondary, 15%);
          svg {
            fill: lighten($secondary, 15%);
          }
        }
      }
    }
  }
  
  .slider {
    position: relative;
    width: #{100%/$tab-count};
    transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
    .indicator {
      position: relative;
      width: $indicator-width;
      max-width: 100%;
      margin: 0 auto;
      height: $indicator-height;
      background: $accent;
      border-radius: 1px;     
    }

  }
  
  .content {
    margin-top: 30px;
    
    section {
      display: none;
      animation: {
        name: content;
        direction: normal;
        duration: 0.3s;
        timing-function: ease-in-out;
        iteration-count: 1;
      }
      line-height: 1.4;
      
      h2 {
        color: $accent;
        display: none;
        &::after {
          content: "";
          position: relative;
          display: block;
          width: 30px;
          height: 3px;
          background: $accent;
          margin-top: 5px;
          left: 1px;
        }
      }
    }
  }
  
  input[name="tab-control"] {
    @include tabs {
      > label {
        cursor: default;
        color: $accent;
        
        svg {
          fill: $accent;
        }
        
        @media (max-width: map-get($breakpoints, small)) {
          background: rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  @keyframes content {
    from {
      opacity: 0;
      transform: translateY(5%);
    }
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  
  @media (max-width: map-get($breakpoints, medium)) {
    ul li label {
      white-space: initial;
      
      br {
        display: initial;
      }
      
      svg {
        height: 1.5em;
      }
    }
  }
  
  @media (max-width: map-get($breakpoints, small)) {
    ul li label {
      padding: 5px;
      border-radius: 5px;
      
      span {
        display: none;
      }
    }
    
    .slider {
      display: none;
    }
    
    .content {
      margin-top: 20px; 
      section h2 {
        display: block;
      }
    }
  }
}
 
 
.testimonial.bottom_pos {
    padding: 60px 40px 40px 60px;
    text-align: left;
    margin-top: 0;
    margin-bottom: 50px;
}
.testimonial {position: relative; background:#f9f9f9; padding:85px 50px 45px 70px; margin:0 0px 4px 0; margin-top:45px; color:#656565; text-align:center; }
.testimonial-info{position: relative;}
.testimonial-info:before{position:absolute; top:-80px; left:-35px; color:#e41f1a; content: "\201C"; font-family: Georgia, serif; font-size:100px;}


/* ---------- END ---------- */
