﻿body
{
  background-color: #fcfcfc;
  font-family: 'Roboto', sans-serif;
	background-repeat: no-repeat;
	background-size: auto;
}

/* FIX TO REMOVE COMMENT CODE AT TOP LEFT */
form#aspnetForm {
    margin-top: -15px;
}

h1,h2  {
  color:#076e7c;
  font-family: 'Roboto', sans-serif;
  font-weight:100;
  font-size:2.1em!important;
  font-weight: 100!important;
  line-height: initial;
  border-top: 0px!important;
  padding-top:0px!important;
  margin:20px 0 30px 0!important;
}

.wrapper {
  width:100%;
  display:block;
}
		
.wrapper.overlay {
   background: linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0,0.3));
  background-position: right;
  background-repeat: no-repeat;
  background-size:cover!important;
	height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}		

.center-div
{
  position: absolute;
  margin: auto;
  top: -65px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 760px;
  height: 415px;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  padding-top: 30px;
  opacity: 95%;
}

.logo, .tagline {
  /*display:inline;*/
}

.tagline {
  /*position:absolute;
  top:15px;
  margin-left:20px */
}

.bottom {
  /*position: fixed;*/
  margin: 0px;
  bottom:0;
  left:0;
  display: flex;
  height:80px;
  width:100%;
  background: #065560;
}

.bottom a {
    display: block;
    height: 100%;
    color:#fff;
    text-decoration:none;
    padding-top:30px;
    font-size:1.2em;
}

.bottom a:hover {
	background: #015863;
}

.capAm {
    margin-bottom: -5px;
    position: relative;
    bottom: 0px;
    padding: 0px;
}

.eng, .cym {
  display:inline-block;
  width:50%;
  text-align:center;
  position: relative;
  color:#fff;
}

.cym {
	border-left:1px solid #015863;
}

.cym {
  /*background: #015863;*/
  /*height:100%*/
}


.fade-in {
  animation: fadeIn ease 2.5s;
  -webkit-animation: fadeIn ease 2.5s;
  -moz-animation: fadeIn ease 2.5s;
  -o-animation: fadeIn ease 2.5s;
  -ms-animation: fadeIn ease 2.5s;
}


@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:0.95;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:0.95;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:0.95;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:0.95;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:0.95;
  }
}


@media only screen and (max-width: 1199px) and (min-width: 960px) {
.center-div
{
  width: 92%!important;
  top: -150px;!important;
}

.tagline h1 {
	font-size:3em!important;
	line-height: 1.3em!important;
	margin: 0px 0 30px 0!important;
}

.bottom a {
    font-size: 2.5em!important;
    font-weight: 100!important;
    padding: 50px 20px!important;
}

.bottom {
    height: 141px!important;
}
}


@media only screen and (max-width: 1199px) and (min-width: 960px) and (orientation: landscape) {
.center-div {
    width: 67%!important;
    top: -20px;
}

.tagline h1 {
    font-size: 2em!important;
}

.bottom {
    height: 80px!important;
}

.bottom a {
    font-size: 1.5em!important;
    font-weight: 100!important;
    padding: 30px 20px!important;
}
}



@media only screen and (max-width: 959px) and (min-width: 768px) {
.center-div
{
  width: 98%!important;
}
}



@media only screen and (max-width: 767px) and (min-width: 480px) {
.center-div
{
  width: 98%!important;
}
}


@media only screen and (max-width: 767px) {
.center-div
{
  width: 94%!important;
}

h1, h2 {
	font-size: 1.6em !important;
	line-height: 1.3em;
	padding-left: 10px;	
	padding-right: 10px;	
}

.center-div {
	height: 405px;
}

}




