/*------------------------------
Siiiimple v1.3  

Website: siiiimple.eu.pn

Free to use under the MIT license. 
--------------------------------*/


/*---------------------------------------
Changes in v1.3: 

1. The example grids have been re-added
to index.html

2. The github files have been re-named
to index.html, and simple.css

3. There is some unnecessary code at 
the bottom of simple.css for the example
grids. You may remove that code if you 
wish

4. In the head of index.html there is a 
link to google font's open sans. I like
it, but you can remove it if you wish
----------------------------------------*/

/*----------------------------------------
Minor Fixes in v1.3

1. Changed only breakpoint from 530px to 
768px

2. Changed max-width to 1080px from 1030px

3. License changed from GPL to MIT
----------------------------------------*/


/*---------------------------------------
Usage Notes:

You may want to change the Padding,
Media Queries, Min-width, and Max-Width for 
each Project.
-----------------------------------------*/

/*Need Don't Touch*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}

/*Helps With Images*/

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

/*Container*/

.span {
    width:100%;
    min-width:260px;
    max-width:1030px;
    margin:0 auto; 
}

/*Clears Childern Elements*/

.span:after {
  content: "";
  display: table;
  clear: both
}

/*Floats and Pads*/

[class*='loop'] {
  float: left;
  padding: 10px; 
}

/*The Grid*/

.loop-1 {width: 9.1%;}

.loop-2 {width: 16.6%;}

.loop-3 {width: 25%;}

.loop-4 {width: 33.3%;}

.loop-5 {width: 41.6%;}

.loop-6 {width: 50%;}

.loop-7 {width: 58.3%;}

.loop-8 {width: 66.6%;}

.loop-9 {width: 75%;}

.loop-10 {width: 83.3%;}

.loop-11 {width: 90.9%;}

.loop-12 {width: 100%;}


/*--------------------------------
The Second Grid: 

I really dont use this grid to much, 
however you can if you want. To use 
it simply take 100, and divide it 
by the number following the syntax.
--------------------------------*/

.loop_1 {width: 100%;}

.loop_2 {width: 50%;}

.loop_3 {width: 33.3%;}

.loop_4 {width: 25%;}

.loop_5 {width: 20%;}

.loop_6 {width: 16.6%;}

.loop_7 {width: 14.285%;}

.loop_8 {width: 12.5%;}

.loop_9 {width: 11.1%;}

.loop_10 {width: 10%;}

.loop_11 {width: 9.09%;}

.loop_12 {width: 8.333%;}


/*Break Point - You may want to edit,
and possibly add more break points*/

@media (max-width: 768px) {
    .loop-1,
    .loop-2,
    .loop-3,
    .loop-4,
    .loop-5,
    .loop-6,
    .loop-7,
    .loop-8,
    .loop-9,
    .loop-10,
    .loop-11,
    .loop-12 {
        width:100%;
    }
}

@media (max-width: 768px) {
    .loop_1,
    .loop_2,
    .loop_3,
    .loop_4,
    .loop_5,
    .loop_6,
    .loop_7,
    .loop_8,
    .loop_9,
    .loop_10,
    .loop_11,
    .loop_12 {
        width:100%;
    }
}

/*This code is for the index.html, and 
is not needed for Siiiimple to work*/

body {
    color:#fff;
    font-size:16px;
    text-align:center;
	font-family: 'GFS Neohellenic', sans-serif;
    background-color:#FCFFF5;
}

.header {
    color:#193441;
    font-size:50px;
    margin-bottom:50px;
}

.block {
    width:100%;
    height:auto;
    padding-top:15px;
    padding-bottom:15px;
    border-radius:2px;
    background-color:#3E606F;
}

P.intro
{
	padding: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align:justify;
	text-justify:inter-word;
}	
IMG.nopadd
{
    display: block;
    margin-top: -15px;
    margin-bottom: 15px;
}

a {
    color:#D1DBBD;
    text-decoration:none;
}

a:hover {
    color:#FCFFF5;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.loc_gr {
position:relative;
top:10px;
left:10px;
z-index:99999;
}

.loc_gr a {
width:73px;
height:50px;
text-indent:-9999px;
display:block;
background:url('./assets/greek.png') no-repeat;
}

.loc_en {
position:relative;
top:10px;
left:10px;
z-index:99999;
}

.loc_en a {
width:73px;
height:50px;
text-indent:-9999px;
display:block;
background:url('./assets/english.png') no-repeat;
}