/*tz.css */
/*zuletzt bearbeitet am:
15.07.2017- Änderung donaport.html : Innenabstand rechts vergrößert
/*
Theme Name: Tanzhaus
Theme URL: http://www.tanzhaus-karlsruhe.de
Description:
Author: Harald Bäuerle
Author URL: http://www.tanzhaus-karlsruhe.de
zuletzt geändert 2016-12-20
unter Verwendung von:

Simple Responsive Template v 1.2
primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.
------------------------------------------------------------------------

BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/

/* typography */
body{	background: #c0c0c0; /* #000 ist gesamter seitenhintergrund !!*/
  font-family:"Comic Sans MS","Arial,sans-serif";
	/*font-size:1em;
	/*line-height:/*1.4em; HB*/
	color:#000;}                                                                           
                        
/*--------------------- structure ---Anfang---------------------------------*/   
.wrapper{ width: 92%; margin:auto;}
header   {	padding:0.2em; } HB    
#banner{ text-align:left; }


 .verweis {                   /* rückverweis zur startseite--------------*/
    clear:both;
    float:left;    
   }         
      


#hero,#page-header       /*-------dia-feld---------------------*/
  {
	background: #000;  /* #000  */
	/*border-top:1epx dashed #e2e2e2;
	border-bottom:1px solid #e2e2e2; Rahmen überflüssig  */
	padding:0.1em;
  border: 0.4em double #E1168B;
  margin: 0.1em ;
  }
  
#hero h1{	line-height:1.2em;margin-top:0px;	margin-bottom:0em;}

 /*--------------bastel beginn------------------*/

.flexslider .slides img {
    width:80%;
    height:80%;
    }

 
.slides img {
display: block;
width:80%;
height:80%;   }


 /*-----------------bastel ende------------------*/


#content {margin:0.2em 0 0 0;background:orange;}

aside {	margin:40px 0; background:lime; }

p{ margin:0 0 1.5em;}


/*--------------------------Struktur ENDE----------------------------------*/
 /*----------------------- ZENTRIERUNGEN ----------------------------------+*/

*#inhalte-zentriert {
  display:flex ;
  text-align:justify;
  justify-content: center;
  margin-bottom:2%;
  margin-top:2%;
  margin-right:5%;     
  margin-left:5%; 
  padding:2%;
  }           

.inhalte-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right:auto;
  margin-left:auto;
  }




#zentriert-mit-margin2  {
margin-top:1em;
margin-right:2%;
margin-bottom:1em;
margin-left:2%;
}







#zentriert-mit-margin25  {
margin-top:1em;
margin-right:25%;
margin-bottom:1em;
margin-left:25%;
}

#zentriert-mit-margin30  {
margin-top:1em;
margin-right:30%;
margin-bottom:1em;
margin-left:30%;
}

#zentriert-mit-margin40  {
margin-top:1em;
margin-right:40%;
margin-bottom:1em;
margin-left:40%;
}

  
 .zentriert400x150 {
clear: both;
position: absolute;
border: 5px double white;
background: #c0c0c0;
width:400px;
height: 150px;
top:50%;
left: 50%;
margin-top: -200px;
margin-left: -75px;
}

 
 .zentriert360x360 {
clear: both;
position: absolute;
border: 0px double white;
background: #000000; /*ORG#c0c0c0; */
width:360px;
height: 360px;
top:50%;
left: 50%;
margin-top: -180px;
margin-left: -180px;
}

#horizon     /* für horizontal zentrierte texte */
	{
	background-color: #000000;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block
	}

#textzentriert
	{
	margin-left: -125px;
	position: absolute;
	top: -35px;
	left: 50%;
	width: 250px;
	height: 70px;                                              
	visibility: visible;
  }

/*----------------------- ZENTRIERUNGEN ENDE ----------------------------------+*/


