article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
b {font-weight:600;}
a {font-size: 100%;vertical-align: baseline;background: transparent;text-decoration:none;}
a:hover {text-decoration:underline;}
ins {background-color: #fff;color: #000;text-decoration: none;}
mark {background-color: #ff9;color: #000; font-style: italic;font-weight:bold;}
del {text-decoration:  line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;}
table {border-collapse: collapse;border-spacing: 0;}
hr {display: block;height: 1px;border: 0;   border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}
input, select {vertical-align: middle;font-family:'Roboto';}

/* BASIC PAGE SETUP ============================================================================= */
body {}
button, input, select, textarea { color : #202020; }

/*  HEADINGS  ============================================================================= */
h1, h2, h3, h4, h5, h6 { font-weight:400;font-weight:400;margin-top: 0px;}
h1 { font-size :  1.7em;	margin-bottom : 0.2em;line-height : 1.3; }
h2 { font-size :  1.4em;	margin-bottom : 0.5em;margin-top : 0.5em;line-height : 1.2;}
h3 { font-size :  1.2em;	margin-bottom : 0.3em;line-height : 1.3; }
h4 { font-size :  1.1em;	margin-bottom : 0.5em;line-height : 1.25; }
h5 { font-size :  1em;		margin-bottom : 1.25em;}
h6 { font-size : 1em;	}


/*  TYPOGRAPHY  ============================================================================= */
p, ol, ul, dl, address { margin-bottom : .5em; font-size : 1em; /* 16 / 16 = 1 */ }
p {hyphens : auto;  }
ul, ol { margin :0; padding:0; }
li ul, li ol { margin : 0;font-size : 1em; /* 16 / 16 = 1 */ }
dl, dd { margin-bottom : 1.5em; }
dt { font-weight:400;font-weight:400; }
b, strong { font-weight:700; }
hr { display : block; margin : 1em 0; padding : 0;height : 1px; border : 0; border-top : 1px solid #ccc;}
small { font-size : 1em; /* 16 / 16 = 1 */ }
sub, sup { font-size : 75%; line-height : 0; position : relative; vertical-align : baseline; }
sup { top : -.5em; }
sub { bottom : -.25em; }
.subtext {	color: #000;	}

/* LINKS =============================================================================  */
/*a { color : #787200;}//-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;
	transition: all 0.3s ease;text-decoration: underline;}
*/
ul a {text-decoration:none;}
/*a span {-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}*/
	/*a:visited { color : #ee3344; }*/
/*a:focus { color : rgb(0,0,0); }*/
a:hover, a:active { outline : 0; }
a#backtotop {position:fixed;z-index:1000;bottom:10px;right:10px;
	background:url(../images/backtotop.png) no-repeat;background-size:100%;
	width:28px;height:30px;text-indent:-9000px;}


/* IMAGES ============================================================================= */
img {
border : 0;}/*max-width: 100%;}*/

img.floatleft { float: left; margin: 0 10px 0 0; }
img.floatright { float: right; margin: 0 0 0 10px; }


/* TABLES ============================================================================= */
table { border-collapse : collapse;border-spacing : 0;width : 100%; }
th, td, caption { padding : 0; }
tfoot { font-style : italic; }
caption { background-color : transparent; }


/*  SECTIONS  ============================================================================= */
.section {clear: both;padding: 0px;margin: 0px;}

/*  CODE  ============================================================================= */
pre.code {padding: 0;margin: 0;font-family: monospace;white-space: pre-wrap;font-size: 1.1em;}
strong.code {font-weight:400;font-weight:400;font-family: monospace;font-size: 1.2em;}
div.sql {font-size:11px;padding:15px 5px;display:block;color:#f00;white-space: pre;}

div.code {padding:20px;font-family:monospace;font-size:0.7em;background:#000;color:#fff;margin:10px 0 10px 0;}

/*  NOTES  ============================================================================= */
.note {position:relative;padding:1em 1.5em;margin: 0 0 1em 0;background: #fff;
	background: rgba(255, 255, 255, 0.5);overflow:hidden;}
.note:before {
	content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;
	border-color:transparent transparent #cccccc #cccccc;background:#cccccc;
	-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
	display:block; width:0; /* Firefox 3.0 damage limitation */}
.note.rounded {-webkit-border-radius:5px 0 5px 5px;-moz-border-radius:5px 0 5px 5px;border-radius:5px 0 5px 5px;}
.note.rounded:before {
	border-width:8px;border-color:#fff #fff transparent transparent;
	-webkit-border-bottom-left-radius:5px;-moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;}

/*  GLOBAL OBJECTS ============================================================================= */
.breaker { clear: both; }
.group:before,
.group:after {content:"";display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 (trigger hasLayout) */}
.floatleft{float: left;}
.floatright{float: right;}
*{ outline:none;}
a:focus {outline: none; }
div.clear {clear:both;height:0px;}
div.clearright {clear:right;height:0px;}
div.clearleft {clear:left;height:0px;}

/* VENDOR-SPECIFIC ============================================================================= */
html { -webkit-overflow-scrolling : touch; -webkit-tap-highlight-color : rgb(52,158,219);
	-webkit-text-size-adjust : 100%; -ms-text-size-adjust : 100%; }
.clearfix { zoom : 1; }
::-webkit-selection { background : #00354D; color : rgb(250,250,250); text-shadow : none; }
::-moz-selection { background : #00354D; color : rgb(250,250,250); text-shadow : none; }
::selection { background : #00354D; color : rgb(250,250,250); text-shadow : none; }
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance : button; }
::-webkit-input-placeholder {font-size : .875em; line-height : 1.4; }
input:-moz-placeholder { font-size : .875em; line-height : 1.4; }
.ie7 img,.iem7 img { -ms-interpolation-mode : bicubic; }
input[type="checkbox"], input[type="radio"] { box-sizing : border-box; }
input[type="search"] { -webkit-box-sizing : content-box;-moz-box-sizing : content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { padding : 0;border : 0; }
p {/* http://www.w3.org/TR/css3-text/#hyphenation */-webkit-hyphens : auto;-webkit-hyphenate-character : "\2010";-webkit-hyphenate-limit-after : 1;
	-webkit-hyphenate-limit-before : 3;-moz-hyphens : auto; }


/* Responsivenewss ============================================================================= */
/* ============================================================================================= */
.section {clear: both;padding: 0px;margin: 0px;}
.col {display: block;float:left;margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
}

/* GRAVITY.GR CSS  ============================================================================= */
.relative {position:relative;}
a {text-decoration:none;}
a:hover {text-decoration:none;}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

div.cmsOptions {display: block;
    position: absolute;
    top:113px;
    left: 52px;
    z-index: 20;
    padding: 0 5px 0px;box-sizing: border-box;
    line-height: 18px;
    height: 18px;transition:.2s;
    border-bottom-right-radius: 4px;}
div.cmsOptions a {color:#000;font-size:11px;line-height:20px;display:inline-block;padding:0 4px;
    height:20px;}
div.cmsOptions:before {content:"";display:block;position:absolute;
    top:-4px;left:-4px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:-1;
    background-color: rgb(255, 242, 0);z-index:-1;
}
div.cmsOptions:after {content:"";display:block;position:absolute;
width:100%;height:100%;z-index:-1;top:0;left:0;
    border:1.5px solid rgba(35, 31, 32);
}

    div.cmsOptions a:hover {text-decoration: underline;}
/** {    transition:0.5s;}*/
.sticky div.cmsOptions {height: 14px;transition:.2s;border-radius: 4px;bottom: 0;}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  /*-webkit-text-fill-color: #fff;*/
  -webkit-box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
}



div.contactFormWrap {border-top:1px solid rgba(239,239,239,1);
    background-color:rgba(247, 247, 247,1); }
div.contactForm {width: 100%;max-width: 940px;margin:0 auto;
    box-sizing: border-box;padding:35px 35px 70px}
div.contactForm h2 {color: #231f20;font-family: "Roboto";font-size: 36px;
    margin:0 0 15px 0;padding:0 0 0;position:relative;
    font-weight:300;}

div.contactFormWrap label {display:none;}

form.contactForm {display:flex;
    align-items: flex-end;
    justify-content: space-between;}
form.contactForm input.submit {width:192px;
    background-color: #fff;cursor: pointer;display:block;
    color: #231f20;
    font-family: "Roboto Condensed";
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 4.2px;border:1px solid rgba(35, 31, 32);
    text-align:center;
    height:34px;line-height:34px;}
form.contactForm div.fields {width:calc(100% - 220px);
    display:flex;justify-content: space-between;
    align-items: flex-end;flex-wrap:wrap;
    }
form.contactForm div.fields input {flex-grow:0;
    background-color: transparent;
    border:0;border-bottom:1px solid rgb(185, 184, 185);
    height:27px;line-height: 27px;margin:15px 0 0;
    color: #000;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields textarea {
    background-color: transparent;
    border:0;border-bottom:1px solid rgb(185, 184, 185);
    height:60px;line-height: 27px;margin:15px 0 0;
    color: #000;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields input.contact_name {width:calc((100% - 20px) * 0.5);}
form.contactForm div.fields input.contact_lastname {width:calc((100% - 20px) * 0.5);}
form.contactForm div.fields input.contact_email {width:calc((100% - 20px) * 0.58);}
form.contactForm div.fields input.contact_phone {width:calc((100% - 20px) * 0.42);}
form.contactForm div.fields textarea.contact_message {width:100%;}


form.contactForm div.fields input::-webkit-input-placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields input:-ms-input-placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields input::placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields textarea::-webkit-input-placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields textarea:-ms-input-placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}
form.contactForm div.fields textarea::placeholder {  color: #231f20;font-family: "Roboto";font-size: 14px;font-weight: 300;}


@media only screen and (max-width:780px){
    form.contactForm {display:block;}
    form.contactForm div.fields {width:100%;}
    form.contactForm input.submit {margin:40px auto;}
}
@media only screen and (max-width:400px){
    form.contactForm div.fields {display:block;}
    form.contactForm div.fields input.contact_name {width:100%;}
    form.contactForm div.fields input.contact_lastname {width:100%;}
    form.contactForm div.fields input.contact_email {width:100%;}
    form.contactForm div.fields input.contact_phone {width:100%;}
}




div.footerbarWrap {background-color:rgba(35, 31, 32);padding:32px 41px;position:relative;transition:.2s;}
div.footerbar{background-color:rgba(35, 31, 32);display:flex;justify-content:flex-end;transition:.2s;}

div.info a {display:inline-block;color: #fff;font-family: "Roboto";font-size: 14px;font-weight: 300;
    height:37px;line-height: 37px;background-repeat: no-repeat;
    background-position: 0 50%;margin-right:15px;transition:.2s;}
div.info a.phone {background-image:url('/images/footer_phone.png');padding-left:24px;}
div.info a.mobile {background-image:url('/images/footer_mob.png');padding-left:22px;}
div.info a.email {background-image:url('/images/footer_email.png');padding-left:24px;}
div.info a.address {background-image:url('/images/footer_address.png');padding-left:24px;}

div.social a {display:inline-block;text-indent:-9000px;height:37px;width:37px;
    margin:0 0 0 15px;background-repeat: no-repeat;background-position: 50%;transition:.2s;}
div.social a.facebook {background-image: url(/images/footer_fb.png)}
div.social a.instagram {background-image: url(/images/footer_instag.png)}
div.social a.twitter {background-image: url(/images/footer_twitter.png)}

div.footerbarWrap a.gravity {position:absolute;display:block;height:37px;line-height: 37px;
    color: #9a9a9a;font-family: "Roboto";font-size: 12px;font-weight: 300;
    left:41px;bottom:32px;transition:.2s;}

@media only screen and (max-width:1200px){
   div.footerbarWrap a.gravity {display:none;}
}
@media only screen and (max-width:1090px){
    div.footerbar {justify-content:space-between;}
    div.info a {display:block;padding-left:25px;}
    div.info a.mobile {padding-left:25px;background-position:1px 50%;}

    div.footerbarWrap a.gravity {display:block;left:auto;right:41px;}
}
@media only screen and (max-width:620px){
    div.social a {margin:5px 0 7px;}
    div.footerbarWrap {padding:20px 20px;position:relative;}
    div.footerbarWrap a.gravity {display:block;left:auto;right:20px;bottom:20px;}
}
@media only screen and (max-width:550px){
    div.social a {display:block;}
    div.footerbarWrap {padding-bottom:35px;}
    div.footerbarWrap a.gravity {bottom:5px;}
}


@media only screen and (max-width:450px){
    div.footerbar {display:block;padding-top:65px;}
    div.social {position:absolute;display:block;top:20px;left:20px;right:20px;text-align:center;}
    div.social a {display:inline-block;margin:0 5px 0 5px;}
    div.info a {line-height:20px;height:auto;margin-bottom:15px;}

}



.extradownlinks {display:flex;flex-wrap:nowrap;align-content: stretch;margin:50px auto;width:95%;max-width:1000px;}
.extradownlinks>div {flex-grow: 1;width:50%;border:1px solid rgb(255, 242, 4);padding:31px 28px;}
.extradownlinks>div:nth-child(2) {border-left:0;}
.extradownlinks>div h4 {color: #231f20;
font-family: "Roboto Condensed";margin:0;padding:0;font-size: 24px;font-weight: 300;letter-spacing: 4.8px;}


.extradownlinks>div ul {margin:25px 0 40px;padding:0;list-style:none;}
.extradownlinks>div ul > li {padding-left:27px;line-height:1.4;padding-bottom:10px;
    background:url(/images/text_sep.png) no-repeat;background-position: 0 3px;}
.extradownlinks>div ul > li a {color: #7d7879;font-family: "Roboto Condensed";font-size: 16px;font-weight: 300;}

@media only screen and (max-width:500px){
    .extradownlinks {flex-wrap:wrap;}
    .extradownlinks>div {width:100%;}
    .extradownlinks>div:nth-child(2) {border-left:1px solid rgb(255, 242, 4);border-top:0;}
    .extradownlinks>div ul {margin:15px 0 0px}
}

ul.newslist {list-style:none;margin:0 auto;width:95%;max-width:1000px;display:flex;
    align-items:stretch;flex-wrap: wrap;}
ul.newslist li {width:32%;margin-right:2%;padding-bottom:30px;}
ul.newslist li:nth-child(3n+3) {margin-right:0;}
ul.newslist li a {display:block;;}
/*ul.newslist li img {}*/
ul.newslist li div.imageholder {width:100%;padding-bottom:100%;height:0;position:relative;    overflow-y: hidden;}
ul.newslist li div.imageholder img {width:100%;height: 100%;position: absolute;top:0;left:0;right:0;bottom:0;object-fit: cover;}
ul.newslist li header {margin:10px 0;padding:0;}
ul.newslist li header span.date {color: #717171;font-family: "Roboto Condensed";font-size: 11px;font-weight: 300;letter-spacing: 3.3px;}
ul.newslist li header h1 {color: #888888;font-family: "Roboto";font-size: 16px;font-weight: 300;margin:10px 0 0 0;padding:0;}

a.hovercross .imageholder:after{content:"";
    position:absolute;top:50%;left:50%;right:50%;bottom:50%;
        background-color:rgba(255,255,255,.25);transition:.1s;
        background-repeat: no-repeat;background-position: 50%;}
a.hovercross:hover .imageholder:after{content:"";
        top:10px;left:10px;right:10px;bottom:10px;
        background-image: url(/images/more_big_yellow.png);}

@media only screen and (max-width:800px){
    ul.newslist li {width:49%;margin-right:2%;}
    ul.newslist li:nth-child(3n+3) {margin-right:2%;}
    ul.newslist li:nth-child(2n+2) {margin-right:0;}
}

div.contactFormReturn h4 {margin:30px 0 15px;}
div.contactFormReturn ul {padding-left:30px;margin:0 0 30px 0;}



div.homeprofile {background-color: #F4F4F4;padding:80px 130px 80px 50%;
    position:relative;transition: .2s;}
div.homeprofile:before {content:"";position: absolute;display: block;
    top:calc(50% - 191px);left:0;
    width:45%;top:0;bottom:0;background-position:0 50%;
    /*background: url(/images/profileleftback.png) no-repeat 100% 50%;*/
    background: url(/images/profileback2.png) no-repeat 100% 100%;
    transition: .2s;}
div.homeprofile h2 {
    color: #231f20;
    font-family: "Roboto";
    font-size: 50px;
    font-weight: 100;margin-bottom:20px;
}
div.homeprofile p {color: #231f20;
font-family: "Roboto Condensed";
font-size: 16px;
font-weight: 300;
line-height: 27px;padding-bottom:40px;}
div.homeprofile a.readmore {display:inline-block;text-indent: -9000px;
        width:37px;height:37px;background:url(/images/more_big_black.png) no-repeat 50%;
}

@media only screen and (max-width:1100px){
    div.homeprofile {padding-right:50px;}
}
@media only screen and (max-width:900px){
    div.homeprofile {padding-left:10%;padding-right:10%;}
    div.homeprofile:before {display:none;}
}
@media only screen and (max-width:650px){
    div.homeprofile {padding:40px 40px};
    div.homeprofile:before {display:none;z-index:-1;}
div.homeprofile h2 {font-size:35px;}
}



div.latestworks {padding-top:120px; padding-bottom:70px;}
div.latestworks h2 {text-align:center;
    font-size:50px;color:#231f20;font-weight:200;
    font-family:"Roboto";
}
div.latestworks ul {margin-bottom:30px;}
div.latestworks a.seeall {width:215px;box-sizing: border-box;
    padding-right:30px;height:30px;line-height: 30px;
    text-align: center;display:block;
    color: #231f20;
    font-family: "Roboto Condensed";
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    border:2px solid #fff200;position:relative;
    margin:0 auto 0;}
div.latestworks a.seeall:after {content:"";width:30px;height:26px;
        display:block;position:absolute;top:0;right:0;
        background: url(/images/more_big_black.png) no-repeat 50%;
        background-size: 15px;
        border-left:2px solid #fff200;font-size:26px;}

div.latestworks li:first-child {border-top: 2px solid #ececec;}
div.latestworks li {display:block;border-bottom: 2px solid #ececec;}
div.latestworks li a {display:block;display:flex;align-items: flex-end;
padding:0;}
div.latestworks li:nth-child(2n+1) a {flex-direction:row-reverse;}
div.latestworks li a div.data {width:50%;box-sizing: border-box;transition: .2s;
    padding:20px 55px 65px 55px;
    background: url(/images/more_big_yellow.png) no-repeat right bottom;
background-position: calc(100% - 40px) calc(100% - 20px); }

div.latestworks li a div.data label{color: #fff200;font-family: "Roboto Condensed";font-size: 60px;font-weight: 700;margin-bottom:10px;}
div.latestworks li a div.data h3 {color: #231f20;
font-family: "Roboto";
font-size: 26px;
font-weight: 300;margin-bottom:30px;}
div.latestworks li a div.data p {color: #231f20;
font-family: "Roboto Condensed";
font-size: 16px;
font-weight: 300;
line-height: 27px;
/*font-style: italic;*/}

div.latestworks li a div.img {width:50%;
    height:414px;position:relative;z-index:10;transition: .2s;
    background-size: cover;background-position: 50%;}

@media only screen and (max-width:900px){
    div.latestworks li a div.data {padding:20px 20px 60px;}
}


div.latestblog {padding-top:120px; padding-bottom:120px;background-color:#F4F4F4;}
div.latestblog ul {margin-bottom:40px;max-width:1000px;margin:0 auto;}


div.latestblog li {display:block;}
div.latestblog li div.homeblog {display:block;display:flex;padding:0;}
div.latestblog li div.homeblog div.data {width:calc(100% - 434px);box-sizing: border-box;transition: .2s;
    margin-left:64px;
    padding:0;}
div.latestblog li div.homeblog div.img {width:370px;height:370px;
    background-size: cover;background-position: 50%}

div.latestblog li div.homeblog div.data h4 {
    font-size:50px;color:#231f20;font-weight:200;
    font-family:"Roboto";}

div.latestblog li div.homeblog div.data h2{
    color: #231f20;
    font-family: "Roboto";
    font-size: 26px;
    font-weight: 300;
    margin-bottom:10px;}

div.latestblog li div.homeblog div.data span.recent {display:block;
color: #231f20;
font-family: "Roboto Condensed";
font-size: 12px;
font-weight: 400;
letter-spacing: 2.4px;margin:10px 0 30px;}

div.latestblog li div.homeblog div.data h3 {color: #231f20;
font-family: "Roboto Condensed";
font-size: 13px;color:#717171;
font-weight: 300;margin-bottom:30px;}
div.latestblog li div.homeblog div.data p {color: #231f20;
font-family: "Roboto Condensed";
font-size: 16px;
font-weight: 300;
line-height: 27px;}

a.readarticle {width:215px;box-sizing: border-box;
    padding-right:30px;height:30px;line-height: 30px;
text-align: center;display:block;
color: #231f20;
font-family: "Roboto Condensed";
font-size: 14px;
font-weight: 300;
font-style: italic;
border:2px solid #fff200;position:relative;
margin:30px 0 0 0;}
a.readarticle:after {content:"";width:30px;height:26px;
        display:block;position:absolute;top:0;right:0;
        background: url(/images/more_big_black.png) no-repeat 50%;
        background-size: 15px;
        border-left:2px solid #fff200;font-size:26px;}

div.videowrap {padding-bottom:120px;}
div.video {width:100%;height:386px;overflow: hidden;position: relative;
    background:url(/images/mob_video_image.jpg);background-size: cover}
div.video #mp4 {position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;/*height:386px;width:100%;*/
  z-index: 0; 
  overflow: hidden;}

  div.video > p {position:absolute;top:100px;text-align: center;
    font-size:36px;font-style: italic;color:#fff;
    left:10%;right:10%;}
    div.video > p span {display: block;margin-top:30px;font-size: 20px;}


@media only screen and (min-width:1000px){
    div.video > p em {display:block;height:0;}
}

@media only screen and (max-width:800px){
    div.videowrap {padding-bottom:80px;}
    div.video #mp4 {display:none;}
    div.video {width:100%;height:auto;overflow:visible;
    position: relative;}
    div.video > p {top:auto;position:relative;padding:50px 20px;left:auto;right:auto;
        font-size:24px;}

}



@media only screen and (max-width:650px){
    div.latestworks li a  {flex-wrap: wrap;}
    div.latestworks li a div.data {width: 100%;}
    div.latestworks li a div.img {width: 100%;height:300px;}
    div.latestworks li:nth-child(2n+1) a {flex-direction:row;}
    div.latestworks li a div.data h2 {margin-bottom:15px;font-size:22px;}
}
@media only screen and (max-width:450px){
    div.latestworks li a div.img {height:200px;}
}

@media only screen and (max-width:800px){
    div.latestblog {padding:40px 0 60px;margin-bottom:50px;}
    div.latestblog li div.homeblog  {flex-wrap: wrap;}
    div.latestblog li div.homeblog div.data {width: 100%;margin:0 10%;}
    div.latestblog li div.homeblog div.img {display:none;}
    div.latestblog li div.homeblog div.data h2 {margin-bottom:15px;font-size:22px;}


}