body {
    background-image:url('../Images/homebg.png');
    background-position:right bottom;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

#whiteScreen {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:#fff;
    z-index:999;
}

#background {
    width:100%;
    height:100% !important;
    opacity:0.08;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}

#social {
    position:absolute;
    top:10px;
    right:45px;
}
#social a {
    display:inline-block;
    height:40px;
    margin:0 5px;
    border-radius:40px;
    overflow:hidden;
    transition:background ease .3s, border ease .3s;
    border:1px solid #222;
}
#social a:hover {
    background:#20D4CA;   
    border:1px solid #777;
}
#social a img {
    height:100%;
    transition:filter ease .3s, -webkit-filter ease .3s
}
#social a:hover img {
    -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
    filter: invert(100%);
}

header {
    position:absolute;
    top:40px;
    left:50px;
    right:50px;
}
header a {
    color:#222;
    transition:color ease .3s;
}
header a:hover {
    color:#00B4AA;
}

header img#logo {
    position:absolute;
    top:0;
    left:0;
    width:85px;
}
header h1 { 
    position:absolute;
    top:10px;
    left:100px;
    font-size:14px;
    line-height:20px;
}
header h2 {
    font-family:'Korolev',sans-serif;
    position:absolute;
    top:30px;
    left:100px;
    font-weight:normal;
    font-size:20px;
    line-height:20px;
}
header div#header-phone {
    position:absolute;
    top:30px;
    right:0;
}
header hr {
    position:absolute;
    top:55px;
    left:100px;
    right:0;
    height:1px;
    border:none;
    background-color:#00B4AA;
}
header h3 {
    position:absolute;
    top:60px;
    left:100px;
    font-weight:lighter;
    font-size:13px;
    line-height:20px;
    color:#00B4AA;
    text-shadow:1px 1px 1px #fff;
}
header div#header-mail {
    position:absolute;
    top:60px;
    right:0;
}
header div i {
    padding-right:10px;
}

#contentTable {
    display:table;
    width:100%;
    height:100%;
    min-height:600px;
    padding:150px 50px 40px 50px;
}
#elifImageCell {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:360px;
    height:100%;
    background-image:url('../Images/Elif-2.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}

#blogAndMenuCell {
    display:table-cell;
    text-align:right;
    vertical-align:middle;
}

#menuTable {
    display:table;
    width:100%;
    margin-bottom:50px;
}
#menuTable .menuCell {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
#menuTable .menuCell a {
    padding:0 10px;
    display:inline-table;
    width:120px;
    height:120px;
    border-radius:150px;
    background-image:url('../Images/menubg.jpg');
    background-size:cover;
    font-weight:light;
    color:#00B4AA;
    font-size:14px;
    cursor:pointer;
    transition:background ease .3s, color ease .3s, text-shadow ease .3s;
    border-left:2px solid #00B4AA;
    border-right:2px solid #00B4AA;
}
#menuTable .menuCell a:hover {
    background-image:url('../Images/menubg2.jpg');
    color:#fff;
}
#menuTable .menuCell a span {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

#blogTables {
    
}
#blogTables .blogTable {
    /*display:none;*/
    margin-top:70px;
}
#blogTables .blogTable .blogTable-header {
    display:table;
    width:100%;
    background-image:url('../Images/gradient-green-line.fw.png');
    background-size:contain;
    background-position:bottom center;
    background-repeat:no-repeat;
}
#blogTables .blogTable .blogTable-header .blogTable-header-title {
    display:table-cell;
    text-align:left;
    vertical-align:middle;
    font-size:16px;
    line-height:25px; 
}
#blogTables .blogTable .blogTable-header .blogTable-header-title img {
    height:20px;
    margin-bottom:-4px;
    margin-right:5px;
}
#blogTables .blogTable .blogTable-header .blogTable-header-datetime {
    display:table-cell;
    text-align:right;
    vertical-align:bottom;
}
#blogTables .blogTable .blogTable-content {
    padding:30px 0;
    overflow-y:hidden;
    line-height:20px;
    height:130px;    
    text-align:left;
}
#blogTables .blogTable .blogTable-readMore {
    margin:10px 0;
    display:inline-block;
    padding:10px 15px;
    background:#00B4AA;
    color:#fff;
    cursor:pointer;
    transition:background ease .3s, color ease .3s;
}
#blogTables .blogTable .blogTable-readMore:hover {
    background:#11D4CA;
    color:#222;
}
@media (max-width:1200px) {
    #elifImageCell { width:270px; }
}
@media (max-width:1100px) {
    #contentTable { padding:200px 50px 40px 50px; }
    #menuTable { display:block; text-align:center; }
    #menuTable .menuCell { display:inline-block; padding:10px 30px; }
}
@media (max-width:1000px) {
    #elifImageCell { width:300px; }
    #menuTable .menuCell { padding:10px 15px; }
}
@media (max-width:900px) {    
    #contentTable { display:block; position:relative; }
    #elifImageCell { display:none; }
    #blogAndMenuCell { display:block; }
    #menuTable .menuCell { padding:5px; }    
}
@media (max-width:800px) {
    #social { right:25px; }
    header { left:30px; right:30px; }
    #contentTable { height:auto; padding:200px 30px 100px 30px; }
    #menuTable .menuCell { padding:10px 30px; }
}
@media (max-width:700px) {
    #social { top:105px; right:25px; z-index:900; }
    #social a { background:rgba(255,255,255,1); }
    header { top:0px; }
    header div#header-phone { top:10px; right:auto; left:0px; }
    header div#header-mail { top:10px; right:auto; left:300px; }    
    header img#logo { top:60px; }
    header h1 { top:70px; }
    header h2 { top:100px; }
    header hr { top:125px; }
    header h3 { top:130px; }    
}
@media (max-width:650px) {
    #menuTable .menuCell { padding:10px 20px; }
    #blogTables .blogTable .blogTable-header { display:block; }
    #blogTables .blogTable .blogTable-header .blogTable-header-title { display:block; }
    #blogTables .blogTable .blogTable-header .blogTable-header-datetime { display:block; text-align:right; color:#777; }
}
@media (max-width:600px) {
    #social { top:185px; }
    #social a { background:transparent; }
    header div#header-phone { top:10px; left:0; width:100%; text-align:center; }
    header div#header-mail { top:40px; left:0; width:100%; text-align:center;}
    header img#logo { top:90px; }
    header h1 { top:100px; left:0; width:100%; text-align:right; }
    header h2 { top:120px; left:0; width:100%; text-align:right; }
    header hr { top:145px; }
    header h3 { top:150px; left:0; width:100%; text-align:right; }    
    #menuTable { margin-top:50px; }
    #menuTable .menuCell { padding:10px; }
    #blogTables .blogTable .blogTable-content { height:230px; }    
}
@media (max-width:540px) {
    #menuTable .menuCell { padding:5px; }
}
@media (max-width:420px) {
    body { background:transparent; }
    #social { top:105px; right:3%; }
    #social a { display:block; height:35px; margin-bottom:10px; }
    header { text-align:center; left:5px; right:5px; }
    header img#logo { position:relative; width:auto; height:110px; }
    header h1 { display:block; position:relative; text-align:center; font-size:16px; line-height:25px; }
    header h2 { display:block; position:relative; text-align:center; font-size:20px; top:100px; margin-top:10px; line-height:25px; }
    header hr { display:none; }
    header h3 { display:block; position:relative; text-align:center; font-size:16px; top:100px; margin-top:10px; line-height:25px; }
    #menuTable { margin-top:200px; }
}