/*============================================ Start General Classes ============================================*/

@import url('https://fonts.googleapis.com/css?family=Patua+One');

body{color:#222;font-size:13px;margin:0;padding:0;font-family:arial; overflow-x: hidden;}

*{box-sizing: border-box;}

a:link,a:active,a:visited{text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}

ul, ol{margin:0 0 15px 0;padding:0 0 0 15px}
p, div, form{margin:0px;padding:0px}
img, a img{border:0px}

h1{font-size:45px}h2{font-size:40px}h3{font-size:30px}h4{font-size:25px}h5{font-size:20px}h6{font-size:17px}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-family:'Patua One', cursive}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{cursor:pointer!important}

h1{margin:0 0 25px 0;padding:0 0 5px 0px;text-align:center}
h2{margin:0 0 8px 0;padding:0 0 5px 0px}
h3{margin:0 0 8px 0;padding:0 0 5px 0px}
h4{margin:0 0 8px 0;padding:0 0 5px 0px}
h5{margin:0 0 8px 0;padding:0 0 5px 0px}
h6{margin:0 0 8px 0;padding:0 0 5px 0px}

h1, h1 a{color:#111}
h2, h2 a{color:#111}
h3, h3 a{color:#111}
h4, h4 a{color:#111}
h5, h5 a{color:#111}
h6, h6 a{color:#111}

textarea{resize:none}

.imageBorder{border:1px #aaa solid}
.imageBorder5px{border:5px #aaa solid}
.imageLeft{float:left;margin:0px 12px 0px 0px}  
.imageRight{float:right;margin:0px 0px 0px 12px}

.clr{clear:both;padding:0!important;margin:0!important}

.portfolio-filters li{background: #111;color: #aaa;}
.portfolio-filters li:hover{background: #222;color: #fff}
a.readMoreBut, button, input[type="submit"], input[type="button"]{background:#1c5039;color:#fff;}
a:hover.readMoreBut, button:hover, input:hover[type="submit"], input:hover[type="button"], .btn-default:focus, .portfolio-filters li.filter-active{color:#fff !important; background:#b93730 !important}

a.readMoreBut, button, input[type="submit"], input[type="button"]{display:inline-block;padding:0 25px;line-height:36px;width:auto;border:0!important;border-radius:0px;margin:15px 0 15px 10px;font-size:14px;cursor:pointer;}
a:hover.readMoreBut, button:hover, input:hover[type="submit"], input:hover[type="button"], .btn-default:focus{text-decoration:none;}
a.readMoreBut i{margin:0 10px 0 0}

.container{width: 1336px; display: flex;margin: 0 auto;}

/*============================================ End General Classes ============================================*/

body{display: flex;flex-flow: column wrap;}

.default, .topMainBarFixed{z-index: 999}
.topMainBarFixed .topControlBar{top: 0}

header{display: flex; flex-flow: column wrap; position: relative}
header .topControlBar{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding: 5px 15px; background-color: #fff; top: -150px; position: fixed;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    box-shadow:0 2px 6px rgba(0, 0, 0, 0.1) 
}

header .topControlBar .container{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
header .topControlBar a{-moz-transition: all .2s ease-in;-o-transition: all .2s ease-in;-webkit-transition: all .2s ease-in; transition: all .2s ease-in}
header .topControlBar .small-logo{display: flex;align-items: center;width: 65px;}
header .topControlBar .small-logo a{width: 100%; display: flex;align-items: center;}
header .topControlBar .small-logo a img{width: 100%}
header .topControlBar .right-logo{display: flex; flex-flow: row wrap;justify-content: center;}

.social-icons{display: flex; flex-flow: row wrap; justify-content: space-around; width: 150px;}
.social-icons a{display: flex;justify-content: center;border-radius:3px;width: calc(92%/3);}
.social-icons a i{display: flex; justify-content: center; align-items: center;height:36px;font-size:18px;color:#333;padding:0 10px}
.social-icons a:nth-child(2) i{font-size:19px}
.social-icons a:hover {text-decoration: none;}
.social-icons a:hover i{color:#fff}
.social-icons a:first-child:hover {background:#1769ff}
.social-icons a:nth-child(2):hover {background:#007ab9}
.social-icons a:nth-child(3):hover {background:#3b579d}

nav ul{list-style: none; display: flex; flex-flow: row wrap; margin: 0; padding: 0;justify-content: center;}
nav li{display: flex; margin: 0 2px;}
nav li a{display: flex; justify-content: center; align-items: center; height: 36px; color: #333; border-radius: 3px; padding: 0 12px}
nav li a:hover{background: #b93730; color: #fff; text-decoration: none}

section{display: flex; padding:75px 0;outline: none;}
.title{width: 100%; display: flex; flex-flow: column wrap; justify-content: center; align-items: center;}
.title i{display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; font-size: 35px; background: #111; border-radius: 50%; color: #fff; margin:0}
.title h2{margin: 0 0 10px 0; padding: 0;}

.home-slide{display: flex; flex-flow: row nowrap;text-align:center;padding: 60px 0 25px;
    background: #b93730;/* For browsers that do not support gradients */
    background: -webkit-linear-gradient(145deg, #8a0808, #de5c4f);/* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(145deg, #8a0808, #de5c4f);/* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(145deg, #8a0808, #de5c4f);/* For Firefox 3.6 to 15 */
    background: linear-gradient(145deg, #8a0808, #de5c4f);/* Standard syntax (must be last) */}

.sub-home-slide {width: 100%; display: flex;flex-flow: row nowrap;text-align: center;padding: 60px 0 25px; margin: 60px 100px 0;
    background: #b93730;/* For browsers that do not support gradients */
    background: -webkit-linear-gradient(145deg, #de5c4f, #8a0808);/* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(145deg, #de5c4f, #8a0808);/* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(145deg, #de5c4f, #8a0808);/* For Firefox 3.6 to 15 */
    background: linear-gradient(145deg, #de5c4f, #8a0808);/* Standard syntax (must be last) */}

.home-slide .container{display: flex; flex-flow: column nowrap;justify-content: space-around; align-items:center ;}

.home-logo-container{display: flex; flex-flow: row wrap;justify-content: center;align-items: center;}
.home-logo-container .logo{display: flex; flex-flow: column wrap; justify-content: center ;align-items: center; width: 236px;}
.home-logo-container .logo img:first-child{width: 100%;margin: 0 0 10px;}
.home-logo-container .logo img:nth-child(2){width: min-content}

.home-logo-container .logo-line{width:0;height: 140px;margin:0 20px; border-left: 1px solid; border-left-color: rgba(255, 255, 255, .2);border-right: 1px solid;border-right-color: rgba(0, 0, 0, .25);}
.home-logo-container .logo-text{color:#fff;font-family:'Century Gothic';font-size:23px;text-transform:uppercase;display: flex; flex-flow: row nowrap;padding: 0; margin: 0;}
.home-logo-container .logo-text p{width:auto}
.home-logo-container .logo-text p::after{content:"|"; margin: 0 15px;}
.home-logo-container .logo-text p:last-child::after{display: none;}

.home-contact-icons{display: flex;flex-flow: row wrap;justify-content: center;margin:10px 0 0}
.home-contact-icons a{color: rgba(255, 255, 255, .4);;margin:0 25px;text-transform:uppercase}
.home-contact-icons a:hover{text-decoration:none;color:#fff}
.home-contact-icons a i{width:50px;height:50px;display: inline-flex; justify-content: center; align-items: center; padding:0;margin:0 10px 0 0; background: rgba(0, 0, 0, .2);;border-radius:50%;color:rgba(255, 255, 255, .8);;font-size:21px}
.home-contact-icons a span{width:auto;display: inline-flex; justify-content: center; align-items: center;padding:0;margin:0;;font-size:16px}

.home-main-arrow a{display: flex;}
.home-main-arrow a i{width:60px;height:60px;line-height:58px;text-align:center;float:left;padding:0;margin:0;border:1px solid;border-color: rgba(255, 255, 255, .4);border-radius:50%;color:rgba(255, 255, 255, .8);;font-size:28px}
.home-main-arrow a:hover i{text-decoration:none;color:#fff;border:1px solid #fff}


.about-slide {background: #fff; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(145deg, #ddd, #fff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(145deg, #ddd, #fff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(145deg, #ddd, #fff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(145deg, #ddd, #fff); /* Standard syntax (must be last) */}
.about-slide .container{flex-flow: row wrap; justify-content: center;}
.about-slide .about-photo{width: 320px; margin: 0 30px 0 0}
.about-slide .about-photo img{border-radius: 50%;border: 20px solid #fff;width: 100%;}

.about-slide .about-text{font-size: 16px; line-height: 23px; width: calc(100% - 500px)}
.about-slide .about-text p{margin: 15px 0}
.about-slide .about-text p span{font-size: 18px; text-transform: uppercase}

.portfolio{background: #eab72e}
.portfolio .container{flex-flow: column wrap;}
.portfolio i{color: #eab72e}
.portfolio-filters{display: flex;flex-flow: row wrap;justify-content: center;margin: 25px 0}
.portfolio-filters li{display: flex;align-items: center;justify-content: center;height: 40px;padding: 0 20px;margin: 2px;text-decoration: none;border-radius: 4px;font-size: 15px;cursor: pointer}
.portfolio-filters li.filter-active {cursor: context-menu;pointer-events: none}

.isotope-item{z-index: 2}
.isotope-hidden.isotope-item{pointer-events: none; z-index: 1}
.isotope, .isotope .isotope-item{/* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s}
.isotope{-webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width}
.isotope .isotope-item{-webkit-transition-property:-webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity}

.portfolio-container{display: flex; flex-flow: row wrap; justify-content: space-between;}
.portfolio-container>div{display: flex; flex-flow: column wrap; width: calc(94%/3); margin: 20px 0.99%}

.portfolio-text{display: flex; flex-flow: row wrap; justify-content: space-between; font-size: 15px; width: 100%}
.portfolio-text h2{font-size: 21px; width: 100%; padding: 0; margin: 8px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.portfolio-text p{color: #111}
.portfolio-text a{color: #fff; font-family: 'Patua One','cursive'; text-transform: uppercase}

.mask2{display: flex; width: 100%}
.mask2 a{display: flex; width: 100% ;background-color: #000;}
.mask2 img{width: 100%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter:alpha(opacity=40);
    opacity:0.6;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out}
.mask2 img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter:alpha(opacity=99); opacity:1}

footer{display: flex;justify-content: center;align-items: center;color:#fff; background:#111;height: 86px; text-align: center; line-height: 19px;}



@media screen and (max-width: 1366px) {

.container{width: 96%}

}


@media screen and (max-width: 1199px) {

.about-slide .about-text{width: calc(100% - 350px)}

}


@media screen and (max-width: 991px) {

.home-logo-container{flex-flow: column nowrap;}
.home-logo-container .logo{margin: 0 0 25px;}
.home-logo-container .logo-line{display: none;}
.home-logo-container .logo-text{font-size: 22px;}

.home-contact-icons a{margin: 0 15px;}
.home-contact-icons a span{font-size: 13px;}

.about-slide .about-text{font-size: 15px}

.portfolio-container>div{width: calc(94%/2);}

}


@media screen and (max-width: 767px) {

.about-slide .about-text{font-size: 14px; width: 100%}
.about-slide .about-photo{margin: 0;}

}

@media screen and (max-width: 680px) {

.home-logo-container .logo-text{font-size: 20px;}

}


@media screen and (max-width: 603px) {

.home-logo-container .logo-text{font-size: 15px;}

}


@media screen and (max-width: 568px) {

header .topControlBar .container{justify-content: center;}

.home-contact-icons a{margin: 0 4px;}
.home-contact-icons a span{display: none;}
.home-contact-icons a i{font-size: 24px; width: 60px; height: 60px}

.container{width: 90%;}
.portfolio-filter{flex-flow:column wrap ;}

.portfolio-container > div {width: 100%;}

}



@media screen and (max-width: 480px) {

header .topControlBar .small-logo{margin: 0 0 5px;}
nav li a{font-size: 12px; height: 30px;padding: 0 10px;}
.social-icons{width: 120px;}
.social-icons a i{height: 30px;}

.home-logo-container .logo-text{flex-flow: column nowrap;}
.home-logo-container .logo-text p{margin: 4px 0; font-size: 20px;}
.home-logo-container .logo-text p::after{display: none;}

.title h2{font-size: 32px;}

.portfolio-container>div{margin: 20px 0; width: 100%;}

}


@media screen and (max-width: 384px) {

.home-logo-container .logo, .home-logo-container .logo img:nth-child(2){width: 85%;}

.about-slide .about-photo{width: 90%; margin: 0 auto;}

.home-logo-container .logo{margin: 0 0 10px;}

}


@media screen and (max-width: 320px) {}



@media screen and (max-width: 240px) {}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader{background: rgba(182, 52, 45);}
#preloader:before{ border: 6px solid #ffffff;border-color: #7a231e transparent #7a231e transparent;}

.finsihed {opacity: 0 !important; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;}
#preloader {position: fixed;inset: 0;z-index: 999999;overflow: hidden;transition: all 0.6s ease-out;}
#preloader:before {content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border-radius: 50%;  width: 100px; height: 100px; animation: animate-preloader 1.5s linear infinite;}
@keyframes animate-preloader {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}