body {background-color:#009dc9 !important; min-height:100vh;background-image: url(../images/bg.jpg);background-position: center center;background-size: cover; background-attachment:fixed;overflow-x:hidden}

.home {padding: 10vh 0;}
.home img {max-width: 300px; width:80%;position: relative;top: -100px;opacity: 0;}
.home img.move {top: 0px;opacity: 1;transition: all 0.8s ease-in-out 0s; }
.home h1 {font-family: 'Montserrat',sans-serif;font-weight:200;font-size: 2.5rem;letter-spacing: 20px;padding: 30px 0 0 0;margin: 50px 0 0 0;color: #FFFFFF;position:relative;top: 80px;opacity: 0;}
.home h1.move {top: 0px;opacity: 1;transition: all 1s ease-in-out 0s; }
.home h1::before {content:""; top:0; width:150px; margin:auto; border-top:1px solid #FFF8; position:absolute; left: 0; right: 0
}

.portfolio .row .col {background-color: #FFF2; position:relative; transition: all 0.4s ease-in-out 0s; background-position: center center;background-size: cover; cursor:pointer;transform: scale(0); opacity:0}
.portfolio .row .col.visible {transition: all 0.4s ease-in-out 0s;transform: scale(1); opacity:1}
.portfolio .row .col::before {content:""; display:block; padding-top:100%;}
.portfolio .row .col::after {content:"";transition: all 0.4s ease-in-out 0s; position:absolute; left: 0; top: 0; width: 100%; height: 100%;
    
background: rgba(0,0,0,0.15);

}
.portfolio .row .col:hover::after {background: rgba(255,255,255,0.4); transition: all 0.4s ease-in-out 0s}


.portfolio .row .col span {transition: all 0.4s ease-in-out 0s;font-family: 'Montserrat',sans-serif;font-weight:300;font-size: 1.3rem;letter-spacing: 4px; position:absolute; top: 15px; color: #FFF; text-align: center;display: table;width: 100%;left: 0;z-index: 2;padding: 0 25px;}
.portfolio .row .col:hover span {transition: all 0.4s ease-in-out 0s;color: #000;}


.portfolio .row .col .l::before {
	 content:"";
	 position: absolute;
	 width: 15px;
    height: 15px;
    left: 15px;
    top: 15px;
    border-radius: 0 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
}

.portfolio .row .col .r::before {
	 content:"";
	 position: absolute;
	 width: 15px;
    height: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 0 0 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.portfolio .row .col .l::after {
	 content:"";
	 position: absolute;
	 width: 15px;
    height: 15px;
    right: 15px;
    top: 15px;
    border-radius: 0 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
}

.portfolio .row .col .r::after {
 	 content:"";
	 position: absolute;
	 width: 15px;
    height: 15px;
    left: 15px;
    bottom: 15px;
    border-radius: 0 0 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.portfolio .row .col i::before, .portfolio .row .col i::after, .portfolio .row .col i {z-index: 3;}

.portfolio .row .col .cross::before {content: "";height: 30px; width: 1px; background-color:#FFF9; position:absolute; display:block; top: 50%; left:50%;transform: translate(-50%, -50%);}
.portfolio .row .col .cross::after {content: "";width: 30px; height: 1px; background-color:#FFF9; position:absolute; display:block; top: 50%; left:50%;transform: translate(-50%, -50%);}

.portfolio .row .col .circ {position:absolute; width: 16%;  border-radius: 200px; border: 1px solid #FFF9;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.portfolio .row .col .circ::before {content:""; display:block; padding-top:100%}

.eye h1 {font-family: 'Montserrat',sans-serif;font-weight:200;font-size: 2.2rem;letter-spacing: 5px;padding: 100px 0px;margin: 0 auto 0 auto;color: #168EB9;position:relative;max-width:770px;}
.eye .right {background-color: #D9E4E8;}
.eye h2 {font-family: 'Montserrat',sans-serif;font-weight:200;font-size: 2.2rem;letter-spacing: 5px;padding: 30px 15px 30px;margin: 0 auto 0 auto;color: #168EB9;position:relative;}
.eye h3 {font-family: 'Montserrat',sans-serif;font-weight:300;font-size: 2.2rem;letter-spacing: 5px;padding: 30px 0px 30px;margin: 0 auto 0 auto;color: #FFF;position:relative;max-width:770px;}
.eye ul {list-style: none;padding: 0;}
.eye ul li {font-family: 'Montserrat',sans-serif;font-weight: 300;color: #0a5f7d;background-color: #F0F9F8;border-bottom: 6px solid #FFF;padding-bottom: 0;background-position: center;background-size: cover;border-left: 3px solid #FFF;border-right: 3px solid #FFF;transition: all 0.4s ease-in-out 0s;cursor:pointer}
.eye ul li:hover {transition: all 0.4s ease-in-out 0s; opacity: 0.7;}
.eye ul li span {display: table; width: 100%; background-color: rgb(238, 249, 255);padding: 8px 5px;transition: all 0.4s ease-in-out 0s;}
.eye ul li:hover span {color: #FFF; background-color: #168eb9;transition: all 0.4s ease-in-out 0s;}
.eye ul li span.active {color: #FFF; background-color: #168eb9;}
.eye.webdesign li::before {content:""; display:block; padding-top:50%;}
.eye.brands li::before {content:""; display:block; padding-top:40%;}
.eye.forprints li::before {content:""; display:block; padding-top:50%;}
.eye.photos li::before {content:""; display:block; padding-top:50%;transition: all 0.4s ease-in-out 0s;background-color: rgba(153, 191, 232, 0.1);}
.eye.photos li:hover::before {content:""; background-color: rgba(153, 191, 232, 0.3); transition: all 0.4s ease-in-out 0s;}

#det {width: 0;height: 0;position: absolute;top: -39px;left: 50%;transform: translate(-50%);}

.web, .brand, .prints, .photo {background-color: #C6D4E3;}
.web > div > div:nth-child(1) {}
.web > div > div:nth-child(4) p, .brand > div > div:nth-child(4) p {padding: 15px; text-align: left;font-family: 'Montserrat',sans-serif;font-weight:300;font-size: 1rem;}
.eye img {width:100%;}
.eye img.resp {max-width: 400px;left: 0;right: 0;margin: -200px auto 20px;bottom: 0;}
.contact {background-color: #168EB9;}
.contact h1 {font-family: 'Montserrat',sans-serif;font-weight:200;font-size: 2.2rem;letter-spacing: 5px;padding: 100px 0px;margin: 0 auto 0 auto;color: #FFF;position:relative;max-width:770px;}
.back {width: 100%;display: block;margin: 0;background-color: #168EB9;color: #FFF;cursor:pointer;transition: all 0.4s ease-in-out 0s;height: 40px;position: relative;top: 0px;}

.back::before {content:"";position: absolute;width: 60px;height: 60px;background-color: #56A8C6;left: 50%;border-radius: 100px;transform: translate(-50%);z-index:2;top: 10px;background-image: url(../images/arrow.png);background-position: center;background-size: 65%;background-repeat: no-repeat;}
/*.back::after {width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 20px solid transparent;border-bottom: 20px solid #FFF;position: absolute;z-index: 2;left: 50%;transform: translate(-50%);top: 10px;}*/
.back.load::before {content:"";position: absolute;width: 60px;height: 60px;background-color: #6CB9D5;left: 50%;border-radius: 100px;transform: translate(-50%);z-index:2;background-image: url(../images/loading2.gif);background-position: center;background-size: 126%;box-shadow: 0 5px rgba(0,0,0,0.05);}
.back.load::after {content:"";width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 20px solid transparent;border-bottom: 20px solid #FFF;position: absolute;z-index: 2;left: 50%;transform: translate(-50%);top: 10px;display:none}
.back:hover {width: 100%;display: block;margin: 0;background-color: #1B7191;color: #FFF;transition: all 0.4s ease-in-out 0s;}
.det p {font-family: 'Montserrat',sans-serif;font-weight: 200;font-size: 1.2rem;color: #107093;text-align: left;padding: 30px 15px;}
.btns .btn {background-color: #168EB957;color: #FFF; border-color: transparent}
.btns .btn:hover {background-color: #168EB9;color: #FFF;}
.text-content {font-family: 'Montserrat',sans-serif;font-weight:200;font-size: 1.2rem;letter-spacing: 1px;padding: 0px 100px 50px; text-align: justify;}
.pict {background-position: center;background-size: cover;}

@media (max-width:768px) {
    .eye ul li::before {content:""; display:block; padding-top:0;}
    .eye ul li span {background-color: #EDF4FB;}
}

/* Icon 1 */

.first-button {right:15px;left: auto;position: absolute;width: 50px;height: 40px;background-color: transparent;border: none;}

.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: absolute;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: #fff;
}

.animated-icon2 span {
background: #e3f2fd;
}

.animated-icon3 span {
background: #f3e5f5;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

/* Icon 3*/

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}

.second-button {position:absolute; width:50px;height:40px; right:15px; top:-40px;cursor: pointer;}
.menu {position: absolute;top:50px;width:300px;z-index: 10}
.menu ul {list-style: none; padding-left:0; padding-right: 0;}
.menu ul li {font-family: 'Montserrat',sans-serif;font-weight:300; padding: 5px 15px 5px; margin:10px 0 0; cursor: pointer; text-align: left; color: #FFF; transition: all 0.4s ease-in-out 0s; position:relative;background-color: rgb(0, 60, 89);border-radius: 10px 0 0 10px;font-size: 1.2rem;}
.menu ul li:hover {color: #A2BCC4; transition: all 0.4s ease-in-out 0s;}
.menu.slideon {right: 0px; transition: all 0.4s ease-in-out 0s}
.menu.slideon li:nth-child(1) {right:-20px; transition: all 0.4s ease-in-out 0s}
.menu.slideon li:nth-child(2) {right:-20px; transition: all 0.4s ease-in-out 0.2s}
.menu.slideon li:nth-child(3) {right:-20px; transition: all 0.4s ease-in-out 0.4s}
.menu.slideon li:hover {right:0;transition: all 0.4s ease-in-out 0s}
.menu.slideof {right: -300px; transition: all 0.4s ease-in-out 0.4s}
.menu.slideof li:nth-child(1) {right:-300px; transition: all 0.4s ease-in-out 0s}
.menu.slideof li:nth-child(2) {right:-300px; transition: all 0.4s ease-in-out 0.2s}
.menu.slideof li:nth-child(3) {right:-300px; transition: all 0.4s ease-in-out 0.4s}

.menu.fadeon .second-button {position:absolute; width:50px;height:40px; right:15px; top:-40px;cursor: pointer;}
.menu.fadeof .second-button {position:absolute; width:0px !important;height:0px !important; right:0px !important; top:0px !important;}
.menu.mobile {width:100% !important}
.menu.mobile ul li {border-radius: 0 !important; width:100% !important; overflow: hidden}
.menu.fadeon {transition: all 0.4s ease-in-out 0s}
.menu.fadeon li:nth-child(1) {transition: all 0.4s ease-in-out 0s; opacity:1; height:40px; padding: 5px 15px 5px}
.menu.fadeon li:nth-child(2) {transition: all 0.4s ease-in-out 0.2s; opacity:1; height:40px; padding: 5px 15px 5px}
.menu.fadeon li:nth-child(3) {transition: all 0.4s ease-in-out 0.4s; opacity:1; height:40px; padding: 5px 15px 5px}
.menu.fadeon li:hover {transition: all 0.4s ease-in-out 0s}
.menu.fadeof {transition: all 0.4s ease-in-out 0.4s}
.menu.fadeof li:nth-child(1) {transition: all 0.4s ease-in-out 0s; opacity:0; height:0px; padding: 0 15px 0}
.menu.fadeof li:nth-child(2) {transition: all 0.4s ease-in-out 0.2s; opacity:0; height:0px; padding: 0 15px 0}
.menu.fadeof li:nth-child(3) {transition: all 0.4s ease-in-out 0.4s; opacity:0; height:0px; padding: 0 15px 0}

@media (max-width:1200px) {
    .eye img.resp {margin: 20px auto 20px;}
    .text-content {padding: 0 15px 40px;font-size: 0.8rem;}
}

@media (max-width:992px) {
    .portfolio .row .col::before {content:""; display:block; padding-top:60%;}
     .eye h1, .contact h1 {font-size:3vw !important;}
}

@media (max-width:769px) {
    .portfolio .row .col::before {content:""; display:block; padding-top:50%;}
    .home h1 {font-size:4.8vw;letter-spacing: 2vw;margin: 20px 0 0 0;}
    .home {padding: 7vh 0;}
    .eye h1, .contact h1  {font-size:4vw !important;padding: 50px 0px;text-align: center !important;}
   
    #det {width: 100%;display: block;margin: 0;background-color: #168EB9;color: #FFF;cursor:pointer;transition: all 0.4s ease-in-out 0s;height: 40px;position: relative;top: 0px;z-index: 10;}
    #det > span {position: absolute;width: 60px;height: 60px;background-color: #6CB9D5;left: 50%;border-radius: 100px;transform: translate(-50%);z-index:10;top: 10px;display: block;cursor: pointer;background-image: url(../images/arrow.png);background-position: center;background-size: 65%;background-repeat: no-repeat;}
    /*#det > span::before {width: 0;height: 0;border-left: 15px solid transparent;border-right: 15px solid transparent;border-top: 20px solid transparent;border-bottom: 20px solid #FFF;position: absolute;z-index: 2;left: 50%;transform: translate(-50%);top: 0px;}*/
    #det:hover {width: 100%;display: block;margin: 0;background-color: #1B7191;color: #FFF;transition: all 0.4s ease-in-out 0s;}
    .eye h2, .eye h3 {padding: 50px 15px 25px}
}

@media (max-width:600px) {
    .eye h1, .contact h1  {font-size:5vw !important;}
    .home h1 {font-size: 6vw;}
    .det p {padding: 0 15px 10px 15px}
}
    
@media (max-width:500px) {
    .eye h1, .contact h1  {font-size:6vw !important;}
    .home h1 {font-size: 6vw;}
    .eye h2, .eye h3 {font-size: 1.5rem}
    .det p {font-size: 1rem; padding: 0 15px 10px 15px}
}
    
@media (max-width:400px) {
    .eye h1, .contact h1  {font-size:7vw !important;}
    .eye ul li span {font-size:0.8rem; padding:3px}
    .home h1 {font-size: 7vw;}
}