/*---------------------------------MAIN MENU-------------------------------*/
.menu-toggle{
	display:block;
	padding:10px;
	margin:20px 0 0;
	background:black;
	
	cursor:pointer;
	text-transform:uppercase;
	font-size:20px;
  border:1px solid #E1168B;}       /*Menurahmen für Mobiles*/

.menu-toggle.toggled-on{	background:black;}

.srt-menu{ 	display:none; clear:both; margin-bottom:60px;}	
.srt-menu.toggled-on{ display:block;position:relative;z-index:10;}

.srt-menu li a {
	background:black;
	display:block;
	margin:1px 0; 
	padding:10px;
	text-decoration:none; 
  color: #EEB01D; }
  
.srt-menu li a:hover{ 
    background:black; /*-------------white */
  color: #E1168B;}

.srt-menu li li a {
  background:black;
	padding-left:40px;
  color: #EEB01D;}

.srt-menu li li li a {
	background:black ;
	padding-left:80px;
  color: #EEB01D;}
/*--------------------------Main menu ende --------------------------------*/


/*---------------------SECONDARY MENU-Anfang---------------------------------
#secondary-navigation{
	margin-bottom:60px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:black;
	display:block;
	margin:5px 0; 
	padding:10px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:white;
	color:#E1168B;
}
 -------------------------------------secondary ende -----------------------*/

/*------------------------- GRIDS ANFANG------------------------------------*/

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:4px;
	/*positioning and padding*/
	position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
/*---------------- space grids end--------------------------------------->

/* Demo aus dem Head hieher veschoben-----------------------------------
#columnsdemo .grid_1,
            #columnsdemo .grid_2,
            #columnsdemo .grid_3,
            #columnsdemo .grid_4,
            #columnsdemo .grid_5,
 
 
            #columnsdemo .grid_6,
            #columnsdemo .grid_7,
            #columnsdemo .grid_8,
            #columnsdemo .grid_9,
            #columnsdemo .grid_10,
            #columnsdemo .grid_11,
            #columnsdemo .grid_12 {
            border: solid 1px #999;
            color:#999;
            text-align: center;
            margin-top:1em;
            padding:1em 0.5em;
            }
---------------------- Demogrid ende--------------------------------------*/
            
            
            
/*FOOTER*/
/*footer{  
	clear:both;
	font-size:80%;
	padding:20px 0;
}
footer ul{
	margin:0;
	padding:0;
}               */



/*
footer{ 
	background:black;
	color:green;
}
footer h1, footer h2, footer h3, footer h4{ 
	color:#CCC; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}                */

/*
a.buttonlink{ 
	background:#0099ff; 
	border-radius:7px; 
	color:#fff;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:10px;
	text-decoration:none;
}
a.buttonlink:hover{
	background:#8dbc01;
}
.greenelement{
	background:#5ec79e;
	color:#fff;
}
.violetelement{
	background:#887dc2;
	color:#fff;
}
*/


/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}


/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/}

.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:10px; /*this depends on the height of the logo*/
	float:right;}

} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/ 
@media only screen and (min-width: 920px) {

.wrapper{
	max-width: 1200px; 
	margin: .75em auto;   }

#banner{ 
	float:left; 
	text-align:left;
	margin-bottom:0px;}
  
#header {padding:0;}

#content {  
	float:left;
	width:65%;
}

#content.wide-content{
	float:none;
	width:100%;}


.flexslider{
    display:block;        /*am 11.05.2017:none*/ 
    width: 80%;
    height: 80%;
    margin:0% 3% 1% 3%;           /*test 28.07.20017*/   /*soweit "drückt" die diashow den Rahmen nach unten */
    background:black; 
    border: 8px solid #E1168B;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
-o-border-radius: 4px; 
border-radius: 4px; 
box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
-o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
}                       

aside { 
	float:right;
	width:30%;
}

/***------------------ MAIN MENU - ESSENTIAL STYLES--------------------- ***/
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
 
.srt-menu, .srt-menu * {       /*definieren linkfelder einzeln*/
	margin:			0;
	padding:		0;
	list-style:		none;
  border: 1px solid #E1168B; /* Rahmen um einzelfelder!!!! auch nochmal unten*/
background: black;
/*color: #E1168B;   */}

.srt-menu ul {
	position:		absolute;
	display:none;
	width:			12em; /* left offset of submenus need to match (see below) */
   border: 30px solid green;
  background: black;
  /*color: #E1168B; */}
  
  
.srt-menu ul li {
	width:100%;   }

.srt-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
  }

.srt-menu li {
	float:			left;
	position:		relative;
	margin-left:1px;}

.srt-menu li li {
	margin-left:0px; }
 
.srt-menu a {
	display:		block;
	position:		relative;
  color: #EEB01D;}
  
  
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
	display:block;
	left:			0;
	top:			45px; /* match top ul list item height */
	z-index:		99;
	-webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);  }
    
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
	top:			-999em;}
  
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
	left:			12em; /* match ul width */
	top:			0;}
  
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
	top:			-999em;}
  
ul.srt-menu li li li:hover ul,
ul.srt-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;}

/*** DEMO1 SKIN ***/          /* Aussenmenu , liegt unter den einzelnen*/
#topnav {                     /* Menufeldern */ 
	float:right;
	margin:  0.35em 0 0 0; 
  border:0;  
  background: black;
  color: #E1168B;}

