@import url('https://fonts.googleapis.com/css?family=Exo+2:100,200,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900');

body {background-color: #111; font-family: 'Exo 2', sans-serif;color:#fff;font-size: 14px; }


a, a:hover{color:#fff; text-transform:none;}
p { margin:10px auto 0;}
h3 {font-weight:400; font-style:italic; font-size:1.5em; margin:9px auto 0; color:#ef3e5e;}


strong {font-weight:700;}

.white {color:white}

.social-box {display:inline-block; margin:0 0 0 0;}
.facebook  {background:url("../img/facebook.svg")  no-repeat; background-size:20px; display:inline-block; background-position:center center; margin:0 0 -5px 10px; padding: 0 0 0 0; width:20px; height: 20px;}
.instagram {background:url("../img/instagram.svg") no-repeat; background-size:20px; display:inline-block; background-position:center center; margin:0 0 -5px 10px; padding: 0 0 0 0; width:20px; height: 20px;}
.facebook:hover  {background:url("../img/facebook-hover.svg")  no-repeat; background-size:20px; }
.instagram:hover {background:url("../img/instagram-hover.svg") no-repeat; background-size:20px; }


.logo {width: 100%; max-width: 370px;transition:all .3s ease .05s; opacity:1;}
.logo-m {opacity:0; transition:all .3s ease .05s;}

button {
    font-weight:300;
	font-style:italic;
	color: #fff;
	padding:4px 17px;
    margin: 10px auto 0;
    text-align: center;
    border: 0;
    transition: all 0.3s ease 0s;
}

.coral-blue {background: #00adee;}

button:hover {
  background: #ef3e5e;
}

.background-box {position: fixed; 
 width:100%; height:100%; top: 0;right: 0; bottom: 0;left: 0;
 background:url("../img/background.jpg") no-repeat; background-size:cover; -webkit-background-size:cover; }


.container {
	position: fixed;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 96%;
	height: 50%;
	background-color: transparent;
	border-radius: 3px;
}

.line {
	position: absolute;
    margin: auto;
    padding:0;
    top: 0;
    bottom: 0;
    left: 49.5%;
    right: 49.5%;
    width: 3px;
    height: 50vh;
    max-height: 300px;
    background-color: #ef3e5e;   
    transition: all .33s ease 0.2s;
    transform: rotate(7.5deg);
    z-index:10;
}

.left-box {
	text-align:right;
	position: absolute;
	margin: auto;
	padding:2%;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: 45%;
	height: 70px;
	background-color: transparent;
}

.right-box {	
	text-align:left;
	position: absolute;
	margin: auto;
	padding:2%;
	top: 0;
	left: auto;
	right: 0;
	bottom: 0;
	width: 45%;
	height: 70px;
	background-color: transparent;
}


.show-on-m {display:none; visibility:hidden;}
.hide-on-m {display:inline-block; visibility:visible;}


	@media screen and (orientation: portrait) {
		.show-on-m {display:inline-block; visibility:visible;}
		.hide-on-m {display:none; visibility:hidden;}


		.coral-blue {background: #ef3e5e;}
		
		.social-box {display:block; margin:20px 0 0 0;}
		.facebook, .instagram, .facebook:hover, .instagram:hover {background-size:30px; display:inline-block; background-position:center center; margin:0 0 0 0; padding: 0 0 0 0; width:40px; height: 40px;}
		
		button:hover {
		  background: #00adee;
		}
		
		button { font-size:2.5em;    margin: 25px auto 0;}
		h3 {font-size:3.5em; margin:6vh auto 0; color:#00aeef;}
		
		.logo {transition:all .3s ease .05s; opacity:0;}
		.logo-m {    transition:all .3s ease .05s; opacity: 1;bottom: 8vh; width: 90%; max-width: 550px; position: absolute;left: 0;right: 0;margin: 0 auto;}
		
		.line {
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 2px;
			height: 90vw;
			background-color: #00adee;
			transition: all 0.53s ease 0.2s;
			transform: rotate(90deg);
		}
		
		.left-box {
			text-align:center;
			position: absolute;
			margin: auto;
			top: 2%;
			left: 0;
			right: 0;
			bottom: auto;
			padding:2%;
			width: 96%;
			height: 50%;
			background-color:transparent;
		}
		
		.right-box {
			text-align:center;
			padding:2%;
			top: auto;
			left: 0;
			right: 0;
			bottom: 0;
			width: 96%;
			height: 50%;
			background-color: transparent;
		}
	}

	@media screen and (max-width : 768px) {
	
		button { font-size:1.0em;}
		h3 {font-size:1.5em;}
		.right-box {padding:2% 1% 2% 3%;}
		.logo-m {max-width: 300px;}
	}

	@media screen and (max-width : 768px) and (orientation: landscape) {
		h3 {margin:0px auto 0;}
			
	}