@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


:root {
	--fontColor: #236b85;
	--fontColor: #2ca2a1;
}



html {
    height: auto;
    min-height: 100%;
    background-size:cover;
	background-color:#1c2b35;
	overflow-y:hidden;
}



html { 
  /* background: url(../img/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; */
}

body{
	width: 100%;
	margin: 0;
	/* -webkit-font-smoothing: antialiased; */
	/* -moz-osx-font-smoothing: grayscale; */
	/* backface-visibility: hidden; */
	/* transform: translateZ(0); */
	/* -webkit-font-smoothing: subpixel-antialiased; */
	/* -webkit-filter: blur(0); */
}

h1,h2{
	-webkit-font-smoothing: antialiased;
	/* -webkit-font-smoothing: subpixel-antialiased; */
	/* -moz-osx-font-smoothing: grayscale; */
	backface-visibility: hidden;
	/* transform: translateZ(0); */
	letter-spacing: 0.05rem;
}



img{
    width: 100%;
    position: relative;
}


.blur{
    position: fixed;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    margin: -20px 0 0 -20px;
    /* background-image: url(../img/bg.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(4px);
    /* width: 100%; */
    /* height: 100%; */
    background: url(../img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.main_div{
	margin-top: 50vh;
	margin-left: 50%;
	transform: translate(-50% , -50%);
	/* padding: 30px 0; */
	position: relative;
	width: calc(50% - 2px);
	display: inline-block;
	/* border: 1px SOLID #ffffff;
	
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px; */
}

    .logo{
        padding: 30px 10px;
        width: 100%;
        position: relative;
        width: calc(100% - 20px);
    }


		h1.title{
			color: var(--fontColor);
			font-family: 'Roboto';
			/* font-weight: 300; */
			text-align: center;
			/* font-size: 50px; */
			font-size: 3em;
		}
		h2.title{
			color: var(--fontColor);;
			font-family: 'Roboto';
			font-weight: 300;
			text-align: center;
			/* font-size: 40px; */
		}




.sub_div{
	margin: 3% 0;
	padding: 30px 10px;
	position: relative;
	/* width: 100%; */
	width: calc(100% - 20px);
	display: inline-block;
}

    .coming_soon{
        position: relative;
        width: auto;
        margin-left: 50%;
        transform: translateX(-50%);
        display: inline-block;
    }
	span.coming_soon{
        color: var(--fontColor);;
        font-family: 'Roboto';
        /* font-weight: 300; */
        text-align: center;
        font-size: 1.6em;
    }





/* /////////////////////////  BORDER EFFECT  ///////////////////////////////  */



:root {
	--borderColor: #ffffff;
	--borderColorOutter: #ffffff;
	--borderSpace: -30px; /*apostash border*/
	--borderSpaceDouble: calc(2*var(--borderSpace)); /* dipli apostash*/
	--borderSpaceDoublePlus1: calc(var(--borderSpaceDouble) + 2px); /* dipli apostasi + pahos border */
}

.border_effect {
  position: relative;
  /* width: 140px;
  height: 64px; */
  margin: auto;
  border: 1px solid var(--borderColorOutter);
  /* cursor: pointer; */
  background-color: #fff;
}
.border_effect::before, .border_effect::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  /* transition: 0.3s ease-in-out; */

  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;

}
.border_effect::before {
  top: var(--borderSpace);
  left: var(--borderSpace);
  border-top: 2px solid var(--borderColor);
  border-left: 2px solid var(--borderColor);
}
.border_effect::after {
  right: var(--borderSpace);
  bottom: var(--borderSpace);
  border-bottom: 2px solid var(--borderColor);
  border-right: 2px solid var(--borderColor);
}
.border_effect:hover::before, .border_effect:hover::after {
  width: calc(100% + calc((-1) * var(--borderSpaceDoublePlus1)));
  height: calc(100% + calc((-1) * var(--borderSpaceDoublePlus1)));
}




/* /////////////////////////  MEDIA QUERIES  ///////////////////////////////  */


/*Medium devices (tablets, less than 992px)*/
@media screen and (max-width: 991.98px) {

	.main_div{
		margin-top: 50vh;
		margin-left: 40px;
		transform: translate(0% , -50%);
		width: calc(100% - 82px);
	}

	    .coming_soon{
			position: relative;
			/* width: auto; */
			margin-left: unset;
			transform: unset;
			display: inline-block;
			width: 100%;
		}
	
}