/* Globals */

* { box-sizing:border-box; padding:0; margin:0; }

html,body { margin-top:0px; font-family:nunito,arial,helvetica,sans-serif; color:#666666; font-size:16px; letter-spacing:0.4px; }

.row { width:100%; clear:both; float:left; padding:0 3% 0 3%;  }
.halfWidth { width:50%; }
.fullWidth { width:100%; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }







/* Layouts */

/* Header */

#logo { padding-top:50px; text-align:center; }
#headerIcons { margin-top:50px; margin-bottom:20px; background-image:url('/images/headerIcons.png'); height:99px; background-repeat:no-repeat; background-position:center; }

/* Services */

#servicesTop { background-image:url('/images/servicesTop.png'); background-repeat:no-repeat; background-size:100% 56px; height:56px; }
#servicesHeading { background-color:#333333; color:#cccccc; font-size:40px; font-weight:bold; text-align:center; padding-top:30px; }
#services { background-color:#333333; color:#cccccc; padding-top:30px; padding-bottom:50px; font-size:20px; }
.service { float:left; font-size:24px; margin:0 50px 30px 0; }
.service span { color:#ff9900; }
#services p { clear:both; float:left; width:100%; text-align:center; margin-top:20px; }
#servicesBottom { background-image:url('/images/servicesBottom.png'); background-repeat:no-repeat; background-size:100% 54px; height:54px; }

/* Past work */

#pastWorkHeading { color:#333333; font-size:40px; font-weight:bold; text-align:center; padding-top:20px; padding-bottom:40px; }
#pastWork { color:#333333; }
.pastWorkContainer { display:-webkit-flex; display:-ms-flexbox; display:flex; clear:both; float:left; flex-wrap:wrap; width:100%; margin-bottom:100px; }

.pastWorkItem { margin:0.3%; width:19.4%; border:3px solid #333333; border-radius:6px; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:space-between; transition: box-shadow .3s; }
.pastWorkItem:hover { cursor:pointer; }
.pastWorkImg { position:relative; width:100%; height:200px; float:left; background-repeat:no-repeat; background-size:cover; background-position:center center; }
.pastWorkLabel { position:absolute; bottom:0px; text-align:center; width:100%; background:rgba(51, 51, 51,0.8); color:#cccccc; padding:10px; }

.pastWorkItem:hover .pastWorkLabel { background:rgba(51, 51, 51, 1); animation-name:showSnippet; animation-duration: 0.5s; }
@keyframes showSnippet { from {opacity: 0.8} to {opacity: 1} }

/* Contact */

#contactTop { background-image:url('/images/contactTop.png'); background-repeat:no-repeat; background-size:100% 64px; height:64px; }
#contactHeading { background-color:#ff9900; color:#333333; font-size:40px; font-weight:bold; text-align:center; padding-top:30px; padding-bottom:20px; }
#contact { background-color:#ff9900;padding-top:30px;padding-bottom:100px; }
#contactLeft { clear:both; float:left; width:50%; }
#contactRight { float:left; width:50%; }
.contactClass { width:100%; float:left; height:88px; margin-bottom:20px; font-size:20px; color:#333333; background-repeat:no-repeat; padding:10px 0 0 100px; }
.contactClass:hover span { color:#666666; }
.contactClass span { clear:both; float:left; font-size:30px;border-top:1px solid #333333; line-height:30px; padding-top:5px; color:#333333; text-decoration:none; transition: .3s color; }
#telephone { background-image:url('/images/telIcon.png'); }
#whatsapp { background-image:url('/images/whatsappIcon.png'); }
#email { background-image:url('/images/emailIcon.png'); word-wrap:break-word; }

/* Footer */

#footer { background-color:#666666; color:#ffffff; padding-top:30px; padding-bottom:30px; text-align:center; }










/* Links */

a.grey:link { color:#333333; text-decoration:none; transition: .3s color; }
a.grey:visited { color:#333333; text-decoration:none; transition: .3s color; }
a.grey:active { color:#333333; text-decoration:none; transition: .3s color; }
a.grey:hover { color:#666666; }







/* Fields */

.fieldContainer { clear:both; float:left; margin-bottom:10px; }

#nameField { width:50%; }
#emailField { width:50%; }
#messageField { width:100%; }

.inputText { width:100%; float:left; border-radius:6px; border:3px solid #ffffff; color:#333333; font-size:15px; height:48px; padding:2px 5px 2px 5px; transition:border-color .3s; background-color:#ffffff; }
.inputText:hover { border-color:#333333; }

.inputText label { display:none; color:#333333; font-size:12px; height:13px; float:left; line-height:0px; padding-top:7px; }

.inputTextarea { height:150px; }

input[type=text] { -webkit-appearance: none; font-size:15px; color:#333333; height:40px; width:100%; border:0; padding:0; clear:both; float:left; line-height:100%; outline:none; font-family:nunito,arial,helvetica,sans-serif; }
textarea { font-family:nunito,arial,helvetica,sans-serif; font-size:15px; color:#333333; height:140px; width:100%; border:0; padding:0; clear:both; float:left; line-height:20px; resize:none; outline:none; outline-radius:6px; }

input[type=submit] { -webkit-appearance: none; }

#submitField { font-family:nunito,arial,helvetica,sans-serif; cursor:pointer; float:left; font-size:18px; line-height:0px; background-color:#333333; border-radius:6px; color:#cccccc; border:1px solid #333333; padding-left:5px; padding-right:5px; transition: .3s background-color,border-color,color; height:44px; outline:none; text-align:center; text-decoration:none; width:100%; }
#submitField:hover { border-color:#666666; background-color:#666666; color:#cccccc; }








/* Errors */

.errTxt { display:none; clear:both; float:left; border-radius:6px; background-color:#ff3333; color:#ffffff; padding:5px; margin:0px 0px 5px 0px; width:100%; }











@media only screen and (max-width: 1440px) {
/* For laptop: */



}



@media only screen and (max-width: 1100px) {
/* For inbetween: */

.pastWorkItem { width:24.4%; }

}



@media only screen and (max-width: 800px) {
/* For tablets: */

.pastWorkItem { width:32.7%; }
#contactLeft { width:100%; }
#contactRight { clear:both; width:100%; margin-top:100px; }
.contactClass span { width:100%; }
#nameField { width:100%; }
#emailField { width:100%; }

}



@media only screen and (max-width: 414px) {
/* For mobile phones: */

#logo img { width:100%; }
.pastWorkItem { width:49.4%; }
.service { font-size:20px; margin:0 50px 30px 0; }

}