.srt-menu {                       /* top-menu innerer aussenrand*/
	float:right;                    
	margin: auto /* .35em 0 0 0;  */ /* Abstände Aussenmenu nach aussen */           
 border: 0px solid black;  /* das ist der innere der zwei Aussengesamtränder*/
  background: black;
  color: #E1168B;}

.srt-menu a {
	text-decoration:none;

  background: black;
  color: #EEB01D;}

.srt-menu li a {            /* Eigenschaften Felder einzeln (innen)*/
	background:black;  /*Farbe der beiden Aussenfelder - nanu? */
	margin:0; 
	padding:10px 20px;
	height:45px;
  border: 0px dotted #E1168B;
  color: #E1168B;}

.srt-menu a  { /* visited pseudo selector so IE6 applies text colour*/
  background: black;
  color: #EEB01D;	}

.srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
background: black;     /*Eigenschaften Der Menufelder "visited" */
color: #EEB01D;}

/*-----------------versuchshalber auskommentiert-------------------
.srt-menu li li a {
		border-top:	1px solid orange;  /*Rahmen submenu*/    /*--------------
		background:		black; /*fallback for old IE*/         /*-----------
		background:black;
		color:	#E1168B;
		padding-left:20px;
		height:auto;
}
       ---------------------------------------------------------------*/


.srt-menu li li a:visited{color:white;}
.srt-menu li li li a,
.srt-menu li.current * li a{
	padding-left:20px;
	background:black;
}

.srt-menu li:hover > a{
color:#E1168B;
	background: white;
  }
.srt-menu li.current a{ 
	color:#E1168B;
	background:white;
  }
  /*                      laut WCSS3 Einlesefehler
.srt-menu li li: a{
	color:#E1168B;
	background:white;
}
                                    */


/*-------------------------GRID--Anfang--------------------------------------*/
/*   & Columns : 12  */

 .row{
	 margin-left: -15px;
     margin-right: -15px;
}
 
.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	float: left;
	display: block;
}

.rightfloat{float:right;}
/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
 */
 
#hero [class*="grid_"] { margin-bottom:-20px;}

}

 /*-------------------------GRID--ENDE--------------------------------------*/



/*-----------------  19: divs positioniert-anfang---------------------------*/

/* divs für menuzeile verwendet: */
#links  { float: left; border: px dotted yellow; padding: 0 2px 0 2px;
           height: auto; width: 124px;} 
#rechts { float: right; border: px dashed green; padding: 0 2px 0 2px; margin: 0 0 0 0em;}
/* divs für menuzeile verwendet:---ENDE---------------- */


/* divs für donaport verwendet: */

.port {border: 2px solid #E1168B; width: auto; height:auto; margin: 1em 0 1em 1em}

#portlinks  {float: left; border:0px dotted ; padding: 0 2px 0 2px; height: auto; width: auto; margin: 0em 0em 0em 0em;}
       
#portrechts { float:; border:5px dashed green; padding: 0 10px 10px 2px; height: auto; width: auto; margin: 0em 0em 0em 0em;}
/* divs für donaport verwendet:---------ENDE------------ */



 /*  divs für herkunft.html  */ 
 #flag1, #flag2, #flag3, #flag4, #flag5, #flag6,#flag7, #flag8
        {
         position: relative;
         background:black ;
         text-align:center;
         overflow: hidden;
         border: 0.01em #E1168b solid;
         float:left;
         height:auto;           /* org:auto  */
         width: 22%;           /* org: 9em  */
         margin: 0.2em; } 

#flag5 {clear:left;}
/*  divs ------für herkunft.html -------------------ENDE-------------- */ 


/* ----divs für kontakt.html  -------------------------------- */

 #konfeld1, #konfeld2, #konfeld3, #konfeld4, #konfeld5,#konfeld6, #konfeld7, #konfeld8, #konfeld9,
 #konfeld10, #konfeld11, #konfeld12, #konfeld13, #konfeld14,#konfeld15
        {
         position: relative;
         background:black ;
         text-align:center;
         vertical-align:middle;
         padding:auto;
         overflow: hidden;
         border: 0px #E1168b solid;
         float:left;
         height:auto;           /* org:auto  */
         width: 33%;           /* org: 9em  */
         margin: 0.2em; 
         padding: 0.2em ;
         } 

#konfeld4 {
           clear:left;       
}
/*----------kontakt.html  ENDE ---------------------------------*/ 

/* ----divs für tanzbild.html  -------------------------------- */

#tanzbild1, #tanzbild3, #tanzbild5 /*, #tanzbild7, #tanzbild9, #tanzbild11, #tanzbild13  */
        {
          position: relative;
         background:black ;
         text-align:center;
         vertical-align:middle;
         padding:auto;
         overflow: hidden;
         border: 1px #E1168b solid;
         float:left;
         height:auto;           /* org:auto  */
         width: 20%;           /* org: 9em  */
         margin: 0.2em; 
         padding: 0.2em ;} 

#tanzbild2, #tanzbild4, #tanzbild6 /*, #tanzbild8, #tanzbild10, #tanzbild12, #tanzbild14  */
        {
          position: relative;
         background:black ;
         text-align:center;
         vertical-align:middle;
         padding:auto;
         overflow: hidden;
         border: 1px #E1168b solid;
         float:left;
         height:auto;           /* org:auto  */
         max-width: 78%;           /* org: 9em  */
         margin: 0.2em; 
         padding: 0.2em ;} 


#tanzbild1, #tanzbild3, #tanzbild5  /*, #tanzbild8, #tanzbild10, #tanzbild12, #tanzbild14 */ {
           clear:both;                  
}
/*----------divs für tanzbild.html  ENDE ---------------------------------*/ 

