main.css

html,body{height: 100%;
    width: 100%;}


/*=========== lines ==================================================*/
.profileline{border-bottom: 2px solid lightgrey; }
.resumeline{border-bottom: 2px solid lightgrey; ;padding-bottom: 1%;margin-bottom: 2%; width:70%; margin-right: auto;margin-left: auto;}
.skilldivider{border-bottom: 2px solid lightgrey; ;padding-bottom: 30px ;margin-bottom: 10px; width:30%; margin-right: auto;margin-left: auto;}
.skillline{border-bottom: 2px solid lightgrey; ;padding-bottom: 1%;margin-bottom: 2%; width:15%; margin-left: 3%;}
/*=========== Header ==================================================*/

.navigation{border-bottom: 2px solid #000000;background-color: #ffffff;}

#logolink:hover{text-decoration: none;}
.logo p{font-family: "caviar_dreamsregular",sans-serif; font-weight: 600;margin-bottom: 0;padding-bottom: 0;}
.pagelogo{ font-size: 32px; color: #000000;display: inline; }
.pagelogofirstletter{ font-size: 40px;color: #000000;display: inline;}
.restoflogo{font-family: "caviar_dreamsregular",sans-serif; font-weight: 300; color: #b89dff;font-size: 14px;;margin-left: 10%;}
.logo{line-height: 1; float: left; display: inline;}




/*=========== First page Jumbotron ==================================================*/

#topjumbotron .container{position: relative;

    top: 28%;
    z-index: 4;
    text-align: center;    max-width: 1280px;
    border: 1px solid #ffffff;
}
#topjumbotron{
    height: 100%;width:100%; position: relative;
    background: none no-repeat fixed right center / cover transparent;
-webkit-background-size: 100%;
background-image: url("images/giphy%20(3).gif");
background-position: center center;

    margin-bottom: 0;
    padding: 0;
}
#topjumbotron h1{ font-family: "danielbold";   padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-block;
    text-align: center;
    color: #fdffc7;
    font-weight: 700;
    margin-bottom: 10px; z-index: 100;}
#topjumbotron p{font-size: 28px;font-family: "latin_modern_roman_demi10Rg";
    text-align: center;
    color: #fff0fe; z-index: 100;
}


#topjumbotron .overlay {height:100%;width:100%;
    background-color: rgba(255, 255, 0, 0.49);
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    z-index: 2;


}
.jumbotron .scroll-down {
    height: 80px;
    width: 110px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #222;
    text-align: center;
    z-index: 6;
}
.jumbotron .scroll-down .glyphicon {
    color: #FFF;
    font-size: 30px;
    padding-right: 2px;
    padding-top: 20px;
    -webkit-animation-name: wiggle;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;


    animation-name: wiggle;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.scroll-down:hover{cursor: pointer;}




/*=========== first page Profile  ==================================================*/

#profile{position: relative;
    min-height: 100%;
    clear: both;}
#profile .row > div img {
    width: 100%;
    max-width: 246px;
    text-align: center;

}


#profile h1{
    color: #22A39F;
    font-size: 28px;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;
    font-weight: 300;
    margin-bottom: 20px;text-align: center

}

#profile p{
    font-size: 15px;
    line-height: 1.64;
    color: #434242;
    text-justify: auto;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;text-align: center;

}
#profile a{
    display: block;
    font-size: 13px;
    line-height: 1.9;
    padding-bottom: 10px;
    color: #434242;
    text-justify: auto;
    text-decoration: none;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;

}

#aboutme p{text-align: left; text-justify: auto;line-height: 1.3;}
#profileimage{padding-top: 1%}

#profileheader{text-align: center; }
#profileheader h1{font-size: 54px;font-weight: 300;}
#profileheader p{font-size: 21px;font-weight: 200;}
#profilescroll{position: relative;}
#profilescroll .scroll-down {
    height: 80px;
    width: 110px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #222;
    text-align: center;
    z-index: 6;
}
#profilescroll .scroll-down .glyphicon {
    color: #FFF;
    font-size: 30px;
    padding-right: 2px;
    padding-top: 20px;
    -webkit-animation-name: wiggle;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

    animation-name: wiggle;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}



/*=========== First page resume Section ==================================================*/

#resume{position: relative; clear: both; min-height: 100%}
#resumeheader{ padding-top:2%; padding-bottom: 1%}
#resumeheader h1{font-size: 54px;font-weight: 300;color: #22A39F;

    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;text-align: center;

    margin-bottom: 20px;}
#resumescroll{position: relative;}
#resumescroll .scroll-down {
    height: 80px;
    width: 110px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #222;
    text-align: center;
    z-index: 6;
}
#resumescroll .scroll-down .glyphicon {
    color: #FFF;
    font-size: 30px;
    padding-right: 2px;
    padding-top: 20px;
    -webkit-animation-name: wiggle;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

    animation-name: wiggle;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

