@import "compass/css3";


#overlay{ /* we set all of the properties for our overlay */
   
    width:90%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:absolute; position:fixed;
    top:5%;
    left:5%;
    z-index:1000000000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:50000;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find our mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}






* {
    /* box-sizing: border-box; */
}
.flex-container-arac {
  display: flex;
  flex-wrap: wrap;
  text-align: left; 
  max-width:1250px;
  margin:auto;
  
}

.flex-item-left-arac {
  background-color: #f5f5f5;
  padding: 0px;
  flex: 32%;
  max-width:32%;
  border:solid; border-width:0px; border-color:#dedede;
  margin-top:10px;
  margin-left:1%;
}

       .arac_alt_bol_1 { width:50%; }
	   .arac_alt_bol_2 { width:50%; }

/* Responsive layout - makes a one column-layout instead of a two-column layout */

@media (max-width: 1100px) {
  .flex-item-left-arac {
    flex-wrap: wrap;
    flex: 32%;
	max-width:32%;
	border:solid; border-width:0px; border-color:#dedede;
    margin-top:10px;
    margin-left:1%;
  }
       .arac_alt_bol_1 { width:50%; }
	   .arac_alt_bol_2 { width:50%; }
}


@media (max-width: 850px) {
  .flex-item-left-arac {
    flex-wrap: wrap;
    flex: 49%;
	max-width:49%;
	border:solid; border-width:0px; border-color:#dedede;
    margin-top:10px;
    margin-left:1%;
  }
  
      .arac_alt_bol_1 { width:55%; }
	  .arac_alt_bol_2 { width:45%; } 
}

@media (max-width: 570px) {
  .flex-item-left-arac {
    flex: 96%;
	max-width:96%;
	border:solid; border-width:0px; border-color:#dedede;
    margin-top:10px;
    margin-left:2%;
	margin-right:2%;
  }
      .arac_alt_bol_1 { width:40%; }
	  .arac_alt_bol_2 { width:60%; } 
}