@import "raleway/stylesheet.css";

@-o-keyframes zoomin {from { -o-transform: scale(0.475); }to { -o-transform: scale(0.724); }}
html {
    height: 100%;
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
	animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 3s;
	-moz-animation-duration: 3s;
	-webkit-animation-duration: 3s;

	animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	
	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		
		opacity: 0.0;		
	}
	
		
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		
		opacity: 0.0;		
	}
	
		
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

@-moz-keyframes fadeIn {
	0% {
		
		opacity: 0.0;
				
	}
	
		
	100% {
		-moz-transform: scale(1);
		opacity: 1;	
		
	}		
}
/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	
	-moz-animation-name: expandOpen;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;
	-moz-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	
	animation-fill-mode: forwards;	
	-webkit-animation-fill-mode: forwards;	
	-moz-animation-fill-mode: forwards;	
	
	animation-delay: 0.5s;	
	-webkit-delay: 0.5s;
	-moz-delay: 0.5s;		

	opacity: 0;	
	
}

@keyframes expandOpen {
	
	0% {
		transform: scale(1.4);	
		text-shadow: 0px 0px 20px #000;
		color: transparent;
		font-family: 'ralewaybold';	
		opacity: 0;
	
	}
	
		
	98% {
		transform: scale(1);
		text-shadow: 0px 0px 1px #000;
		color: transparent;
		font-family: 'ralewaybold';
		opacity: 1;	
	
	}		
	100% {
		transform: scale(1);
		color: rgb(190,0,35);	
		font-family: 'ralewayextralight';	
		opacity: 1;
	}	
}

@-webkit-keyframes expandOpen {
	
		
	0% {
		-webkit-transform: scale(1.4);	
		text-shadow: 0px 0px 20px #000;
		color: transparent;
		font-family: 'ralewaybold';	
		opacity: 0;
	
	}
	
		
	98% {
		-webkit-transform: scale(1);
		text-shadow: 0px 0px 1px #000;
		color: transparent;
		font-family: 'ralewaybold';
		opacity: 1;	
	
	}		
	100% {
		-webkit-transform: scale(1);
		color: #000;	
		font-family: 'ralewayextralight';	
		opacity: 1;
	}			
}


@-moz-keyframes expandOpen {
	
	0% {
		-moz-transform: scale(1.4);	
		text-shadow: 0px 0px 20px #000;
		color: transparent;
		font-family: 'ralewaybold';	
		opacity: 0;
	
	}
	
		
	98% {
		-moz-transform: scale(1);
		text-shadow: 0px 0px 1px #000;
		color: transparent;
		font-family: 'ralewaybold';
		opacity: 1;	
	
	}		
	100% {
		-moz-transform: scale(1);
		color: #000;	
		font-family: 'ralewayextralight';	
		opacity: 1;
	}	
	
			
}


/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}



/* Effect 4: bottom border enlarge */
a.cl-effect-4 {
	padding: 0 0 10px;
}

a.cl-effect-4::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #000;
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

a.cl-effect-4:hover::after,
a.cl-effect-4:focus::after {
	height: 3px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.delay{
	opacity: 0;

	animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-webkit-animation-name: fadeIn;		
	
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1;

	animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	
	animation-fill-mode: forwards;	
	-webkit-animation-fill-mode: forwards;	
	-moz-animation-fill-mode: forwards;

	animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
}


/*
==============================================
CSS
==============================================
*/
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'ralewaylight';
	font-weight: normal;
	font-style: normal;
	background-color: #FFFF;
	letter-spacing: 1px;
}


h2{
	margin: 0 auto;
	font-size: 25px;
	font-family: 'ralewaylight';
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: #000;
}

#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}
#global {
    margin: 0 auto;
    width: 45%;
}
#logo{
    margin: 0 auto;
    margin-top: 12%;
	width: 84%;
	visibility: hidden; 	
}

#slogan{
	margin: 0 auto;
	width: 100%;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10%;
	font-weight: normal;
	font-style: normal;		
}

#adress{
	margin: 0 auto;
	width: 100%;
	color: #000;
	margin-top:  10%;
	font-weight: normal;
	font-style: normal;
	font-style: normal;	
	font-size: 16px;	
}

a {
	position: relative;
	display: inline-block;
	margin: 5px 0px 80px 0px;
	outline: none;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.1em;
}

 a:hover,
 a:focus {
	outline: none;
	color: #000;
	font-size: 1.1em;
}

.btns{
    width: 70%;
    margin: 0 auto;
	font-size: 20px;
}
.btn{
    padding: 10px;
}
#btn1{
    
    float: left;
	
	
}

#btn2{
    
    float: right;
	
}


@media (min-width: 1600px){
	h2,{
		font-size: 60px;
	}
	

}

@media (max-width: 1600px){
	
	a {
	margin: 5px 0px 40px 0px;
	}

}
@media (max-width: 1150px){
  	#global {
        width: 62%;
    }  

}
@media (max-width: 900px){
  	#global {
        width: 75%;
    }  

}

@media (max-width: 768px){
    #global {
        width: 80%;
    }
	h2{
		font-size: 23px;
	}
}

@media (max-width: 700px){
	#global {
			width: 95%;
	}
	
	h2{
		font-size: 20px;
	}
}
@media (max-width: 480px){
    #btn2, #btn1{
        float: none;
    }
    .btn{
        margin-bottom: 20px;
    }
    .btns{
        width: 98%;
    }
	h2{
		font-size: 16px;
	}
	a {
	
	margin: 10px 0px 10px 0px;
	font-size: 1em;
	}
	a:hover,
	a:focus {
	
		font-size: 1em;
	}
	
	#global {
			width: 98%;
	}
}


@media (max-width: 368px){
    #global {
        width: 100%;
    }
	
	h2{
		font-size: 12px;
	}
}
@media (max-width: 320px){
    #global {
        width: 100%;
    }
	
	h2{
		font-size: 12px;
	}
}