/*Page Setup*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and ( min-device-pixel-ratio: 1.25), only screen and ( min-resolution: 200dpi), only screen and ( min-resolution: 1.25dppx) {     -webkit-font-smoothing: subpixel-antialiased; }

html,
body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #00c4a4;
    /*text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;*/
}

*, *::before, *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#wrapper {
  background-color: #FFF;
}

/*Typography Setup*/

h1 {
  color: #009acb;
  font-weight: 300;
  font-size: 4em;
}

h4 {
  color: #17A9D8;
  font-weight: 400;
  font-size: 1.25em;
}

/*General Setup*/

.images {
    width: 100%;
    height: auto;
}

.iconic {
  width: 200px;
  height: 200px;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.clear {
  clear: both;
}

form {
  font-size: 0.9375em;
  font-weight: 300;
  color: #5C5C5C;
  line-height: 1.5em;
  text-align: left;
}

.text_box {
  padding: 10px;
  width: 80%;
  height: 50px;
  background: #F2F2F2;
  border: solid #979797 1px;
  border-radius: 5px;
}

.textar {
  padding: 10px;
    width: 80%;
    height: 250px;
    line-height: 18px;
  background: #F2F2F2;
  border: solid #979797 1px;
  border-radius: 5px;
}

.button {
  width: 100px;
  height: 50px;
  display: block;
  color: #EDE7F6;
  font-size: 1em;
  font-weight: 700;
  border: thin #009acb solid;
  background-color: #009acb;
  border-radius: 7px;
}

.button:hover {
  background: #009acb;
  color: #C9F065;
  border: thin #00c4a4 solid;
  border-radius: 7px;
}

.err
{
  font-size : 12px;
  color: red;
}


/*Grid System*/
.bagi {
  clear: both;
  padding: 0px;
  margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*GRID OF TWO*/
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 48.5%;}
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.66%; }
.span_1_of_3 { width: 31.33%; }
/* GRID OF FOUR */
.span_4_of_4 {width: 100%; }
.span_3_of_4 {width: 74.6%; }
.span_2_of_4 {width: 49.2%; }
.span_1_of_4 {width: 23.8%; }
/*  GRID OF FIVE  */
.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: 79.68%;}
.span_3_of_5 {width: 59.36%;}
.span_2_of_5 {width: 39.04%;}
.span_1_of_5 {width: 18.72%;}
/*  GRID OF EIGHT  */
.span_8_of_8 {width: 100%;}
.span_7_of_8 {width: 87.3%;}
.span_6_of_8 {width: 74.6%;}
.span_5_of_8 {width: 61.9%;}
.span_4_of_8 {width: 49.2%;}
.span_3_of_8 {width: 36.5%;}
.span_2_of_8 {width: 23.8%;}
.span_1_of_8 {width: 11.1%;}


/*Header Section*/

header {
    width: 100%;
    height: auto;
    padding: 0 12.5%;
    text-align: center;
    position: fixed;
    z-index: 300;
    background-color: #3E3E3E;
    opacity: 0.9;
}

.logo {
    width: 100%;
    max-width: 83px;
    height: auto;
}

/*End og Header Section*/

/*Banner Section*/
#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
    margin-top: 118px;
    background-color: #FFF;
}
/*End of Banner Section*/

/*Content Section*/
section {
    padding: 30px 12.5%;
    text-align: center;
    padding-bottom: 30px;
}

#about {
  height: 500px;
  background-color: #FFF;
}

#tpr, #contact {
  background-color: #F2F2F2;

}

.panel{
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -ms-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}

.panel:target{
  opacity: 1;
  margin-top: 0%;
}

#about:target ~, #tpr:target ~, #application:target ~, #contact:target ~ {

}

p {
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1.75em;
  color: #4B4B4B;
}

/*End of Content Section*/

/*Footer Section*/
footer {
    width: 100%;
    height: auto;
    font-size: 0.5em;
    color: #FFF;
    text-align: center;
    background-color: #3E3E3E;
    padding: 30px 5%;
}

.white {
  color: #FFF;
}
/*End of Footer Section*/

/*PopUp*/
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 250px;
  display: none;
  z-index: 9999;
  padding: 10px;
  border-radius: 15px;
  text-align: center;
}

#boxes #dialog {
  width: 400px;
  height: 250px;
  padding: 10px;
  background-color: #ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}

#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 250px;
}

.g-recaptcha {
  text-align: center;
  margin : 0 auto;
}

/*Responsive System*/

/*Large Desktop*/
@media (min-width: 1200px) {


}


/*Potrait Tablet to landscape and desktop*/
@media (min-width: 768px) and (max-width: 979px) {

header {
  padding: 0 5%;
}

.iconic {
  width: 150px;
  height: 150px;
}

/*Banner Section*/
#owl-demo .item img{
    margin-top: 119px;
}
/*End of Banner Section*/

/*Typography*/
h1 {
  font-size: 2.75em;
  text-align: center;
}

h4 {
  font-size: 1.23em;
}

/*Content Section*/
section {
    padding: 20px 5%;
    
}

p {
  font-size: 1em;
  line-height: 1.75em;
}

#contact {
  text-align: left;
}

}


/*Landscape phone to potrait tablet*/
@media (max-width: 767px) {

header {
  padding: 0 5%;
}

.iconic {
  width: 150px;
  height: 150px;
}

/*Banner Section*/
#owl-demo .item img{
    margin-top: 96px;
}
/*End of Banner Section*/

.left {
  text-align: center;
}

/*Typography*/
h1 {
  font-size: 2.5em;
}

h4 {
  font-size: 1.3em;
}

/*Content Section*/
section {
    padding: 20px 5%;
    
}

p {
  font-size: 0.925em;
  line-height: 1.75em;
}

form {
  text-align: left;
}


/*Grid System*/
.col {  margin: 1% 0 1% 0%; }
.span_2_of_2, .span_1_of_2 { width: 100%; float: none;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; float: none;}
.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 {width: 100%; float: none; }
.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; float: none; }


}


/*Landscape phone and down*/
@media (max-width: 480px) {


.left {
  text-align: center;
}

.iconic {
  width: 150px;
  height: 150px;
}

/*Typography*/
h1 {
  font-size: 2.5em;
}

h4 {
  font-size: 1.3em;
}



/*Banner Section*/
#owl-demo .item img{
    margin-top: 114px;
}
/*End of Banner Section*/

/*Content Section*/
section {
    padding: 20px 5%;
    
}

p {
  font-size: 0.925em;
  line-height: 1.75em;
}

form {
  text-align: center;
}

#contact, .g-captcha, .button {
  text-align: center;
}

.g-captcha, .button {
	margin : 0 auto;
}

/*Grid System*/
.col {  margin: 1% 0 1% 0%; }
.span_2_of_2, .span_1_of_2 { width: 100%; float: none;}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; float: none;}
.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 {width: 100%; float: none; }
.span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5 { width: 100%; float: none;}
.span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 100%; float: none; }

}