/*=========== resume icons ==================================================*/

/*#secondreumeitem{top: 75%;}
#fourthreumeitem{top: 75%;}*/
.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-grid li {
    width: 180px;
    height: 180px;
    display: inline-block;
    margin: 20px;
}

.ch-item:hover{
    cursor: pointer;
}

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    cursor: default;
    perspective: 900px;
   /* -webkit-animation-name: jump;
    -webkit-animation-duration: 1.8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

    animation-name: jump;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;*/
}

.ch-info{
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style:preserve-3d;
}
.ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-position: center center;
    transition: all 0.4s linear;
    transform-origin: 50% 0%;
    -webkit-transition: all 0.4s linear;
    -webkit-transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
    box-shadow: inset 0 0 0 6px black;
}
.ch-info .ch-info-back {
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    background: #ffffff;
    opacity: 0;
}

.ch-img-1 {
    background-image: url(images/booksandglasses.gif);
    background-repeat: no-repeat;
}

.ch-img-2 {
    background-image: url(images/work.jpg);
    background-repeat: no-repeat;
}

.ch-img-3 {
    background-image: url(images/certifications.jpg);
    background-repeat: no-repeat;background-size: 100%;
}
.ch-img-4 {
    background-image: url(images/skills.jpg);

}
.ch-img-5 {
    background-image: url(images/project.jpg);
    background-repeat: no-repeat;background-size: 100%;
}

.ch-info h3 {
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    padding: 60px 0 0 0;
    height: 110px;
    font-family: 'open sans', Arial, sans-serif;
    text-shadow:
    0 0 1px #fff,
    0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
    color: #000000;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 4px;
    font-family: 'open sans', Arial, sans-serif;
}

.ch-info p a:hover {
    color: rgba(255,242,34, 0.8);
}
.ch-item:hover .ch-info-front {
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
}
.ch-item:hover .ch-info-back {
    transform: rotate3d(1,0,0,0deg);
    -webkit-transform: rotate3d(1,0,0,0deg);
    opacity: 1;
}
/*.ch-item:hover{-webkit-animation-play-state:paused;animation-play-state:paused;}*/



/*=========== Carousel ==================================================*/

#firstcarousel{
    height: 150px;background-color: white;background-position: center center;margin: 2px 4px 4px 4px;}
#carouselindicators .active{background-color: #22A39F;}
#carouselindicators li{border: 1px solid #22A39F;}
#carouselindicators{
    bottom: 0;
    clear:both;
}

.carousel-inner{position: absolute;
    top: 0;clear:both;}
#firstcarousel .carousel-control {
    background-image: none;

}
#carouselcontrolleft{left:0;margin-left: 0;}
#carouselcontrolright{right:0; margin-right:0;}
.carouselcontrol{color: black;opacity: 0.1;}
.carouselcontrol:hover{color: black;opacity: 0.5;}

.carouselcontainer{clear:both;width: 100%;}

.carouselheaders{
    color: #22A39F;height:100%;font-family: "latin_modern_roman_demi10Rg",sans-serif !important;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;

}





/*=========== Resume body ==================================================*/
.resumebody{
    position: absolute;
    width: 100%;
    left:0;
    background-color: #ffffff;
    margin: 0 0 0 0;
    display: none;
}
#educationbody{
    display: inline;}
.skilltitle{padding-left: 3%;}


.resumebody  h3{
    color: black;
    text-transform: uppercase;
    font-size: 22px;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;
    font-weight: 600;

}
.skilltitle h3{color: #22A39F;}
.resumebody  p,a{
    font-size: 15px;
    line-height: 1.64;
    color: #434242;
    text-justify: auto;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;

}

.resumebody  li{
    font-size: 15px;
    line-height: 1.64;
    color: #434242;
    text-justify: auto;
    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;

}

.lefty{
    width:48%;
    display:inline-block;
    padding-left: 5%;
    padding-right: 3%;

}
.righty{
    width:50%;
    display:inline-block;
    top:0;
    position:relative;

}

.righty h3{

    text-transform: none;
}

.righty p{

}
.stars{color:yellow;
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 0;
    }
.skillelement{height:100%;}
.backgroundgrey{
    background-color: #eaeaea;}
.starshover{
    -webkit-transition:font-size 0.6s;
    transition: font-size 0.6s;
    font-size:17px;
    margin-top: 0.68em;
    margin-bottom: 0;}

#certificatesbody  li{margin-left:5%;}
#certificatesbody p{margin-left:10%; padding-bottom: 30px;}

#projectsbody li{list-style-type: none;padding:2%}
#projectsbody p{list-style-type: none;padding:2%}
#projectsbody ul > li{list-style-type: square;}
#projectsbody h5{list-style-type: none;padding:2%;display:inline;}
#projectsbody h4{font-weight: bold;}
.pojectstags{display:inline;padding-left: 1%;}
/*=========== Modal ==================================================*/
#modalcontainer{margin-top:60px;}


#modalclose{color:#eaeaea;position: absolute;top:-28px;right: 0;z-index: 1200;}
#modalclose:hover{color: #000000}
#arrows{position: relative;}



/*=========== Contacts ==================================================*/
#Downloads {
    background-color: #f2f2f2;clear:both;
    overflow: hidden;
    height: 100%;


}
.contactsheader h1{font-size: 54px;font-weight: 300;color: #22A39F;

    font-family: "latin_modern_roman_demi10Rg",sans-serif !important;text-align: center;

    margin-bottom: 20px;}
.contactsheader{margin-top:2%;margin-bottom: 4%;color:black;}

.secondcontacts >a{
    display:block;
    color:#434242;
    margin-bottom: 3%;text-align: center;
}
.secondcontacts >a>p{
    display:inline;
    color: #434242;

}

.logocontacts{display: inline;}




#downloadsscroll{position: relative; height:100%;}
#downloadsscroll .scroll-down {
    height: 80px;
    width: 110px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #222;
    text-align: center;
    z-index: 6;
}
#downloadsscroll .scroll-down .glyphicon {
    color: #FFF;
    font-size: 30px;
    padding-right: 2px;
    padding-top: 20px;
    -webkit-animation-name: wiggle;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;

    animation-name: wiggle;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}


