Template:Amoy/css/HomeMenuCss

.portfolio-group .detail p { font-size: 12px; }

.content-container { box-sizing: border-box; max-width: 1170px; width: 100%; margin: 0 auto; padding: 15px;

       margin-top: 25px;

}

.center-text { text-align: center; }

1. portfolio-content {

margin: 0 auto; display:-webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-around;

   -ms-flex-pack: distribute;
   justify-content: space-around;

}

1. portfolio-content img {

width: 150px; height: 150px; border-radius: 300px; } .portfolio-group { display: inline-block; width: 150px; height: 150px; position: relative; margin: 15px 10px; } .portfolio-group img { width:100%; height:100%; position:absolute; display:block; box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5); } .portfolio-group .detail { display:block; width:100%; height:100%; position:absolute; background-color: rgba(255, 255, 255, 0.7); box-shadow: 5px 10px 10px -5px rgba(0,0,0,0.5); border-radius: 300px; } .portfolio-group .detail h3 { padding: 15px 10px 0 10px; } .portfolio-group .detail p { text-align: justify; padding: 10px; line-height: 1.8em; } .portfolio-item { display:block; width:100%; height:100%; } .portfolio-item .btn { width: 80px; height: 30px; border: 1px solid rgba(0, 0, 0, 0.09); background-color: rgba(255, 255, 255, 0.5); -webkit-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44); -ms-box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44); box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.44); } .portfolio-item .btn:hover { background-color: #ddd; } .pagination { width: 100%; } .pagination li { width: 30px; height: 30px; line-height: 30px; background-color: white; -webkit-box-shadow: 1px 1px 1px rgba(51,51,51,0.4); -ms-box-shadow: 1px 1px 1px rgba(51,51,51,0.4); box-shadow: 1px 1px 1px rgba(51,51,51,0.4); margin-right: 10px; border: 1px solid rgba(44, 44, 44, 0.1); } .pagination li:last-child { margin-right: 0; } .pagination li.active, .pagination li:hover { background-color: #A7DDFF; }

.portfolio-group .portfolio-item img, .portfolio-group .portfolio-item .detail { -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; transition:0.5s ease-in-out; } .portfolio-group .detail { -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); } .portfolio-group img { -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); } .portfolio-item:hover > .detail { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); } .portfolio-item:hover > img { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); } .portfolio-group img, .portfolio-group .detail { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }

.funch { margin-top: 58px; font-size: 30px; border: 0px; color: #147abc; font-weight: bold; }

/* 7. Media queries

---

*/

@media screen and (max-width: 980px) { .templatemo_contactmap { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; padding: 0; float: none; } form { float: none; max-width: 600px; width: 100%; margin: 15px auto; } } @media screen and (max-width: 806px) and (min-width: 701px) { #logo { float: none; text-align: center; } .main-nav ul { float: none; } } @media screen and (max-width: 700px) { #logo { float: none; text-align: center; } .main-nav ul { display: block; float: none; padding: 0; } .main-nav ul.nav li { width: 96%;

} .main-nav ul.nav li a { padding: 2%; } .main-nav ul.nav li.active { padding: 0; padding: 2% 0; } .main-nav ul.nav li a:hover { padding: 2%; }

header { padding-top: 0; padding-bottom: 0; } h1 { margin-top: 0; } h2 { margin-bottom: 20px; } form { width: 100%; } } @media screen and (max-width: 600px) { .about-detail ul { padding-left: 20px; } img.left { float: none; display: block; margin-left: auto; margin-right: auto; } footer p { float: right; margin-bottom: 15px; } .social { clear: both; } } @media screen and (max-width:480px) { .main-nav li { margin-left: 0; margin-right: 0; } .main-nav ul.nav li.active { padding: 0; padding: 2% 0; } } @media screen and (max-width:400px) { .main-nav li { width: 80px; margin-left: 0; margin-right: 0; font-size: 12px; text-align: center; line-height: 30px; } .main-nav ul.nav li a { padding: 2%; } .main-nav ul.nav li.active { padding: 0; padding: 2% 0; } .main-nav ul.nav li a:hover { padding: 2%; } }