/*-----------div für  index.html Felder-----------------*/
.divindex { border: 2px solid white; padding: 4px; width: 80%; height:25%; margin: 1% 10% 1% 10%; text-align:center; }                                                                                                




 /*   divs---- für ------  kopfnavigationn ---------------------  */
#divlinks  { float: left;  text-align:left; border: px dotted white; padding: 0 2px 0 2px; margin-left: 2em; margin-top: 1em;} 
#divrechts { float: right; text-align:right; border: px dotted white; padding: 0 2px 0 2px; margin-right: 2em; margin-top: 1em;}
#divlinks, #divrechts { width: 15%; }
#divmitte { float:left;  margin-top: 1em; text-align:center; width:60%; border: px solid white;} 

#auftritt {               /* div für Auftrittsverknüpfung im archiv*/
    	position: relative;
      margin: 0 0 0 0.5em;     /* Abstand von nächsten Element im FF*/
    	float:left;
      left:0.5em;
    	padding:0px;
      width:30%;             /* FF+IE*/
    	}
      
 /*   divs für   tanzbalkan.html ----------ENDE---------------------  */



/*-------------------- ab hier  DIA-Tabellenfelder---------------------*/
 /*FF*/
#feld1, #feld2, #feld3, #feld4, #feld5, #feld6,#feld7, #feld8, #feld9, #feld10, #feld11, #feld12
        {
         position: relative;
         background:black ;
         text-align:center;
         overflow: hidden;
         border: 1px #E1168b solid;
         float:left;
         height:auto;           /* org:auto  */
         width: 9em;           /* org: 9em  */
         margin: 0.2em; } 

#feld1, #feld5, #feld9   {clear:left;}
/*-------------------DIA-Tabellenfelder ENDE------------------------------*/
                           

.clearing {clear:both;}


* html #auftritt {
         position:absolute;
    	left: 0.1em;
    	margin:0 0 0 0 ;/* Abstand von nächsten Element im IE, "bottom" geht vor*/
      padding:0 0 0 0;
      border:20px solid #FF0000; /* rot für IE*/
         }

#anklicken {
    	position: relative;
         margin:-1em 0 0 0;     /* Abstand von nächsten Element im FF*/
    	right:0.1em;
    	padding:0 0 0 0;
         width:60%;             /* FF+IE*/
    	float:right;
         text-align:right;
         }

* html #anklicken {
         position:absolute;
         margin:0 0 0 0;
         right:0.1em;
    	padding:0 0 0 0;
         border:0px solid #FF0000; /* rot für IE*/
         }

.clearboth {
	clear: both; }


/*-----------------  19: divs positioniert-Ende---------------------------*/  


/*---------------------- Links-allgemein--------------------------- --------*/
                                                                                                                       
a,
a:link { text-decoration:none; font-weight:normal; color:#blue;}
a:visited {text-decoration:underline; font-style:normal;color: #pink;}
a:hover { text-decoration:none; font-weight:bold; color:#black;
 background:white; }   /*hover-Hintergrund für Image oben lks und Menu*/
a:active { text-decoration:none; font-weight:normal;font-style:italic;}
a:focus { text-decoration:underline;  }
/*---------------------Links allgemein ENDE---------------------------------*/  

/*  20  ------------Formatierung Schrift  Anfang ----------------------*/

h1, h2, h3, h4, h5, h6{
	font-weight:normal;
  font-family:"Comic Sans MS","Arial,sans-serif";
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
  font-style:normal;
  text-align:center;} 

h1 {

font-size:2.2em;
font-weight:bold;
text-decoration:underline ;
}
h2 
{
font-size:2em;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:#FFFFFF;
}

.tg, .tn, .tkfett, .tk {
font-style:normal;    
margin-top: 0px;
margin-bottom: 0px;
text-decoration:none ; }
 

.tg {
font-size:1.2em;
}


.tn {
font-size:1em;
}

.tkfett {
font-size:0.8em;
font-weight:bold;
}

.tk {
font-size:0.8em;
}

/* --------------------------------Formatierung Schrift  ENDE-------------*/
  

/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;} 

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {

} 

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }


/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}


 /* ENDE CSS */
 
 /*---------------------------------------------
 #flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.divgleichhoch {
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;

  width: 30%;
  padding: 20px;
  float: left;
  margin: 10px;
  border: 1px solid #aaa;
}
--------------------------------------------------------*/