/*=========== Media Query ==================================================*/

@media (max-width: 991px) {

    .pagelogo{font-size: 28px;}
    .pagelogofirstletter{font-size: 36px;}
    .restoflogo{font-size: 12px;}
    #topjumbotron h1{font-size: 32px;}
    #details  {text-align: center;}


}


@media (max-width: 670px) {
    /*.secondcontacts >a>p {

        font-size:12px ;}
    .firstcontacts >a>p {

        font-size:12px ;}*/



}
@media (max-width: 616px) {

    .pagelogo{font-size: 24px;}
    .pagelogofirstletter{font-size: 32px;}
    .restoflogo{font-size: 10px;}
}

@media (max-width: 572px) {
    /*.secondcontacts >a> p {
        display: none;
       }*/
    #topjumbotron h1{font-size: 26px;}
    #topjumbotron p{font-size: 18px;}
    .jumbotron .scroll-down{width:100%;right:0;}
    #profilescroll .scroll-down{width:100%;right:0;position: relative;}
    #resumescroll .scroll-down{width:100%;right:0;position: relative;}
    #downloadsscroll .scroll-down{width:100%;right:0;}


    .righty{
        width:100%;}
    .lefty{
        width:100%;}

}

@media (max-width: 480px) {
    #profileheader h1{

        font-size: 35px;}
    #resumeheader h1{font-size: 35px;}
    .contactsheader h1{font-size: 35px;}

    .carouselheaders{

        font-size: 25px;}

}
@media(max-width: 355px){
    .projectlinks a{font-size: 12px;}
}

@media (max-width: 1200px){

  }


@media (max-height: 460px){

    #topjumbotron .container{height: 50%;top:10%; }
    #topjumbotron > h1{
        font-size: 42px;}

}
/*=========== animation keyframes ==================================================*/
@-webkit-keyframes wiggle {
    0% {
        padding-top: 20px;
    }

    50% {
        padding-top: 28px;
    }

    100% {
        padding-top: 20px;
    }
}
@keyframes wiggle {
    0% {
        padding-top: 20px;
    }

    50% {
        padding-top: 28px;
    }

    100% {
        padding-top: 20px;
    }
}
@-webkit-keyframes jump {
    0% {
        padding-top: 0;
    }

    50% {
        padding-top: 28px;
    }

    100% {
        padding-top: 0;
    }
}
@keyframes jump {
    0% {
        padding-top: 0;

    }

    50% {
        padding-top: 28px;
    }

    100% {
        padding-top: 0;
    }
}

@font-face {
    font-family: 'danielbold';
    src: url('danielbd-webfont.eot');
    src: url('danielbd-webfont.eot?#iefix') format('embedded-opentype'),
    url('danielbd-webfont.woff') format('woff'),
    url('danielbd-webfont.ttf') format('truetype'),
    url('danielbd-webfont.svg#danielbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'latin_modern_roman_demi10Rg';
    src: url('lmromandemi10-regular-webfont.eot');
    src: url('lmromandemi10-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('lmromandemi10-regular-webfont.woff') format('woff'),
    url('lmromandemi10-regular-webfont.ttf') format('truetype'),
    url('lmromandemi10-regular-webfont.svg#latin_modern_roman_demi10Rg') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open sans';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('OpenSans-Regular-webfont.woff') format('woff'),
    url('OpenSans-Regular-webfont.ttf') format('truetype'),
    url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}