html,body{ 
width:100%;
height:100%;
background:#111;
margin: 0;
border: 0;
padding: 0;
outline: 0;
}
html{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body {
background-image: url('../images/others/city2.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#particles-js{
width: 100%;
height: 100%;
position: fixed;
text-align: center;
background-color: #000;
opacity: 0.6;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
z-index: 1;
}
.content {
width: 95%;
max-width: 700px;
min-width: 200px;
height: auto;
text-align: center;
border: 0;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 10%;
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.img-logo {
width: 100%; 
height: auto; 
max-width: 150px; 
border: 0; 
margin: 0 auto; 
margin-bottom: 20px;    
}
.page-title {
font-family: 'Reem Kufi', arial, sans-serif;
font-size: 52px;
color: #fff;
font-weight: normal;
text-shadow: 0 1px 1px #333;
opacity: 0.8;
}

.fixed-text {
font-family: 'Romanesco', georgia, cursive;
font-size: 40px;
font-weight: normal;
text-shadow: 0 1px 1px #222;
opacity: 0.8;
color: #1CE7D0;
width: auto;
margin-bottom: 0;
margin: 0 auto;
border: 0;
opacity: 0.8;
text-align: center;
}
.type {
font-family: 'Reem Kufi', arial, sans-serif;
font-size: 36px;
font-weight: normal;
text-shadow: 0 1px 1px #222;
opacity: 0.8;
color: #EAD301;
width: 100%;
transform: translateY(-50%);
position: absolute;
margin: 0;
border: 0;
text-align: center;
}
.contact-button {
width: 100%;
max-width: 160px;
height: auto;
padding: 8px 10px 5px 10px;
border: 1px solid #27D1C0;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 30px;
outline: 0;
letter-spacing: -1px;
font-family: arial, 'helvatica', sans-serif;
font-weight: normal;
font-size: 18px;
color: #27D1C0;
text-shadow: 0 1px 1px #111;
text-align: center;
position: relative;
display: inline-block;
cursor: pointer;
}
.contact-button:hover {
color: #fff; 
text-shadow: 0 1px 1px #222;
border: 1px solid #2DD20B;
}
.contact-button::after {
position: absolute;
content: '';
top:0;
left: 0;
width: 0;
height: 100%;
background-color: #2DD20B;
transform-origin:left;
transition:width 0.45s ease;
opacity: 0.3;
z-index:-1;
}
.contact-button:hover::after {width: 100%;}

@media (max-width: 768px) {
.page-title {font-size: 54px;}
}
@media (max-width: 690px) {
.page-title {font-size: 48px;}
.type {font-size: 30px;}
}
@media (max-width: 615px) {
.page-title {font-size: 40px;}
.type {font-size: 28px;}
}
@media (max-width: 518px) {
.page-title {font-size: 34px;}
.type {font-size: 24px;}
}
@media (max-width: 445px) {
.page-title {font-size: 30px;}
.type {font-size: 24px;}
}
@media (max-width: 400px) {
.page-title {font-size: 46px;}
.type {font-size: 24px; margin: 10px;}
.fixed-text {font-size: 36px;}
.contact-button {margin-top: 30px;}
}
@media (max-width: 375px) {
.page-title {font-size: 36px;}
.type {font-size: 24px; margin: 10px;}
.contact-button {margin-top: 30px;}
}
@media (max-width: 300px) {
.page-title {font-size: 30px;}
.type {font-size: 24px; margin: 10px;}
.contact-button {margin-top: 35px;}
}
@media (max-width: 265px) {
.page-title {font-size: 26px;}
.type {font-size: 24px; margin: 10px;}
.contact-button {margin-top: 35px;}
}
.copyright {
width: 100%;
height: auto;
text-align: center;
font-family: arial, 'helvatica', sans-serif;
text-shadow: 0 1px 1px #222;
font-size: 16px;
color: #eee;
margin-top: 5px;
margin-bottom: 15px;
opacity: 0.8;
}
/** Social Links - Contact Page **/
.sm-links-contact {
width: 100%;
padding: 0;
background-color: transparent;
text-shadow: 0 1px 1px #222;
font-size: 26px;
text-align: center;
border: 0;
text-align: center;
margin-top: 15px;
bottom: 0;
}
.sm-links-contact > ul {
list-style: none;
margin: 0;
padding: 0;
}
.sm-links-contact > ul > li {
display: inline-block;
vertical-align:  middle;
}
.sm-links-contact > ul > li a {
display: block;
padding-right: 2px;
color: #fff; 
text-decoration: none; 
font-size: 26px;
font-weight: normal;
text-shadow: 0 1px 1px #111;
opacity: 0.5;
}
.sm-links-contact > ul > li a:hover {
color: #24E0FD; 
background-color: transparent;
text-shadow: 0 1px 1px #111;
opacity: 0.9;
}
/* Popup Form */

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 10;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background-color: #fafafa;
background: url(../images/others/contact-form-bg.png) no-repeat center center;
background-size: cover;
text-shadow: 0 1px 1px #fff;
border-radius: 0;
width: 35%;
position: relative;
transition: all 5s ease-in-out;
z-index: 1000;
text-align: left;
border: 1px solid #fff;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #000;
text-shadow: 0 1px 1px #fff;
}
.popup .close:hover {
color: #DF3015;
}
.popup .contents {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px){
.popup{width: 80%;}
}
/* Cognito Form */
.cognito a {visibility: hidden !important;}
.cognito .c-forms-form select, 
.cognito .c-forms-form input[type="text"], 
.cognito .c-forms-form input[type="password"], 
.cognito .c-forms-form textarea {
padding: 8px !important;
background-color: #fff !important;
color: #444;
border: 1px solid #94C2CE;
text-shadow: none;
opacity: 0.99;
}
.cognito .c-forms-form input:focus {outline: 0;}
.cognito .c-forms-form textarea:focus {outline: 0;}
.cognito .c-forms-form button {
min-width: 130px !important; 
padding: 10px 15px !important; 
font-size: 20px; 
font-weight: bold; 
text-shadow: 0 1px 1px #333;
border-radius: 0 !important;
border: 1px solid #fff !important;
box-shadow: 0 2px 3px #ccc;
-webkit-box-shadow: 0 2px 3px #ccc;
-moz-box-shadow: 0 2px 3px #ccc;
}

.cognito .c-field.c-error>.c-validation, 
.cognito .c-validation-row.c-error>.c-validation, 
.cognito .c-section.c-error>.c-validation, 
.cognito .c-forms-error.c-error>.c-validation, 
.cognito .c-field.c-error>div.toggle-on>.c-validation {
background-color: red;
text-shadow: 0 1px 1px #111;
color: #fff;
padding: 6px;
border-radius: 0 !important;
}